
<div class="layui-fluid">

    <style>
        #certcategoryTreeBar{padding:10px 15px;border:1px solid #e6e6e6;background-color:#f2f2f2}
        #certcategoryTree{border:1px solid #e6e6e6;border-top:none;padding:10px 5px;overflow:auto;height:-webkit-calc(100vh - 205px);height:-moz-calc(100vh - 205px);height:calc(100vh - 205px)}
        .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_itemwcert{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_itemwcert img{max-width:28px;max-height:28px;border:0}
    </style>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body" style="padding:10px;">
                    <!-- 树工具栏 -->

                    <!-- 左树 -->
                    <div id="certcategoryTree"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-header">
                    <form class="layui-form render">
                        <input type="hidden" name="groupid" id="cert-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">
                                <div class="layui-btn-group">
                                    <button  class="layui-btn" lay-submit lay-filter="search-cert"><i class="layui-icon layui-icon-search"></i> 搜索</button>
                                    <a class="layui-btn" lay-submit lay-filter="search-cert-all" onclick="$('#cert-groupid').val('')"><i class="layui-icon layui-icon-light"></i>全部</a>
                                    <a class="layui-btn" id="cert-add" ><i class="layui-icon layui-icon-add-circle"></i> 添加</a>
                                    <a class="layui-btn" id="cert-del"><i class="layui-icon layui-icon-delete"></i> 删除</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

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

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

<script type="text/html" id="certDemo">
    <div class="layui-clear-space">

        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>

    </div>
</script>

<script type="text/html" id="status-demo">
    {{# if (d.status === 3) { }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" >{{=d.status_text}}</a>
    {{# } else { }}
        {{# if(d.status === 2) { }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="statuserror">{{=d.status_text}}</a>
        {{# } else { }}
        <a class="layui-btn layui-btn-xs">{{=d.status_text}}</a>
    {{# } }}
    {{# } }}
</script>
<!--JS部分-->
<script>

    layui.use(['vinfo', 'buildItems','dropdown'], function(){
        var map_root = layui.cache.maps;
        var app_root = map_root + 'cert.cert/';
        var layer = layui.layer,table=layui.table,form=layui.form,admin=layui.admin;
        var dropdown = layui.dropdown;
        organData = admin.util.toTree({$category|raw});

        doTree(organData,'');

        function doTree(data,load){
            layui.tree.render({
                id: 'organTree',
                elem: '#certcategoryTree',
                data: data,
                onlyIconControl: true,
                click: function(obj){
                    $('#certcategoryTree').find('.organ-tree-click').removeClass('organ-tree-click');
                    $(obj.elem).children('.layui-tree-entry').addClass('organ-tree-click');
                    organObj = obj.data;
                    $('#cert-groupid').val(obj.data.id);
                    table.reloadData('cert',{where:{cate_id:obj.data.id},page:{curr:1}});

                }
            });
            // var item = $('#certcategoryTree .layui-tree-entry:first');
            // load ? item.find('.layui-tree-main>.layui-tree-txt').trigger('click') : item.addClass('organ-tree-click');
        }
        /*初始渲染*/

        /*==============左树结构END==============*/

        /*渲染数据*/
        table.render({
            elem: '#cert',
            page: true,
            limit:{$limit},
            height: 'full-258',
            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:'thumb',width:80,height:80,align:'center',title:'图片',templet:'<div class="files_itemwcert"><img src="{{d.thumbpath}}" lay-event="cert-event-image" /></div>'},
                {field:'title',width:300,align:'center',title:'证书标题'},
                {field:'cate_name',width:120,align:'center',title:'类别',templet:'<div>{{= d.certcatedata.title}}</div>'},
                {field:'price',width:120,align:'center',title:'价格'},
                {field:"sj",width:200,align:'center',title:"报名时间",templet:'<div>{{d.starttimetxt}} - {{= d.endtimetxt}}</div>'},
                {field:"is_sell",width:80,align:'center',title:"是否上架",templet:function(d){return '<input type="checkbox" name="is_sell" lay-skin="switch" lay-text="是|否" lay-filter="is_sell-chang" value="'+d.is_sell+'" data-json="'+encodeURIComponent(JSON.stringify(d))+'"'+(d.is_sell==1 ? ' checked' : '')+'>';},unresize:true,},
                {field:'createtime',width:120,align:'center',title:'发布时间'},
                {field:'fzjg',width:100,align:'center',title:'发证机构'},

                {fixed:'right',width:150,align:'center', templet: '#certDemo',title:'操作'}
            ]],
            done: function(){ admin.vShow($('[lay-table-id="cert"]'));

            }
        });

        // 状态 - 开关操作
        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});
        });

        /*快编监听*/
        table.on('edit(cert)',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(cert)', function(obj){
            var data = obj.data;
            var id = data.id;
            if(obj.event === 'edit'){
                certOpen(data.id);
            }else if(obj.event === 'del'){
                del(id);
            }else if(obj.event === 'cert-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('cert');
                    });
                },'post',{headersToken:true});
            });
        }/**/
        /*顶部删除按钮*/
        $('#cert-del').on('click', function(){
            var checkRows = table.checkStatus('cert').data;

            if(checkRows.length === 0){return layer.msg('请选择需删除的记录');}
            var ids = checkRows.map(function(d){return d.id;});
                console.log(ids);
            del(ids);
        });/**/
        $('#cert-add').on('click',function(){certOpen();});/**/
        /*弹出窗*/
        function certOpen(id='',type=''){
            var title = "添加证书";
            if(id > 0){
                title = '编辑证书';
            }
            layer.open({
                type: 2,
                area: ['70%', '90%'],
                title: title,
                btn: ['确定', '关闭'],
                content: app_root+'/edit?id='+id+'&type='+type,
                yes: function(index, layero){
                    var data = window["layui-layer-iframe" + index].callbackdata();
                    $.ajax({
                        method: "post",
                        url: app_root+'/edit',
                        data: data,
                        dataType: "json",
                        success: function (res){
                            if(res.code===1) {
                                layer.msg(res.msg,{icon:1,shade:[0.4,'#000'],time:1500},function (){
                                    layer.close(index);
                                    table.reloadData('cert');
                                });
                            }else{
                                layer.msg(res.msg,{icon:2,shade:[0.4,'#000'],time:1500},function (){

                                });
                            }
                            // layer.closeAll();

                        }
                    });
                },
            });
        }/**/
    });
</script>