{extend name="base"/}
{block name="resources"}
<style type="text/css">
    .order-details{width: 1200px;margin: 35px auto;}
    .layui-layer-page .layui-layer-content{overflow: auto!important;}
    .order-details .product-info{display: flex;align-items: center;}
    .order-details .product-info .info-img{display: flex;justify-content: center;align-items: center;margin-right: 10px;width: 65px;height: 65px;}
    .order-details .product-info .info-img img{max-width: 100%;max-height: 100%;}
    .order-details .product-info span{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    .order-details .order-info{display: flex;}
    .order-details .order-info > span{margin-right: 40px; color:#666;}
    .order-details .order-operation{display: flex;align-items: flex-end;flex-direction: column;margin-top: 50px;padding: 15px 30px;line-height: 1.8;background-color: #f7f7f7;}
    .order-details .order-operation span span{display: inline-block;width: 120px;text-align: right;}
    .order-details .order-operation span:nth-of-type(2){font-weight: bold;}
    .order-details .order-operation span:nth-of-type(2) span{font-weight: 400;font-size: 20px;}
    .order-details .order-operation button{margin-top: 8px;}
    .wechat{display: flex;flex-direction: column;align-items: center;}
    .wechat .wechat-img{display: flex;justify-content: space-between;align-items: center;width: 125px;height: 125px;border: 1px solid #e5e5e5;}
    .wechat .wechat-img img{max-height: 100%;max-width: 100%;}
    .wechat .wechat-desc{height: 20px;line-height: 20px;margin-top: 11px;color: #646566;}
    .wechat .wechat-btns{display: flex;justify-content: center;margin-top: 20px;}
    .wechat .wechat-btns span{margin: 0 6px;width: 106px;height: 35px;line-height: 35px;text-align: center;border: 1px solid #e5e5e5;cursor: pointer;color: #333;}
    .pay-finish{color: #fff;}
</style>
{/block}
{block name="main"}
<div class="order-details">
    <div class="order-info">
        <span>订购单号：{$detail.out_trade_no}</span>
        <span>创建时间：<span class="time"></span></span>
        <span>订单类型：{$detail.order_type_name}</span>
    </div>
    <table class="layui-table">
        <colgroup>
            <col width="300">
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <!-- 套餐 -->
        {if $detail.group_id > 0 &&  $detail.group_num > 0}
        <thead>
        <tr>
            <th>套餐信息</th>
            <th>单价</th>
            <th>时长</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <div class="product-info">
                    <div class="info-img">
                        <img src="{:img($detail.group_image)}" onerror=src="SHOP_IMG/shop.png" alt="">
                    </div>
                    <span>{$detail.group_name}</span>
                </div>
            </td>
            <td>{$detail.group_period_price}</td>
            <td>{$detail.group_num}{if $detail.group_period_unit == 'week'} 周 {elseif $detail.group_period_unit == 'month'} 月 {elseif $detail.group_period_unit == 'year'} 年 {/if}</td>
            <td>{$detail.order_money}</td>
        </tr>
        </tbody>
        {/if}
        <!-- 短信 -->
        {if $detail.sms_package_id > 0 &&  $detail.sms_num > 0}
        <thead>
        <tr>
            <th>短信信息</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <div class="product-info">
                    <div class="info-img">
                        <img src="{:img($detail.sms_package_image)}" onerror=src="SHOP_IMG/sms.png" alt="">
                    </div>
                    <span>{$detail.sms_package_name}</span>
                </div>
            </td>
            <td>{$detail.sms_package_price}</td>
            <td>{$detail.sms_package_num}</td>
            <td>{$detail.sms_money}</td>
        </tr>
        {/if}
        </tbody>
    </table>
    <div class="order-operation">
        <span>合计：<span class="price">￥{$detail.order_money}</span></span>
        <span>应付款：<span class="price red-color">￥{$detail.order_money}</span></span>
        <button class="layui-btn bg-color buy-immediately">立即支付</button>
    </div>
</div>

{/block}
{block name="script"}
<script type="text/html" id="payment">
    <div class="layui-form">
        <input type="hidden" name="out_trade_no" value="{$detail.out_trade_no}">
        <div class="layui-form-item">
            <label class="layui-form-label mid">套餐名称：</label>
            <div class="layui-input-inline">
                {$detail.order_name}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label mid">支付金额：</label>
            <div class="layui-input-inline">
                {$detail.order_money}
            </div>
        </div>
        <input type="hidden" name="pay_model" value="2"/>
        <div class="layui-form-item mode-payment">
            <label class="layui-form-label mid">支付方式：</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    支付宝支付
                </div>
            </div>
        </div>
        <!-- 表单操作 -->
        <div class="form-row mid">
            <button class="layui-btn bg-color" lay-submit lay-filter="submit">提交</button>
            <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
        </div>
    </div>
</script>

<script type="text/html" id="payQrcode">
    <div class="wechat">
        <div class="wechat-img">
            <img src="{{d.img}}" alt="">
        </div>
        <span class="wechat-desc">使用{{d.name}}扫码支付</span>
        <div class="wechat-btns">
            <span class="pay-finish border-color bg-color">支付完成</span>
            <span class="pay-payagain">重新支付</span>
        </div>
    </div>
</script>
<script>
    var form,laytpl,createTime = "{$detail.create_time}",
        paymentMethodIndex,alipayIndex,wethatIndex,paymentIndex = 1,
        repeat_flag = false;
    $(".order-info .time").text(ns.time_to_date(createTime));

    /* 立即购买 */
    layui.use(['form', 'laytpl'], function() {
        form = layui.form;
        laytpl = layui.laytpl;
        var upload;
        $("body").on("click",".buy-immediately",function(){
            modePayment();
        });
        function modePayment(){
            laytpl($("#payment").html()).render({}, function(html) {
                paymentMethodIndex = layer.open({
                    type: 1,
                    title: '选择付款方式',
                    area: ['750px','650px'],
                    content: html,
                    success(){
                        if (!parseInt("{$pay_type_count}")){
                            paymentIndex = 2;
                            $(".offline-payment [lay-verify]").attr("lay-verify","required");
                        }
                    }
                });
            });
            form.render();
            form.on('radio(type_payment)', function(data){
                paymentIndex = data.value;
                //1 是线上支付 2是线下支付
                if (data.value == 1){
                    $(".mode-payment").removeClass("layui-hide");
                    $(".offline-payment").addClass("layui-hide");
                    $(".offline-payment [lay-verify]").attr("lay-verify","");
                }else{
                    $(".mode-payment").addClass("layui-hide");
                    $(".offline-payment").removeClass("layui-hide");
                    $(".offline-payment [lay-verify]").attr("lay-verify","required");
                }
            });
            //上传支付凭证
            upload = new Upload({
                elem: '#voucher',
                post:"home"
            });
        }
        form.on('submit(submit)', function(data){
            if (repeat_flag) return false;
            repeat_flag = true;
            if (paymentIndex == 1){
                $.ajax({
                    type: 'POST',
                    url: ns.url("shop/SiteOrder/pay"),
                    data: {out_trade_no: "{$detail.out_trade_no}", pay_type:'alipay'},
                    dataType: 'JSON',
                    success: function(res) {
                        repeat_flag = false;
                        if (res.code == 0) {
                            payQrcode(res.data.data.qrcode,'支付宝')
                        } else {
                            layer.msg(res.message);
                            location.reload();
                        }
                    }
                });
            }
        });
        /* 微信支付 */
        function payQrcode(imgUrl,name){
            layer.close(paymentMethodIndex);
            laytpl($("#payQrcode").html()).render({img: imgUrl,name}, function(html) {
                wethatIndex = layer.open({
                    type: 1,
                    title: name+'支付',
                    area: ['550px', '300px'],
                    content: html,
                });
            });
        }
        //重新支付
        $("body").on("click",".pay-payagain",function(){
            layer.close(wethatIndex);
            modePayment();
        });
        //支付完成
        $("body").on("click",".pay-finish",function(){
            $.ajax({
                type: 'POST',
                url: ns.url("shop/SiteOrder/verifyIsPay"),
                data: {out_trade_no: "{$detail.out_trade_no}"},
                dataType: 'JSON',
                success: function(res) {
                    if (res.code >= 0){
                        layer.close(wethatIndex);
                        location.href= ns.url("shop/account/order");
                    } else{
                        layer.msg(res.message);
                    }
                }
            });
        });
    });
    function back() {
        layer.closeAll();
    }
</script>
{/block}