{extend name="base" /}
{block name="style"}
<style>
    .qrcode {
        position: relative;
        height: 170px;
        width: 170px;
        border: #ccc solid 1px;
    }

    .qrcode-text {
        position: absolute;
        text-align: center;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding-top: 50px;
        background-color: white;
    }

    .qrcode img {
        height: 150px;
        width: 150px;
        margin: 10px;
        background-color: #ccc;
    }

    .form-row {
        margin-left: 0px;
        margin-right: 0px;
    }
</style>
{/block}
{block name="main"}
<div id="page-container">
    <div class="page-content main-content my-main-content">
        <div class="main-content-inner">
            <form class="form" action="{$admin_root}/alipay" method="post">
                <div class="row">
                    <!-- data 表格 -->
                    <div class="col-lg-8 col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <h5>支付宝配置</h5>
                                <div class="form-group mt-3">
                                    <label class="col-form-label">当前cookie</label>
                                    <textarea style="height:200px;" id="alipaCookie" name="alipay_cookie"
                                              class="form-control">{$alipayCookie}</textarea>
                                </div>

                                <div class="form-group mt-3">
                                    <label class="col-form-label">当前状态</label>
                                    {if $status == 0 }
                                    <span class="badge badge-danger status">异常</span>
                                    {else}
                                    <span class="badge badge-success status">正常</span>
                                    {/if}
                                </div>

                                <!--                                <label class="col-form-label">登录二维码</label>-->
                                <div class="form-row">
                                    <div class="form-group mt-3">

                                        <div class="qrcode">
                                            <div class="qrcode-text">
                                                <div class="loader_rippler primary_ripple_loader" style="display: none;">
                                                    <div></div>
                                                    <div></div>
                                                </div>
                                            </div>
                                            <img src="###" id="qrcodeLogin"/>
                                        </div>
                                    </div>
                                    <div class="col-auto ml-3">

                                        <button type="button" id="qrcode-text"
                                                class="btn btn-success mt-3  mb-3" data-style="expand-right">
                                            <span class="ladda-label">获取二维码</span>
                                        </button>

                                        <small class="form-text text-muted mb-3">二维码生效时间</small>
                                        <div id="time" class="text-danger mb-3"></div>

                                    </div>
                                </div>

                                <div class="form-group mt-3">
                                    <label class="col-form-label">挂机地址</label>
<!--                                        <input type="hidden" id="code" name="code" value="{$code}"/>-->
                                        <input id="codeUrl" value="{$codeUrl}" readonly class="form-control">
                                </div>

<!--                                <small class="form-text text-muted">留空则为通用二维码。每种支付方式都需要一个通用二维码，且通用二维码只能存在一张</small>-->

                                <button type="submit" class="btn btn-primary ladda-button ladda_btn btn-fixed-w mt-4"
                                        data-style="expand-right">
                                    <span class="ladda-label">确认保存</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- data 表格 -->
                </div>
            </form>
        </div>
    </div>
</div>
{/block}
{block name='script'}
<script>
    var codeId = 0;
    var getCookieTimer;

    $(function () {
        // 状态异常时
        if( $(".status").text() == '异常' ){
             qrcodeing();
        }
        $("#qrcode-text").on('click', qrcodeing);
        $("#refreshCornCode").on('click',getCornCode);
    });

    // 获取二维码
    function qrcodeing() {

        $("#qrcodeLogin").prop('src', '');
        $(".qrcode-text").show();
        $(".qrcode-text .loader_rippler").show();
        $("#qrcode-text").prop('disabled', true).find('span').text('获取二维码中...');

        $api.get('alipaycodeid', {}, function (data) {
            if (data.code != 0 || !data.data.qr_url) {
                $toast.error('二维码获取失败');
                return false;
            }
            codeId = data.data.id;
            qrcoded(data.data.qr_url);
        });
    }

    // 二维码获取完毕
    function qrcoded(url) {
        $("#qrcodeLogin").prop('src', url);
        getCookieTimer && clearInterval(getCookieTimer);
        getCookieTimer = setInterval(getAlipayCookie, 3000);
        setTimeout(function () {
            countDownStart();
            $(".qrcode-text").hide();
            $("#qrcode-text").prop('disabled', false).find('span').text('重新获取二维码');
        }, 1000)
    }

    function getCornCode() {
        $api.get('alipaycode', {}, function (data) {
            if (data.code == 0) {
                $('#code').prop('value', data.data.code);
                $('#codeUrl').prop('value', data.data.codeUrl);
            }
        })
    }

    // 获取cookie
    function getAlipayCookie() {

        if (codeId == 0)
            return false;

        $api.get('alipaycookie/' + codeId, {}, function (data) {

            if (data.code != 0) {
                console.log(data.data);
                return false;
            }

            if (data.data.cookie && $("#alipaCookie").val() != data.data.cookie) {
                $("#alipaCookie").prop('value', data.data.cookie);
            }

            if (data.data.cookie) {
                $(".status").removeClass('badge-danger').addClass('badge-success').text('正常') ;
                countDownClear();
                clearInterval(getCookieTimer);
            }

        })
    }

    // 倒计时
    function countDownStart() {
        maxtime = 3 * 60;
        countDownClear();
        countDown();
        timer = setInterval(countDown, 1000);
    }

    function countDownClear() {
        document.getElementById('time').innerHTML = '';
        timer && clearInterval(timer);
    }

    var maxtime;
    var minutes, seconds, msg;
    var timer;

    function countDown() {
        if (maxtime >= 0) {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            msg = minutes + "分" + seconds + "秒";
            document.getElementById("time").innerHTML = msg;
            --maxtime;
        } else {
            countDownClear();
        }
    }

</script>
{/block}