<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <script src="/static/js/public/reset.js"></script>
    <link href="/static/css/public/reset.css" rel="stylesheet" />
    <link href="/static/css/public/public.css" rel="stylesheet" />
    <style>
        .body {
            padding: 0 2rem;
        }

        .form {
            display: flex;
            align-items: center;
            height: 3rem;
            justify-content: flex-end;
            background-color: rgb(245, 246, 248);
            margin: 1.5rem 0;
            border-radius: 5px;
        }

        .form img {
            width: 10%;
            margin-right: .3rem;
        }

        input {
            width: 82%;
            font-size: .83rem;
            border: 0;
            background-color: rgb(245, 246, 248);
        }

        .btn {
            font-size: .9rem;
            width: 100%;
            margin: 1.2rem auto;
            color: white;
            line-height: 2.1rem;
            border-radius: .72rem;
            text-align: center;
        }

        .btn1 {
            background: rgb(56, 120, 136);
        }

        .btn2 {
            background: rgb(73, 104, 155);
        }

        .tt {
            background: rgb(56, 120, 136);
            line-height: 2.5rem;
            text-align: center;
            color: white;
            font-size: 1rem;
            position: relative;
        }

        .tt img {
            width: 7.6%;
            position: absolute;
            left: .8rem;
            top: 50%;
            transform: translate(0, -50%);
        }

        .sended {
            background-color: lightgray;
        }



        .chcx {
            display: flex;
            align-items: center;
            justify-content: center;
            /* height: 100%;
            background: url(./img/products/4.jpg);
            background-size: 100% 100%; */
        }

        .chcx-box {
            width: 80%;
            padding: 1rem;
            border-radius: 5px;
            font-size: .8rem;
        }

        .chcx-box .line {}

        .step {
            display: flex;
            align-items: baseline;
            margin-top: 1rem;
        }

        .step .number {
            width: 1.2rem;
            height: 1.2rem;
            line-height: 1.2rem;
            background-color: #249C93;
            border-radius: 1.2rem;
            text-align: center;
            color: #FFF;
        }

        .step .content {
            flex: 1;
            margin-left: 1rem;
        }

        .step .content .tm {
            font-size: .7rem;
        }

        .step .item {
            display: flex;
            align-items: center;
        } 

        .step .arrow { 
            display: inline-block; 
        }

        .step .arrow span { 
            font-size: .6rem;
            color: #252A34;
        }

        .step img{
            width: 1rem;
            margin:0 10px;
        }
    </style>
</head>

<body>
    <div class="tt">
        <img src="/static/images/public/left.png" onclick="javascript:history.go(-1)">
        <p>窜货查询</p>
    </div>
    <div class="body" id="login" style="display: none;">
        <div class="form">
            <img src="/static/images/public/user.png">
            <input id="input_phone" type="text" placeholder="请输入用户名（手机号）">
        </div>
        <div class="form">
            <img src="/static/images/public/pwd.png">
            <input id="input_code" type="text" placeholder="请输入动态密码">
        </div>
        <div style="margin-top: 3.5rem;">
            <div class="btn btn1" id="confirm">登录</div>
            <div class="btn btn2" id="getcode">获取动态密码</div>
        </div>
    </div>



    <div class="chcx" id="chcx" style="display: none;">
        <div class="chcx-box" id="chcx_content">
            <p class="line"><b>产品名称：</b><span id="product_name"></span></p>
            <p class="line"><b>标签序号：</b><span id="label_code">{{label_code}}</span></p>




        </div>
    </div>

    <script src="/static/js/jquery-2.1.0.min.js"></script>
    <script src="/static/js/public/public.js"></script>
    <script>
        var company_id = '{{company_id}}';
        var isLogin = tj_public.getCookie('chcx_' + company_id);
        if (isLogin && isLogin === '1') {
            $("#chcx").fadeIn();
            getLabelInfo();
        }
        else {
            $("#login").fadeIn();
        }

        let realCode = '0000';
        $("#getcode").click(function () {

            if ($(this).hasClass('sended')) {
                return;
            }

            let phone = $("#input_phone").val();
            if (!(/^1[3456789]\d{9}$/.test(phone))) {
                alert('手机号码错误!');
                return;
            }
            $(this).addClass('sended');
            $(this).text('发送中');

            $.ajax({
                url: '/wx/chcx/getcode/',
                type: 'POST',
                data: {
                    phone: phone,
                    company_id: '{{company_id}}'
                },
                success: function (res) {
                    if (res.e === '') {
                        realCode = res.code;
                        $("#getcode").text('已发送');

                        let index = 60;
                        let timer = setInterval(function () {
                            if (index === 0) {
                                $("#getcode").text('重新获取动态密码');
                                $("#getcode").removeClass('sended');
                                clearInterval(timer);
                            }
                            else {
                                $("#getcode").text(index + '秒后重试');
                            }
                            index--;

                        }, 1000)

                    }
                    else {
                        alert(res.e);
                        $("#getcode").text('重新获取动态密码');
                        $("#getcode").removeClass('sended');
                    }
                },
                error: function () {
                    alert('网络超时！请稍后再试！');
                }
            })


        });



        $("#confirm").click(function () {
            let code = $("#input_code").val().trim();
            if (realCode === code && code.length === 4) {
                getLabelInfo();
                tj_public.setCookie('chcx_' + company_id, 1);
            }
            else {
                alert('您输入的动态密码有误！');
            }
        })

        function getLabelInfo() {
            $("#login").hide();
            $("#chcx").fadeIn();
            $.ajax({
                url: '/label/app/{{company_id}}/{{label_code}}/',
                type: 'get',
                success: function (res) {
                    if (res.e === '') {

                        $("#product_name").text(res.product);

                        var html = '';

                        var delivery = res.stock_dev;

                        for (var n = 0; n < delivery.length; n++) {
                            var store = delivery[n].store;
                            var tm = delivery[n].time;
                            var fr_company = delivery[n].fr_company;
                            var to_company = delivery[n].to_company;
                            var voucher_no = delivery[n].voucher_no; //单号
                            var voucher_type = delivery[n].voucher_type; //状态
                            html += `<div class="step">
                                            <div class="number">${n + 1}</div>
                                            <div class="content">
                                                <p class="tm">${tm}</p>
                                                <div><b>${fr_company}</b></div>
                                                <div class="item">
                                                    <div class="arrow">
														<span>${voucher_type}</span>
														${to_company!=''?'<img src="/static/images/public/arrorw.png"/>':''}
													</div>
                                                    <div>
                                                        <p class="name"><b>${to_company}</b></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>`

                        }
                        $("#chcx_content").append(html);
                    }
                },
                error: function () {
                    alert('网络超时！')
                }
            })
        }


    </script>
</body>

</html>