{include file="public/header"/}
<script src="__STATIC_ADMIN__/js/jquery.js?t={php}echo time();{/php}"></script>
<script src="__STATIC_ADMIN__/js/admin_common.js?t={php}echo time();{/php}"></script>
<style type="text/css" media="screen">
    .layui-table td{border:1px solid #e6e6e6;}   
    .layui-form-item{margin-bottom:0;}
    .cate-btn-expand{float:left;margin:3px 6px 0 0;display:block;width:14px;height:14px;background:url(__STATIC_ADMIN__/images/ico_plus.png) center center;}
    .cate-btn-fold{float:left;margin:3px 6px 0 0;display:block;width:14px;height:14px;background:url(__STATIC_ADMIN__/images/ico_minus.png) center center;}
</style>
<div class="layui-fluid" id="LAY-component-layer-list">
    <div class="layui-card">
        <div class="layui-card-body table-tool-mini">
           <div class="layui-form toolbar">
               <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-btn-group">
                            {volist name="$posipata" id="pt"}
                                {eq name='$pt.id' value='$position_id'}
                                   <a class="layui-btn layui-btn-primary" href="{:url('/nav/index',['position_id'=>$pt.id])}">{$pt.name}</a> 
                                {else/}
                                   <a class="layui-btn" href="{:url('/nav/index',['position_id'=>$pt.id])}">{$pt.name}</a> 
                                {/eq}
                            {/volist}
                        </div>
                        <div class="layui-btn-group">
                            <input type="button" value="添加菜单" class="layui-btn layui-btn-danger" data-type="nav_add"/>
                        </div>  
                    </div>
                </div>
           </div>
           <table id="lay-tableList" lay-filter="lay-tableList"></table>
        </div>
    </div>
</div>

<script type="text/html" id="nofollowTpl">
<input type="checkbox" lay-filter="switchStatus" lay-url="{:url('/nav/status')}?list=2" value="{{d.id}}" lay-skin="switch" lay-text="是|否" {{d.nofollow == 1 ?'checked':''}} lay-callback="status"/>
</script>

<script type="text/html" id="targetTpl">
<input type="checkbox" lay-filter="switchStatus" lay-url="{:url('/nav/status')}?list=1" value="{{d.id}}" lay-skin="switch" lay-text="是|否" {{d.target == 1 ?'checked':''}} lay-callback="status"/>
</script>

<script type="text/html" id="switchTpl">
<input type="checkbox" lay-filter="switchStatus" lay-url="{:url('/nav/status')}" value="{{d.id}}" lay-skin="switch" lay-text="正常|隐藏" {{d.status == 1 ?'checked':''}} lay-callback="status"/>
</script>

<script type="text/html" id="tableBarUser">
    <a class="layui-btn layui-btn-sm" data-type="nav_edit" data-id="{{d.id}}">编辑</a>
    {{# if(d.grade < {$nav_max_level - 1}){ }}
    <a class="layui-btn layui-btn-danger layui-btn-sm" data-type="nav_addson" data-id="{{d.id}}">增加子菜单</a>
    {{# }else{ }}
    <a class="layui-btn layui-btn-disabled layui-btn-sm">不支持增加</a>
    {{# } }}
    <a class="layui-btn layui-btn-danger layui-btn-sm" data-type="nav_del" data-id="{{d.id}}">删除</a>
</script>
{include file="public/footer"/}
<script>
    layui.use(['admin','layer', 'form', 'treetable_lay'], function(){
        var $ = layui.jquery;
        var admin = layui.admin;
        var layer = layui.layer;
        var form = layui.form;
        var treetable = layui.treetable_lay;

        var tbDataList = [];
        var position_id = {$position_id};

        var insTb = treetable.render({
            elem: '#lay-tableList',
            tree: {
                iconIndex: 1,
                idName: 'id',
                pidName: 'parent_id',
                isPidData: true
            },
            even: true,
            cellMinWidth: 100,
            height: 'full-160',
            cols: [
                {field: 'id', title: 'ID', width: 80, align: 'center'},
                {field: 'nav_name', title: '<a href="javascript:;" class="cate-btn-expand" id="btn-expand"></a><a href="javascript:;" class="cate-btn-fold" id="btn-fold" style="display:none;"></a>菜单名称',templet:function(d) {
                    if(d.cate_sync){
                        var html = d.nav_name+' <font color=red>【同步分类信息】</font>';
                        return html;                        
                    }else{
                        var html = d.nav_name;
                        return html; 
                    }
                }, minWidth: 300},
                {field: 'nofollow', title: '是否使用NOFOLLOW',width:180,align:'center',templet:'#nofollowTpl', unresize:true},
                {field: 'target', title: '新窗口打开',width:120,align:'center',templet:'#targetTpl', unresize:true},
                {field: 'status', title: '状态',width:100, align:'center',templet:'#switchTpl', unresize:true},
                {title: '操作', templet: '#tableBarUser',singleLine: false, align:'center', width:250},
                {title: '排序',align: 'center',templet:function(d) {
                    var html = "<input type='number' size='4' data-id='"+d.id+"' value='"+d.sort+"' id='sort' class='layui-input' style='height:30px;'/>";
                    return html;
                }, width:120}
            ],
            reqData: function (data, callback) {
                $.get("{:url('/nav/index')}?position_id="+position_id,function(res){
                    tbDataList = res.data ?? [];
                    callback(res.data);
                },'json');
            }
        });

        // 修改状态的回调函数
        admin.callback.status = function(clickthis,colletction,config) {
            if(colletction){
                if (colletction.code == 200) {
                    layui.iziToast.success({
                        message: colletction.msg,
                        timeout: 1000
                    });
                }else if(colletction.code == 504){
                    layui.iziToast.error({
                        message: colletction.message,
                        timeout: 1000,
                        onClosing: function () {
                            parent.location.reload();
                        }
                    });
                }else {
                    layui.iziToast.error({
                        message: colletction.msg,
                        timeout: 1000,
                        onClosing: function () {
                            self.window.location.reload();
                        }
                    });
                }
            }
        };

        // 监听排序
        $(document).on("change","#LAY-component-layer-list #sort",function(){
            var data_id = $(this).attr('data-id');
            var pcf_url = '{:url("/ajax/ajax_changeTableVal")}';
            console.log(this)
            changeTableVal('nav_list','id',data_id,'sort',this,pcf_url);
        });

        $(document).on("click","#LAY-component-layer-list .layui-btn",function(){
          var type = $(this).data('type');
          active[type] && active[type].call(this);
        });
        //触发事件
        var active = {
            nav_add: function(){
                layer.open({
                    type: 2,
                    title: false,
                    closeBtn: false,
                    fixed: true,
                    shadeClose: false,
                    shade: 0.3,
                    area: ['100%', '100%'],
                    content: "{:url('/nav/add')}?position_id="+position_id
                });
            },
            nav_addson: function(){
                var obj = this;
                var id = $(obj).attr('data-id');
                layer.open({
                    type: 2,
                    title: false,
                    closeBtn: false,
                    fixed: true,
                    shadeClose: false,
                    shade: 0.3,
                    area: ['100%', '100%'],
                    content: "{:url('/nav/add')}?position_id="+position_id+"&parent_id="+id
                });
            },
            nav_edit: function(){
                var obj = this;
                var id = $(obj).attr('data-id');
                layer.open({
                    type: 2,
                    title: false,
                    closeBtn: false,
                    fixed: true,
                    shadeClose: false,
                    shade: 0.3,
                    area: ['100%', '100%'],
                    content: "{:url('/nav/edit')}?position_id="+position_id+"&id="+id
                });
            },
            nav_del: function(){
                var obj = this;
                var id = $(obj).attr('data-id');
                layer.confirm('<font color="red">如有子栏目将一起清空</font>，确认删除？', {
                   btn: ['确定','取消']
                }, function(){
                    layer.load(2);
                    $.ajax({
                        type : 'post',
                        url : "{:url('/nav/del')}",
                        data : {del_id:id},
                        dataType : 'json',
                        success : function(res){
                            layer.closeAll();
                            if (res.code == 200) {
                                layui.iziToast.success({
                                    message: res.msg,
                                    timeout: 1000,
                                    onClosing: function () {
                                        location.reload();
                                    }
                                });
                            }else if(res.code == 504){
                                layui.iziToast.error({
                                    message: res.message,
                                    timeout: 1000,
                                    onClosing: function () {
                                        parent.location.reload();
                                    }
                                });
                            }else {
                                layui.iziToast.error({
                                    message: res.msg,
                                    timeout: 1000
                                });
                            }
                        }
                    })
                }, function(index){
                    layer.close(index);
                });
            }
        };

        $('#btn-expand').click(function () {
            $('#btn-expand').hide();
            $('#btn-fold').show();
            insTb.expandAll('#lay-tableList');
        });

        $('#btn-fold').click(function () {
            $('#btn-expand').show();
            $('#btn-fold').hide();
            insTb.foldAll('#lay-tableList');
        });
    });
</script>
</body>
</html>