{extend name="public/common"/}

{block name="body"}
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="__STATIC__/verification/css/common.css">
    <link rel="stylesheet" href="__STATIC__/verification/css/reset.css">
 
    <style>
        .pageBg {
            background-image: url('.');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            height: 100%;
            width: 100%;
            background-color: #f9f9f9;
        }

        .header {
            margin-top: 5.3646vw;
            width: 63.6979vw;
            height: 3.6979vw;
            background: #ffffff;
            border-radius: 0.625vw;
            font-size: 1.6667vw;
            font-family: AlibabaSans Heavy, AlibabaSans Heavy-Heavy;
            font-weight: 800;
            text-align: left;
            color: #2a9abb;
            line-height: 0.4167vw;
            text-shadow: 1px 6px 6px 17px rgba(16, 143, 190, 0.09);
        }

        .content {
            display: flex;
            justify-content: space-between;
            margin: 1.5625vw auto;
            width: 63.6979vw;
            min-height: 65.74vh;
            background: #ffffff;
            border-radius: 0.625vw;
        }

        .w_510 {
            width: 26.5625vw !important;
        }

        .codeInput {
            width: 20.8333vw;
        }

        .jcc {
            justify-content: center;
        }

        .mt-60 {
            margin-top: 3.125vw;
        }

        .mt-30 {
            margin-top: 1.5625vw;
        }

        .title {
            font-size: 1.4583vw;
            font-family: AlibabaSans Bold, AlibabaSans Bold-Bold;
            font-weight: 700;
            text-align: left;
            color: #5a5a5a;
        }

        .btn {
            width: 281px;
            height: 44px;
            background: #21829e;
            border-radius: 22px;
            color: #ffffff;
        }

        .input {
            text-indent: 1em;
            height: 48px;
            /* background: linear-gradient(#030000 0%, #ffffff 100%); */
            border: 2px solid #9b9b9b;
            border-radius: 5px;
        }

        /*彈窗*/
        .Dialog-bg {
            background-color: #000;
            height: 100%;
            left: 0;
            opacity: 0.5;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 200;
        }

        .Dialog {
            box-sizing: border-box;
            margin-bottom: 0;
            margin-left: -13.9583vw;
            margin-right: auto;
            margin-top: -5.625vw;
            top: 19.5313vw;
            left: 50%;
            position: fixed;
            z-index: 99999;
            width: 27.5vw;
            min-height: 11.25vw;
            background: #ffffff;
            border-radius: 1.0417vw;
            padding: 1.4583vw 2.3958vw 1.25vw 1.5625vw;
        }

        .Dialog img {
            width: 85px;
            height: 85px;
        }

        .Dialog button {
            margin-top: 1.25vw;
            font-size: 1.3542vw;
            color: #ffffff;
            margin-left: 4.1667vw;
            width: 6.25vw;
            height: 2.1875vw;
            background: #21829e;
            border-radius: 1.0938vw;
            border: 0;
        }

        .Dialog .result_title {
            font-size: 18px;
            font-weight: 400;
            text-align: left;
            color: rgba(90, 90, 90, 1);
            line-height: 1.25vw;
        }

        .Dialog .result_code {
            font-size: 18px;
            font-weight: Bold;
            text-align: left;
            color: rgba(0, 0, 0, 1);
            line-height: 1.25vw;
        }

        .Dialog .result_content {
            margin-top: 1.0417vw;
            font-size: 0.9375vw;
            font-weight: 400;
            text-align: left;
            color: #5a5a5a;
            line-height: 1.25vw;
        }

        .ml-14 {
            margin-left: 0.7292vw;
        }

        @media screen and (max-width: 765px) {
            body{
                font-family: Arial;
            }
            .flex2 {
                width: 100% !important;
            }

            .w_510 {
                width: 80% !important;
            }

            .mt-60 {
                align-items: center;
            }

            .Dialog {
                left: 0;
                right: 0;
                width: 80%;
                top: 50%;
                margin: auto;
                transform: translateY(-50%);
            }

            .result_content,
            .result_title,.result_code {
                line-height: inherit !important;
                text-align: center !important;
                font-size: 16px !important;
            }

            .Dialog button {
                height: auto !important;
                margin: 9px auto 0 !important;
                width: 29%;
                font-size: 19px;
                border-radius: 50px;
                height: 32px !important;

            }

            .Dialog img {
                display: block;
                margin: 0 auto;
            }

            .flex {
                display: block;
                padding: 22px 0;
                background-color: white;
            }
            .header{
                width: auto !important;
                font-size: 18px;
            }
            .title{
                font-size: 16px;
            }
            .content img {
                width: 100%;
            }
        }
    </style>


<div class="font">
    <div class="Dialog-bg" style="display: none;"></div>
    <div class="Dialog flex" style="display: none;">
        <img id="stateImg" src="__STATIC__/verification/images/error.png" alt="">
        <div class="flex2 ml-14">
            <span class="result_title"><span class="font-semibold-25">search result:</span></span>
            <span class="result_code"></span>
            <div class="result_content">
            </div>
            <button onclick="dialogHide()">OK</button>
        </div>
    </div>
    <div class="pageBg">
        <div class="flex jc-sa">
            <div class="header fcc">
                <span class="font-semibold-30"> PRODUCT AUTHENCITY VERIFICATION</span>
            </div>
        </div>
        <div class="content flex2">
            <div class="flex jcc w100pc">
                <div class="flex2 mt-60">
                    <span class="w_510 title"><span class="font-semibold-25">Security Code</span></span>
                    <input type="text" id="codeValue" class="codeInput w_510 mt-30 input"
                        placeholder="Please enter the security code" />
                    <div class="w_510 fcc mt-60">
                        <button class="btn" onclick="QueryCode()"><span class="font-semibold-20">CLICK TO VERIFY</span></button>
                    </div>
                </div>
            </div>
            <img src="__STATIC__/verification/images/img2.png" alt="">
        </div>
    </div>
</div>

<script>
    function dialogHide() {
        $(".Dialog-bg").hide();
        $(".Dialog").hide();
    }
    $("#codeValue").val(window.location.href.split("=")[1])
    function QueryCode() {
        var text = $("#codeValue").val();
        var textkt = text.substring(0, 4);
        console.log(text)
        if (true) { //你防伪码的前面四位 The first four digits of your security code
            $.ajax({
                url: 'https://ck.fw-12365.com/ashx/SecurityQueryApi.ashx?Key=tc201805051108&Lang=en-gb', //请求的URL  The requested URL
                timeout: 5000, //超时时间设置，单位毫秒 Timeout setting in milliseconds
                type: 'post', //请求方式，get或post Request mode, get or post
                data: {
                    FWCode: text
                }, //请求所传参数，json格式  Request the passed parameter in json format
                dataType: 'json', //返回的数据格式   The format of the data returned
                success: function (data) { //请求成功的回调函数   Request successful callback function
                    console.log(data, "data");
                    // alert('成功');
                    //1922206298448495
                    var JsonData = data;
                    $('.result_code').html(JsonData.BarCode)
                    if (JsonData.State == 1 || JsonData.State == 3) {
                        //回复内容 可以自己改变 The content of the reply can be changed by itself
                        $(".Dialog-bg").show();
                        $(".Dialog").show();
                        $(".result_content").html(
                            'Congratulations!! The product code you have entered has been verified as an authentic Loon device. Thank you!!'
                        );
                        $('#stateImg').attr("src", "__STATIC__/verification/images/correct.png")
                    } else if (JsonData.State == 2) {
                        $(".Dialog-bg").show();
                        $(".Dialog").show();
                        let str = `
                        The security code you have queried has been queried ${JsonData.Times} Times，</br>
                        First query ：${JsonData.RecordList[0].Address}，</br>
                        Time：${JsonData.RecordList[0].QueryTime},</br>
                        ${JsonData.RecordList[0].From}，</br>
                        If the verification is not from you, please
                        contact the dealer!`
                        $(".result_content").html(str);
                        $('#stateImg').attr("src", "__STATIC__/verification/images/repeat.png")
                    } else if(JsonData.State == 4){
                        $(".Dialog-bg").show();
                        $(".Dialog").show();
                        $('#stateImg').attr("src", "__STATIC__/verification/images/error.png")
                        $(".result_content").html(
                            JsonData.QueryContent
                        );
                    }else{
                        $(".Dialog-bg").show();
                        $(".Dialog").show();
                        $('#stateImg').attr("src", "__STATIC__/verification/images/error.png")
                        $(".result_content").html(
                            'The security code you are looking for does not exist, please contact the dealer!'
                        );
                    }
                    // if (parseInt(JsonData.Times) > 6) {
                    //     $("#p4").html(
                    //         'The security code you verified has exceeded the query limit! Beware of fake!'
                    //     );
                    // }
                    // console.log(JsonData.BarCode)
                },
                complete: function (XMLHttpRequest,
                    status) { //The final execution parameter after the request is completed
                    console.log(status)
                    if (status == 'timeout') { //Timeout,status, success,error equivalent
                        $(".Dialog-bg").show();
                        $(".Dialog").show();
                        $(".result_content").html('Network request timeout timeout');
                    }
                }
            });
        } else {
            $(".Dialog-bg").show();
            $(".Dialog").show();
            $(".result_content").html('The security code entered is wrong');
        }
    }
</script>

{/block}