{extend name="layout:home" /}
{block name="container"}
<div class="layui-tab layui-tab-card">
    <div class="layui-layer-shade recharge-layui-layer-shade4" id="layui-layer-shade4" times="4" style="display: none;"></div>
    <div style="display: none;" class="layui-layer layui-layer-dialog recharge-layui-layer2" id="layui-layer2" type="dialog" times="2" showtime="0" contype="string">
        <div id="layui-layer-content" class="layui-layer-content"></div>
        <span class="layui-layer-setwin" onclick="hiddenTips()"><a class="layui-layer-ico layui-layer-close layui-layer-close2"
                                            href="javascript:;"></a></span>
        <div class="layui-layer-btn layui-layer-btn-" onclick="hiddenTips()"><a class="layui-layer-btn0">确定</a></div>
        <span class="layui-layer-resize"></span>
    </div>
    <div class="explanation" id="explanation" style="margin: 20px 0 20px 0">
        <div style="font-size: 18px">
            <span style="margin-left: 20px;">余额：</span>
            <span style="margin-left: 40px; color: black;">{$userInfo->userInfo_money}</span>
            <span style="margin-left: 3px;">元</span>
        </div>
    </div>
    <input type="text" style="display: none" name="status" id="status" value="{$status}">
    <ul class="layui-tab-title" style="border-top: 1px solid #ececec;">
        <li id="li-1" onclick="showCurrent('1', '2', '3')">
            <a>支付宝</a>
        </li>
        <li id="li-2" onclick="showCurrent('2', '1', '3')">
            <a>微信</a>
        </li>
        <li id="li-3" onclick="showCurrent('3', '1', '2')">
            <a>银行转账</a>
        </li>
    </ul>
    {if $status == 3}
        {if $bank}
        <div class="layui-tab-content page-tab-content" style="font-size: 18px; display: flex">
            <div style="font-size: 17px; width: 300px">
                <div style="margin-top: 20px; display: flex">
                    <div style="min-width: 100px;">开户名称：</div>
                    <div>{$bank->systemPayment_name}</div>
                </div>
                <div style="margin-top: 20px; display: flex">
                    <div style="min-width: 100px;">开户银行：</div>
                    <div>{$bank->systemPayment_bank}</div>
                </div>
                <div style="margin-top: 20px;flex:1; display: flex">
                    <div style="min-width: 100px;">专属账号：</div>
                    <div>{$bank->systemPayment_account}</div>
                </div>
            </div>
            <div style="margin-left: 80px; margin-right: 30px; border-left: 1px solid #ccc;">
            </div>
            <div style="margin-top: 20px;">
                <span style="">充值成功？请输入您的订单号</span>
                <input id="orderNumber3" type="text" class="layui-input" name="timeRang" placeholder="请输入订单号"
                       style="width: 300px; margin-top: 20px;">
                <div class="layui-inline" style="margin-top: 20px;">
                    <button type="submit" class="layui-btn search-subBtn" onclick="submit(3)">确定</button>
                </div>
            </div>
        </div>
        {else}
        <div class="layui-tab-content page-tab-content" style="font-size: 18px; display: flex; height: 230px; justify-content: center;">
            <div style="margin-top: 50px">
                <span>暂不支持银行转账</span>
            </div>
        </div>
        {/if}
    {elseif $status == 2}
        {if $weixin}
        <div class="layui-tab-content page-tab-content" style="font-size: 18px; display: flex">
            <div>
                <div style="margin-top: 20px;">
                    <img src="{$Think.USER_SITE_ROOT}/images/weixin.png">
                    <span>请用微信扫描下面二维码进行充值</span>
                </div>
                <div style="margin-top: 20px;">
                    <img src="{$Think.UPLOADS_ROOT}/{$zhifubao->systemPayment_img}" style="width: 300px; height: 300px;">
                </div>
            </div>
            <div style="margin-left: 80px; margin-right: 30px; border-left: 1px solid #ccc;">
            </div>
            <div style="margin-top: 20px;">
                <span style="">充值成功？请输入您的订单号</span>
                <input id="orderNumber2" type="text" class="layui-input" name="timeRang" placeholder="请输入订单号"
                       style="width: 300px; margin-top: 20px;">
                <div class="layui-inline" style="margin-top: 20px;">
                    <button type="submit" class="layui-btn search-subBtn" onclick="submit(2)">确定</button>
                </div>
            </div>
        </div>
        {else}
        <div class="layui-tab-content page-tab-content" style="font-size: 18px; display: flex; height: 230px; justify-content: center;">
            <div style="margin-top: 50px">
                <span>暂不支持微信支付</span>
            </div>
        </div>
        {/if}
    {else}
        {if $zhifubao}
        <div class="layui-tab-content page-tab-content" style="font-size: 18px; display: flex">
            <div>
                <div style="margin-top: 20px;">
                    <img src="{$Think.USER_SITE_ROOT}/images/zhifubao.png">
                    <span>请用支付宝扫描下面二维码进行充值</span>
                </div>
                <div style="margin-top: 20px;">
                    <img src="{$Think.UPLOADS_ROOT}/{$zhifubao->systemPayment_img}" style="width: 300px; height: 300px;">
                </div>
            </div>
            <div style="margin-left: 80px; margin-right: 30px; border-left: 1px solid #ccc;">
            </div>
            <div style="margin-top: 20px;">
                <span style="">充值成功？请输入您的订单号</span>
                <input id="orderNumber1" type="text" class="layui-input" name="orderNumber" placeholder="请输入订单号"
                       style="width: 300px; margin-top: 20px;">
                <div class="layui-inline" style="margin-top: 20px;">
                    <button type="submit" class="layui-btn search-subBtn" onclick="submit(1)">确定</button>
                </div>
            </div>
        </div>
        {else}
        <div class="layui-tab-content page-tab-content" style="font-size: 18px; display: flex; height: 230px; justify-content: center;">
            <div style="margin-top: 50px">
                <span>暂不支持支付宝支付</span>
            </div>
        </div>
        {/if}
    {/if}
</div>
<script>
    const myHost = "http://" + window.location.host;
    let current = $("#status").val();
    if (current == 2) {
        $("#li-2").attr("class","layui-this")
    } else if (current == 3) {
        $("#li-3").attr("class","layui-this")
    } else {
        $("#li-1").attr("class","layui-this")
    }
    function showCurrent(id1) {
        window.location.href = myHost + "/User/cost/recharge.html?&status=" + id1;
    }
    function hiddenTips() {
        $("#layui-layer2").attr("style","display: none")
        $("#layui-layer-shade4").attr("style","display: none")
    }
    function submit(type) {
        let url = myHost + "/User/cost/rechargeSubmit.html";
        let orderNumber = $("#orderNumber" + type).val();
        $.ajax({
            type: "post",
            url: url,
            data: {type: type, orderNumber: orderNumber},
            dataType: "json",
            success: function (msg) {
                $("#layui-layer-content").html(msg['msg'])
                $("#layui-layer2").attr("style","display: block")
                $("#layui-layer-shade4").attr("style","display: block")
            },
            error: function () {
                $("#layui-layer-content").html("错误：链接不到服务器")
                $("#layui-layer2").attr("style","display: block")
                $("#layui-layer-shade4").attr("style","display: block")
            }
        });
    }
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#creatTime' //指定元素
        });
        laydate.render({
            elem:'#timeRang',
            range:true,
            format: 'yyyy/MM/dd',
            done: function(value, date){
                /* 时间选择完成后的回调 */
            }
        })
    });
</script>
{/block}