{extend name="extra@admin/content"}

{block name="style"}
<style>
    .pay-qrc-test {
        height: 248px;
        width: 248px;
        background: url('__STATIC__/plugs/layui/css/modules/layer/default/loading-2.gif') no-repeat center center
    }

    .refund-qrc-test {
        text-align: center;
        padding: 8px
    }
</style>
{/block}

{block name="content"}
<form onsubmit="return false;" action="{:request()->url(true)}" data-auto="true" method="post"
      class='form-horizontal' style='padding-top:20px'>

    <div class="form-group">
        <label class="col-sm-2 control-label">MCH_ID(商户ID)</label>
        <div class='col-sm-8'>
            <input type='tel' placeholder="请输入10位商户MCH_ID（必填）" title='请输入10位数字商户MCH_ID'
                   required="required" pattern="^\d{10}$" maxlength='10' name='wechat_mch_id'
                   value='{:sysconf("wechat_mch_id")}' class='layui-input'/>
            <p class="help-block">
                注意：商户ID必需与微信接口配置公众号APPID对应，否则无法使用支付功能！
            </p>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="form-group">
        <label class="col-sm-2 control-label">PartnerKey(商户密钥)</label>
        <div class='col-sm-8'>
            <input type='password' placeholder="请输入32位商户支付密钥（必填）" required title='请输入32位商户支付密钥'
                   pattern="^.{32}$" maxlength="32" name='wechat_partnerkey'
                   value='{:sysconf("wechat_partnerkey")}' class='layui-input'/>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="form-group">
        <label class="col-sm-2 control-label">Cert(双向证书)</label>
        <div class="col-sm-8">
            <input title="application_key.pem" type="hidden" name="wechat_cert_key_md5">
            <input title="application_cert.pem" type="hidden" name="wechat_cert_cert_md5">
            <button data-file="one" data-type="pem" data-field="wechat_cert_key_md5"
                    type="button" class="layui-btn layui-btn-primary">
                {if file_exists(sysconf('wechat_cert_key'))}
                已上传 application_key.pem 文件
                {else/}
                请上传 application_key.pem 文件
                {/if}
            </button>
            <button data-file="one" data-type="pem" data-field="wechat_cert_cert_md5"
                    type="button" class="layui-btn layui-btn-primary">
                {if file_exists(sysconf('wechat_cert_cert'))}
                已上传 application_cert.pem 文件
                {else/}
                请上传 application_cert.pem 文件
                {/if}
            </button>
            <p class="help-block">
                企业打款、企业红包、订单退款等操作需要使用双向证书，可在<a href="https://pay.weixin.qq.com" target="_blank">微信商户平台</a>下载证书！
            </p>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <input type='hidden' name='id' value='10000'/>


    <div class="form-group">
        <div class="col-sm-6 col-sm-offset-2 text-center">
            <button type="submit" class="layui-btn">保存配置</button>
            <button type="button" data-pay-test class="layui-btn layui-btn-primary">支付测试</button>
        </div>
    </div>

</form>
{/block}

{block name="script"}
<script>
    $(function () {

        /*！ 证书上传动作 */
        $('[name="wechat_cert_key_md5"],[name="wechat_cert_cert_md5"]').on('change', function () {
            this.value = $(this).attr('data-md5');
            $('[data-field="' + this.name + '"]').html('已选择 ' + this.title + ' 文件');
        });

        var isShow = false;
        var timer = null;

        /*! 支付测试动作 */
        function payTest() {
            $.form.load('{:url("pay")}?action=payqrc', {}, 'get', function (ret) {
                if (ret.code === 1 || ret.code === 2) {
                    if (ret.code === 2) {
                        ret.url = '__STATIC__/theme/default/img/wechat/qrc_payed.jpg';
                        timer && window.clearInterval(timer), timer = null;
                    }
                    if (isShow) {
                        $('.pay-qrc-test').attr('src', ret.url)
                    } else {
                        layer.open({
                            type: 1, title: false, closeBtn: 1, shadeClose: true,
                            content: '<img class="pay-qrc-test" onerror="this.src=__STATIC__/theme/default/img/wechat/qrc_payed.jpg" src="' + ret.url + '"/>'
                            + '<p style="text-align:center">请用微信扫码测试支付!</p>'
                            + '<p class="refund-qrc-test"><a class="btn btn-xs btn-warning">退款测试</a></p>',
                            end: function () {
                                isShow = false;
                                timer && window.clearInterval(timer), timer = null;
                            },
                            success: function (layero, index) {
                                isShow = true;
                                timer = setInterval(payTest, 1000);
                            }
                        });
                    }
                }
                return false;
            });
        }

        $('[data-pay-test]').on('click', payTest);
    });

</script>
{/block}