{extend name="account/base"/}
{block name="resources"}
<link rel="stylesheet" href="HOME_CSS/order_detail.css"/>
{/block}
{block name="main"}
<div class="block-content">

    <div style="padding: 1px;" class="order-detail">
        <!--<div class="layui-row order-step">-->
            <!--<div class="layui-col-md4 order-step-1 order-step-active">-->
                <!--<div class="order-step-title ns-text-color">买家下单</div>-->
                <!--<div class="order-step-num ns-bg-color"><i class="layui-icon layui-icon-ok" style=" color: #FFFFFF;"></i></div>-->
            <!--</div>-->

            <!--<div class="layui-col-md3 order-step-2  order-step-active">-->
                <!--<div class="order-step-title">买家付款</div>-->
                <!--<div class="order-step-num"></div>-->
                <!--<div class="order-step-meta"></div>-->
            <!--</div>-->
            <!--<div class="layui-col-md3 order-step-4 ">-->
                <!--<div class="order-step-title">交易完成</div>-->
                <!--<div class="order-step-num"></div>-->
                <!--<div class="order-step-meta"></div>-->
            <!--</div>-->
            <!--<div style="clear: both"></div>-->
        <!--</div>-->

        <div class="layui-row layui-col-space1 order-detail-info" >
            <div class="layui-col-md4 order-detail-left" >
                <div class="layui-card">
                    <div class="layui-card-header">订单信息</div>
                    <div class="layui-card-body">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">订单编号：</label>
                                <div class="layui-input-block">
                                    <div class="layui-inline">
                                        <div class="layui-form-mid layui-word-aux">{$detail.out_trade_no}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">订单类型：</label>
                                <div class="layui-input-block">
                                    <div class="layui-inline">
                                        <div class="layui-form-mid layui-word-aux">{$detail.order_type_name}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">付款方式：</label>
                                <div class="layui-input-block">
                                    <div class="layui-inline">
                                        <div class="layui-form-mid layui-word-aux">{$detail.pay_type_name}</div>
                                    </div>
                                </div>
                            </div>
							<div class="layui-form-item">
							    <label class="layui-form-label">订单流水：</label>
							    <div class="layui-input-block">
							        <div class="layui-inline">
							            <div class="layui-form-mid layui-word-aux">{$detail.out_trade_no}</div>
							        </div>
							    </div>
							</div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">付款时间：</label>
                                <div class="layui-input-block">
                                    <div class="layui-inline">
                                        <div class="layui-form-mid layui-word-aux">{:time_to_date($detail.create_time)}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item order-detail-hr"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 order-detail-operation">
                <div class="layui-card">
                    <div class="layui-card-header">订单状态：{$detail.order_status_name}</div>
                    <div class="layui-card-body">
                        <i class="layui-icon ns-red-color layui-icon-about"></i>
                        {if $detail.order_status != -1 && $detail.order_status != 1}
                        <button  class="layui-btn ns-bg-color close-order">关闭</button>
                        {/if}
                        {if $detail.order_status == 0}
                        <a href="javascript:;" class="layui-btn ns-bg-color payment-order">支付</a>
                        {/if}
                        {if $detail.order_status == 3}
                        <a href="javascript:;" class="layui-btn ns-bg-color re-examination">编辑</a>
                        {/if}
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div style="height:50px;"></div>

    <div class="order-detail-table">
        <table class="layui-table">
            <colgroup>
                <col width="300">
                <col>
                <col>
                <col>
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>产品信息</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
            </thead>
            <tbody>
            <!-- 套餐 -->
            {if $detail.group_id > 0 &&  $detail.group_num > 0}
            <tr>
                <td>
                    <div class="ns-table-title">
                        <div class="ns-title-pic">
                            <img src="{:img($detail.group_image)}" alt="">
                        </div>
                        <span class="ns-title-content">{$detail.group_name}</span>
                    </div>
                </td>
                <td>{$detail.group_period_price}</td>
                <td>{$detail.group_num}</td>
                <td>{$detail.group_money}</td>
            </tr>
            {/if}

            <!-- 短信 -->
            {if $detail.sms_package_id > 0 &&  $detail.sms_num > 0}
            <tr>
                <td>
                    <div class="ns-table-title">
                        <div class="ns-title-pic">
                            <img src="{:img($detail.sms_package_image)}" alt="">
                        </div>
                        <span class="ns-title-content">{$detail.sms_package_name}</span>
                    </div>
                </td>
                <td>{$detail.sms_package_price}</td>
                <td>{$detail.sms_num}</td>
                <td>{$detail.sms_money}</td>
            </tr>
            {/if}
            </tbody>
        </table>

        <div class="layui-row order-detail-total">
            <div class="layui-col-md12">
                <span>总计：{$detail.order_money}</span>
            </div>
        </div>
    </div>
</div>

{/block}
{block name="script"}
<script type="text/html" id="payment">
    <div class="layui-form">
        <input type="hidden" name="out_trade_no" value={{d.out_trade_no}}>


        <div class="layui-form-item offline-payment">
            <label class="layui-form-label img-upload-lable mid"><span class="required">*</span>付款凭证：</label>
            <div class="layui-input-inline img-upload">
                <div class="upload-img-block icon">
                    <div class="upload-img-box">
                        <div class="ns-upload-default" id="voucher">
                            <div class="upload">
                                <img src="SHOP_IMG/upload_img.png" />
                                <p>点击上传</p>
                            </div>
                        </div>
                        <div class="operation"  >
                            <div >
                                <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                                <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                            </div>
                            <div class="replace_img js-replace">点击替换</div>
                        </div>
                        <input type="hidden" name="paying_money_certificate" lay-verify=""/>
                    </div>
                </div>
            </div>
        </div>


        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label img-upload-lable"><span class="required">*</span>付款凭证：</label>-->
            <!--<div class="layui-input-inline img-upload">-->
                <!--<div class="upload-img-block icon">-->
                    <!--<div class="upload-img-box" id="voucher">-->
                        <!--<div class="ns-upload-default">-->
                            <!--<img src="SHOP_IMG/upload_img.png" />-->
                            <!--<p>点击上传</p>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<input type="hidden" name="paying_money_certificate"/>-->
                    <!--<i class="del">x</i>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->

        <div class="layui-form-item">
            <label class="layui-form-label mid"><span class="required">*</span>付款凭证说明：</label>
            <div class="layui-input-inline">
                <textarea name="paying_money_certificate_explain" class="layui-textarea ns-len-mid" lay-verify="required" placeholder="请输入付款凭证说明"></textarea>
            </div>
        </div>

        <!-- 表单操作 -->
        <div class="ns-form-row">
            <button class="layui-btn ns-bg-color" lay-submit lay-filter="submit">提交</button>
            <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
        </div>
    </div>
</script>

<script>
    var out_trade_no = "{$detail.out_trade_no}";
    var order_id = "{$detail.order_id}";

    /* 关闭订单 */
    $("body").on("click",".close-order",function () {
        $.ajax({
            type : "post",
            dataType: 'JSON',
            url: ns.url("shop/Siteorder/close"),
            data : { "order_id" : order_id },
            success : function(res) {
                repeat_flag = false;
                layer.msg(res.message,{anim: 0},function () {
                    layer.closeAll();
                    window.location.reload();
                });
            }
        });


    });

    /* 支付 */
    $("body").on("click",".payment-order",function () {
        location.href = ns.url("home/ordercreate/confirm",{out_trade_no:out_trade_no});
    });

    layui.use(['form','laytpl'],function () {
        var form = layui.form;
        var laytpl = layui.laytpl;
        var upload;

        /* 编辑 */
        $("body").on("click",".re-examination",function () {
            data = {out_trade_no:out_trade_no};
            laytpl($("#payment").html()).render(data, function(html) {
                layer.open({
                    type: 1,
                    title: '编辑',
                    area: ['700px', '400px'],
                    content: html,
                    success: function (layero, index){
                        //上传支付凭证
                        upload = new Upload({
                            elem: '#voucher',
                            post: "home"
                        });
                    },
                    yes: function (index, layero) {
                        layer.close(index);
                    }
                });
            });
        });

        form.on('submit(submit)', function(data){
            // 删除图片
            if(!data.field.paying_money_certificate) upload.delete();
            if (repeat_flag) return false;
            repeat_flag = true;
            $.ajax({
                type: 'POST',
                url: ns.url("shop/Siteorder/confirm"),
                data: data.field,
                dataType: 'JSON',
                success: function(res) {
                    repeat_flag = false;
                    layer.msg(res.message);
                    if (res.code == 0) {
                        layer.closeAll();
                        location.reload();
                    }
                }
            });
        });
    })
</script>
{/block}