{extend name="account/base"/}
{block name="resources"}
<style>
    .product-info{
        display: flex;
        flex-direction: column;
    }
    .product-info span{
        line-height: 1.5;
    }
</style>
{/block}
{block name="main"}
<!-- 列表 -->
<table id="order_list" lay-filter="order_list"></table>

<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">
            <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="upload-default">
                            <img src="HOME_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 img-upload-lable"><span class="required">*</span>付款凭证：</label>
            <div class="layui-input-block img-upload">
                <div class="upload-img-block">
                    <div class="upload-img-box">
                        <div class="upload-default" id="voucher">
                            <div class="upload">
                                <img src="SHOP_IMG/upload_img.png" />
                                <p>点击上传</p>
                            </div>
                        </div>
                        <input type="hidden" class="layui-input" name="paying_money_certificate" />
                        <i class="del">x</i>
                    </div>
                </div>
            </div>
        </div>

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

        <!-- 表单操作 -->
        <div class="form-row">
            <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="operation">
    <div class="table-btn">
        <a class="layui-btn" lay-event="detail">查看详情</a>
        {{# if(d.order_status == 3){ }}
        <a class="layui-btn" lay-event="edit">支付</a>
        {{# } }}

        {{# if(d.order_status != 1 && d.order_status != -1){ }}
        <a class="layui-btn" lay-event="close">关闭订单</a>
        {{# } }}
		
		{{# if(d.order_status == -1){ }}
		<a class="layui-btn" lay-event="del">删除</a>
		{{# } }}
    </div>
</script>

<script type="text/html" id="product_info">
    <div class="product-info">
        <span>套餐名称：{{d.order_name}}</span>
        <span>套餐类型：{{d.order_type_name}}</span>
    </div>
</script>

{/block}

{block name="script"}
<script>
    layui.use(['form', 'laytpl'], function() {
        var table,
            form = layui.form,
            laytpl = layui.laytpl,
			repeat_flag = false;
        
        form.render();
        var upload;

        table = new Table({
            elem: '#order_list',
            url: ns.url("shop/account/order"),
            cols: [
                [{
                    field: 'order_no',
                    title: '订单号',
                    width: '17%',
                    unresize: 'false'
                }, {
                    title: '产品信息',
                    width: '23%',
                    unresize: 'false',
                    templet: "#product_info"
                },{
                    field: 'order_status_name',
                    title: '状态',
                    width: '13%',
                    unresize: 'false'
                },{
                    field: 'order_money',
                    title: '价格',
                    width: '9%',
                    unresize: 'false'
                },
                {
                    field: 'create_time',
                    title: '创建时间',
                    width: '18%',
                    unresize: 'false',
                    templet: function(data) {
                        return ns.time_to_date(data.create_time);
                    }
                },
                {
                    title: '操作',
                    width: '20%',
                    toolbar: '#operation',
                    unresize: 'false'
                }]
            ]
        });

        /**
         * 搜索功能
         */
        form.on('submit(search)', function(data) {
            table.reload({
                page: {
                    curr: 1
                },
                where: data.field
            });
            return false;
        });

        /**
         * 监听工具栏操作
         */
        table.tool(function(obj) {
            var data = obj.data,
                event = obj.event;
            switch (event) {
                case 'close':
                    $.ajax({
                        type : "post",
                        dataType: 'JSON',
                        url: ns.url("shop/SiteOrder/close"),
                        data : { "order_id" : data.order_id },
                        success : function(res) {
                            layer.msg(res.message,{anim: 0},function () {
                                layer.closeAll();
                                window.location.reload();
                            });
                        }
                    });
                    break;
                case 'edit'://修改域名
                    laytpl($("#payment").html()).render(data, function(html) {
                        layer.open({
                            type: 1,
                            title: '支付',
                            area: ['700px', '400px'],
                            content: html
                            , yes: function (index, layero) {
                                layer.close(index);
                            }
                        });
                        //上传支付凭证
                        upload = new Upload({
                            elem: '#voucher',
                            post:"home"
                        });
                    });
                    break;
                case 'detail':
                    location.href = ns.url("shop/account/orderdetail",{order_id: data.order_id});
                    break;
				case 'del': // 删除
				    delOrder(data.order_id);
				    break;
            }
        });

        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();
						table.reload();
					}
                }
            });
        });
		function delOrder(id) {
			if (repeat_flag) return false;
			repeat_flag = true;
			layer.confirm('确定要删除该订单吗?', function() {
				$.ajax({
					type: 'POST',
					dataType: 'JSON',
					url: ns.url("shop/SiteOrder/delete"),
					data: {order_id: id},
					success: function(res) {
						layer.msg(res.message);
						repeat_flag = false;
						if (res.code == 0) {
							table.reload();
						}
					}
				});
			}, function () {
				layer.close();
				repeat_flag = false;
			});
		}
    });
</script>
{/block}