{include file="public/head"}
<div class="layui-fluid layui-rg-bg">
    <div class="layui-card">
        <div class="layui-card-header">
            <div class="layui-inline">
                <div class="layui-input-inline"><button class="layui-btn layui-btn-primary layui-btn-sm layui-btn-disabled countnum"></button></div>
                <div class="layui-input-inline"><button class="layui-btn layui-btn-sm setmodel layui-btn-disabled" disabled>设置模型</button></div>
                <div class="layui-input-inline"><button class="layui-btn layui-btn-sm" onclick="openlayer('{:url("diyfields/index")}?tablename=navlist&cid={:session('siteid')}','栏目字段扩展','l')">字段扩展</button></div>
            </div>
            <div class="layui-inline" style="float:right;">
                <div class="layui-input-inline"><a class="layui-btn layui-btn-primary layui-btn-sm refresh"><i class="layui-icon layui-icon-refresh-3"></i></a></div>
                <div class="layui-input-inline"><a class="layui-btn layui-btn-sm" onclick="openlayer('{:url("add")}','{:lang("add")}栏目','md')">{:lang("add")}栏目</a></div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="data_table" class="layui-table" lay-filter="data_table"></table>
            {:pagedebug()}
        </div>
    </div>
</div>
{include file="public/foot"}
<script type="text/html" id="action">
    <div class="layui-input-inline"><a class="layui-btn layui-btn-xs" lay-event="edit"><i class='layui-icon layui-icon-edit'></i>{:lang("edit")}</a></div>
    {{# if(!d.haschild){ }}
    <div class="layui-input-inline"><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class='layui-icon layui-icon-delete'></i>{:lang("del")}</a></div>
    {{# } else { }}
    <div class="layui-input-inline"><a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-disabled"><i class='layui-icon layui-icon-delete'></i>{:lang("del")}</a></div>
    {{# } }}
    <div class="layui-input-inline"><a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="view"><i class='layui-icon layui-icon-release'></i>预览</a></div>
</script>
<script type="text/html" id="status">
    <input type="checkbox" name="status" lay-skin="primary" value="{{d.id}}" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="G0">
    <input type="checkbox" name="G0" lay-skin="primary" value="{{d.id}}" lay-filter="status" {{ d.G0 == 1 ? 'checked' : '' }}>
</script>
{foreach :app\common\model\Navgroup::select() as $v}
<script type="text/html" id="{$v.name}">
    <input type="checkbox" name="{$v.name}" lay-skin="primary" value="{{d.id}}" lay-filter="status" {{ d.{$v.name} == 1 ? 'checked' : '' }}>
</script>
{/foreach}
<script type="text/html" id="addnav">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addnav"><i class='layui-icon layui-icon-add-1' style="margin-right:0px;"></i></a>
</script>
<script>
    layui.use(['table', 'treetable', 'form', 'element'], function () {
        var $ = layui.jquery;
        var table = layui.table, form = layui.form;
        var treetable = layui.treetable;
        // 渲染表格
        loading = layer.load(1, {shade: [0.1, '#fff']});
        treetable.render({
            treeColIndex: 3,  //树形图标显示在第几列
            treeSpid: 0,  //最上级的父级id
            treeIdName: 'id',
            treePidName: 'pid',
            treeIcon: 'icon',  //新增icon图标,不用为false
            treeDefaultClose: false,
            treeLinkage: false,  //父级展开时是否自动展开所有子级
            elem: '#data_table',
            url: '{:url("index")}',
            page: false,
            cols: [[
            {field: 'id', align: 'center',title: 'ID',width:60},
            {type:'checkbox'},
            {width: 55, align: 'center', templet: '#addnav'},
            {field: 'name',title: '栏目名称',minWidth: 200,edit: 'text'},
            {width: 70, align: 'center', title: '内容', templet:function(d){
                if(d.type == 'about') {
                    var url = "{:url('about/edit')}?id="+d.typeid;
                    return '<a class="layui-btn layui-btn-normal layui-btn-xs" onclick="openlayer(\''+url+'\',\''+d.name+'内容管理\',\'l\')">管理</a>';
                } else if(d.type == 'model') {
                    var url = "{:url('content/clist')}?navlist_id="+d.id+"&model_id="+d.typeid;
                    return '<a class="layui-btn layui-btn-normal layui-btn-xs" onclick="openlayer(\''+url+'\',\''+d.name+'内容管理\',\'l\')">管理</a>';
                } else {
                    return '-';
                }
            }},
            
            {width:60, align: 'center',title:'图片',templet: function(d){
                if(!d.img) d.img = '/public/static/images/nopic.jpg';
                return '<img src="'+d.img+'" style="height:28px;width:30px;" onclick=viewpic("'+d.img+'")>';
            }},
            {field: 'ename', title: '副名称',minWidth: 120,edit: 'text'},
            {field: 'alias', title: '别名(URL)',edit: 'text'},
            {field: 'navtype', title: '栏目类型'},
            
            {align: 'center', width: 80, title: '主导航', templet: '#G0',style:'background-color: #FAFAFA;'},
            {foreach :app\common\model\Navgroup::select() as $v}
            {align: 'center', width: 80, title: '{$v.title}', templet: '#{$v.name}',style:'background-color: #FAFAFA;'},
            {/foreach}
            {width: 70, align: 'center', title: '状态', templet: '#status'},
            {field: 'torder', width: 80, align: 'center', title: '{:lang("order")}', edit: 'text'},
            {toolbar: '#action', width: 200, align: 'center', title: '{:lang("act")}', fixed: 'right'}
            ]],
            done: function (res) {
                $('.countnum').text('记录数：' + res.count + '条');
                layer.close(loading);
            }
        });
        // 监听复选框
        table.on('checkbox(data_table)', function(obj){
            var checkStatus = table.checkStatus('data_table'), data = checkStatus.data;
            var ids = [];
            $(data).each(function(k,v){
                ids.push(v.id);
            });
            if(ids == '') {
                $('.setmodel').addClass('layui-btn-disabled');
                $('.setmodel').attr('disabled',true);
            } else {
                $('.setmodel').removeClass('layui-btn-disabled');
                $('.setmodel').attr('disabled',false);
            }
        });
        // 设置模型
        $(".setmodel").click(function(){
            var checkStatus = table.checkStatus('data_table'), data = checkStatus.data;
            var ids = [];
            $(data).each(function(k,v){
                ids.push(v.id);
            });
            if(ids == '') {
                layer.msg('请选择栏目！');
                return false;
            }
            layer.open({
                title:'批量设置模型',
                type:2,
                shade:0.8,
                scrollbar: false,
                area:['600px','700px'],
                content:'{:url("setmodel")}'
                ,success: function(layero, index){
                    var body = layer.getChildFrame('body', index);
                    body.find('input[name="ids"]').val(ids);
                }
            });
            return false;
        });
        // 监听行双击事件
        table.on('rowDouble(data_table)', function(obj){
            var url = "{:url('edit')}?id="+obj.data.id;
            openlayer(url,'{:lang("edit")}栏目','md');
        });
        // 监听单元格编辑
        table.on('edit(data_table)', function(obj){
            var value = obj.value //得到修改后的值
            ,data = obj.data //得到所在行所有键值
            ,field = obj.field; //得到字段
            table_ajax(data,'{:url("edit")}',2);
        });
        // 监听开关操作
        form.on('checkbox(status)', function(obj){
            var data = {};
            data[obj.elem.name] = obj.elem.checked ? 1 : 0;
            data['id'] = obj.value;
            data['list_switch'] = true;
            table_ajax(data,'{:url("edit")}',2);
        });
        // 点击事件
        table.on('tool(data_table)', function(obj) {
            var data = obj.data;
            var event = obj.event;
            if(event === 'del'){
                if(data.type == 'model') {
                    layer.confirm('{:lang("del")}栏目<font color="#FF5722">'+ data.name +'</font>？<br>将同时删除该栏目下的模型内容!',{title:'{:lang("del")}'},function(){
                        table_ajax(data,'{:url("del")}',1);
                    })
                } else {
                    layer.confirm('{:lang("del")}栏目<font color="#FF5722">'+ data.name +'</font>？',{title:'{:lang("del")}'},function(){
                        table_ajax(data,'{:url("del")}',1);
                    })
                }
                
                return false;
            }else if(event === 'addnav'){
                var url = "{:url('add')}?pid="+data.id;
                openlayer(url,'{:lang("add")}栏目','md');
            }else if(event === 'edit'){
                var url = "{:url('edit')}?id="+data.id;
                openlayer(url,'{:lang("edit")}栏目','md');
            }else if(event === 'view'){
                openlayer(data.url,'内容预览','l');
            }
        });
    });
</script>