
<div class="layui-fluid">

    <style>
        #paymentcategoryTreeBar{padding:10px 15px;border:1px solid #e6e6e6;background-color:#f2f2f2}
        #paymentcategoryTree{border:1px solid #e6e6e6;border-top:none;padding:10px 5px;overflow:auto;height:-webkit-calc(100vh - 290px);height:-moz-calc(100vh - 290px);height:calc(100vh - 290px)}
        .layui-tree-entry .layui-tree-txt{padding:0 5px;border:1px transparent solid;text-decoration:none!important}
        .layui-tree-entry.organ-tree-click .layui-tree-txt{background-color:#fff3e0;border:1px #ffe6b0 solid}
        .files_itemwpayment{width:30px;height:30px;line-height:30px;cursor:pointer;padding:1px;background:#fff;display:-webkit-box;-moz-box-align:center;-webkit-box-align:center;-moz-box-pack:center;-webkit-box-pack:center;}
        .files_itemwpayment img{max-width:28px;max-height:28px;border:0}
    </style>

            <div class="layui-card">
                <div class="layui-card-header">
                    <form class="layui-form render">
                        <input type="hidden" name="groupid" id="payment-groupid" value=""/>
                        <div class="layui-form-item">

                            <div class="layui-inline" style="width:250px;"><input type="text" name="kw" placeholder="支付单号" autocomplete="off" class="layui-input" lay-affix="clear"/></div>
                            <div class="layui-inline" style="width:250px;"><input type="text" name="user" placeholder="用户名，用户手机" autocomplete="off" class="layui-input" lay-affix="clear"/></div>
                            <div class="layui-inline" style="width:150px;">
                                <select name="pay_status">
                                    <option value="-1">支付状态</option>
                                    <option value="0">未支付</option>
                                    <option value="1">已支付</option>
                                    <option value="2">支付失败</option>
                                </select>
                            </div>

                            <div class="layui-inline">
                                <div class="layui-btn-group">
                                    <button  class="layui-btn" lay-submit lay-filter="search-payment"><i class="layui-icon layui-icon-search"></i> 搜索</button>
                                    <button  class="layui-btn" lay-submit lay-filter="excel-payment"><i class="layui-icon layui-icon-download-circle"></i> 导出</button>
                                    <a class="layui-btn" lay-submit lay-filter="search-payment-all" onclick="$('#payment-groupid').val('')"><i class="layui-icon layui-icon-light"></i>全部</a>


                                </div>
                            </div>
                        </div>
                    </form>
                </div>


                    <div class="layui-card-body">
                    <table lay-filter="payment" id="payment"></table>
                    </div>

            </div>
</div>


<script type="text/html" id="paystatus-demo">
    {{# if (d.pay_status === 1) { }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" >{{=d.pay_status_text}}</a>
    {{# } else { }}
    {{# if(d.pay_status === 2) { }}
    <a class="layui-btn layui-btn-xs layui-btn-danger">{{=d.pay_status_text}}</a>
    {{# } else { }}
    <a class="layui-btn layui-btn-xs">{{=d.pay_status_text}}</a>
    {{# } }}
    {{# } }}
</script>
<!--JS部分-->
<script>

    layui.use(['vinfo', 'buildItems','dropdown'], function(){
        var map_root = layui.cache.maps;
        var app_root = map_root + 'order.payment/';
        var layer = layui.layer,table=layui.table,form=layui.form,admin=layui.admin;


        /*渲染数据*/
        table.render({
            elem: '#payment',
            page: true,
            limit:{$limit},

            url: app_root+"index?&do=json",
            // css: 'td .layui-table-cell{height:80px;line-height:80px;padding:0 5px;}',
            cols: [[
                {type:'checkbox',fixed:'left'},
                {field:'id',width:50,unresize:true,align:'center',title:'ID',sort:!0},
                {field:'order_no',align:'center',width:200,title:'支付单号'},
                {field:'username',align:'center',width:150,title:'用户名',templet:'<div>{{= d.getuserdata.username}}</div>'},
                {field:'mobile',align:'center',width:120,title:'用户手机',templet:'<div>{{= d.getuserdata.mobile}}</div>'},
                {field:'order_name',align:'center',title:'支付详细'},
                {field:'pay_amount',align:'center',width:100,title:'支付金额'},
                {field:"pay_status_text",width:100,align:'center',title:"支付状态",templet:'#paystatus-demo'},
                {field:'pay_method_text',align:'center',width:100,title:'支付类型'},
                {field:'pay_time_text',align:'center',width:150,title:'支付时间'},
                {field:'createtime',width:150,align:'center',title:'时间'},
            ]],
            done: function(){ admin.vShow($('[lay-table-id="payment"]'));

            }
        });

        // 状态 - 开关操作
        form.on('switch(is_sell-chang)', function(obj){
            var json = JSON.parse(decodeURIComponent($(this).data('json')));
            var av = obj.elem.checked ? 1 : 0;
            admin.req(app_root+"editup",{id:json.id,av:av,af:obj.elem.name},function(res){
                layer.tips(res.msg,obj.othis,{time:1000});
                if(res.code === 0) obj.elem.checked = parseInt(obj.value);
            },'post',{headersToken:true});
        });


        form.on('submit(excel-payment)', function(data){
            var checkStatus = table.checkStatus('payment');
            var checkRows = checkStatus.data;
            var ids = checkRows.map(function(d){return d.id;});
            var field = data.field; // 获得表单字段
            field.ids = ids;
            layer.load();
            $.ajax({
                method: "post",
                url: app_root+'/excelpayment',
                data: field,
                dataType: "json",
                success: function (res){
                    layer.closeAll();
                    if(res.code===1) {
                        window.location.href = res.data.url;
                    }else{
                        layer.msg(res.msg,{icon:2,shade:[0.4,'#000'],time:1500},function (){

                        });
                    }


                }
            });
            return false; // 阻止默认 form 跳转
        });

        /*快编监听*/
        table.on('edit(payment)',function(obj){
            admin.req(app_root+"editup",{id:obj.data.id,av:obj.value,af:obj.field},function(res){
                layer.msg(res.msg,{shade:[0.4,'#000'],time:500});
            },'post',{headersToken:true});
        });/**/

        /*工具条监听*/
        table.on('tool(payment)', function(obj){
            var data = obj.data;
            var id = data.id;
            if(obj.event === 'detail'){
                paymentOpen(data.id);
            }else if(obj.event === 'del'){
                del(id);
            }else if(obj.event === 'payment-event-image'){
                var src = $(this).attr('src'), alt = $(this).attr('alt');
                layer.photos({photos:{data:[{alt:alt,src:src}],start:'0'},anim:5,shade:[0.4,'#000']});
            }else if(obj.event === 'more'){

            }
        });/**/


        /*删除*/
        function del(ids){
            layer.confirm('确定要删除所选记录吗？', function(){
                admin.req(app_root+"del",{id:ids},function(res){
                    layer.msg(res.msg,{shade:[0.4,'#000'],time:1500},function(){
                        if(res.code==1) table.reloadData('payment');
                    });
                },'post',{headersToken:true});
            });
        }/**/
        /*顶部删除按钮*/
        $('#payment-del').on('click', function(){
            var checkRows = table.checkStatus('payment').data;

            if(checkRows.length === 0){return layer.msg('请选择需删除的记录');}
            var ids = checkRows.map(function(d){return d.id;});
                console.log(ids);
            del(ids);
        });/**/




    });
</script>