{extend name="index_layout"/}
{block name="main"}
<div class="layui-card">
    <div class="layui-card-header">菜单管理</div>
    <div class="layui-card-body">
        <div class="layui-form">
            <table class="layui-hide" id="currentTable" lay-filter="currentTable"></table>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-table-tool-temp">
        <button class="layui-btn layui-btn-sm yzn-btn-primary" data-table-refresh="currentTable"><i class="iconfont icon-shuaxin1"></i></button>
        <button class="layui-btn layui-btn-sm {:$auth->check('auth.rule/add')?'':'layui-hide'}" data-open="{:url('add')}" title="添加"><i class="iconfont icon-add"></i>&nbsp;新增后台菜单</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" id="openAll"><i class="iconfont icon-add"></i>&nbsp;展开或折叠全部</button>
    </div>
</script>
<script type="text/html" id="barTool">
    <a data-open='{:url("add")}?parentid={{ d.id }}' class="layui-btn layui-btn-xs layui-btn-normal {:$auth->check('auth.rule/add')?'':'layui-hide'}" title="添加">添加</a>
    <a data-open='{:url("edit")}?id={{ d.id }}' class="layui-btn layui-btn-xs {:$auth->check('auth.rule/edit')?'':'layui-hide'}" title="编辑"><i class='iconfont icon-brush_fill'></i></a>
    <a href='{:url("del")}?id={{ d.id }}' class="layui-btn layui-btn-danger layui-btn-xs layui-tr-del {:$auth->check('auth.rule/del')?'':'layui-hide'}"><i class='iconfont icon-trash_fill'></i></a>
</script>
{/block}
{block name="script"}
<script>
layui.use(['table', 'yznTable','treeTable'], function() {
    var $ = layui.$,
        tableId = 'currentTable',
        yznTable = layui.yznTable;
     var treeTable = layui.treeTable;

    var init = {
        table_elem: '#currentTable',
        table_render_id: 'currentTable',
        modify_url:'{:url("multi")}',
    };

    treeTable.render({
        init: init,
        id: tableId,
        elem: init.table_elem,
        toolbar: '#toolbarDemo',
        url: "{:url('index')}",
        tree: {
            customName: {
                children:'childlist',
                pid:'parentid',
                name:'title'
            },
            view:{
                showIcon:false
            }
        },
        escape:false,
        // @todo 不直接使用yznTable.render(); 进行表格初始化, 需要使用 yznTable.formatCols(); 方法格式化`cols`列数据
        cols: yznTable.formatCols([
            [
                { field: 'listorder', width: 60, title: '排序', edit: 'text' },
                { field: 'id', width: 60, title: 'ID' },
                { field: 'title', align: 'left', title: '菜单名称', },
                { width: 80, title: '图标', align: 'center', templet: "<div><i class='iconfont {{d.icon}}'></i></div>" },
                { field: 'name', width: 200, title: '规则' },
                { field: 'status', align: 'center', width: 120, title: '状态', unresize: true ,templet: yznTable.formatter.switch,tips:"显示|隐藏"},
                { fixed: 'right', align: 'center', width: 140, title: '操作', toolbar: '#barTool' }
            ]
        ], init),
    });

    $('body').on('click', '#openAll', function() {
        var that = this;
        var show = $("i", that).hasClass("icon-add");
        treeTable.expandAll(tableId, show);
        $("i", that).toggleClass("icon-add", !show);
        $("i", that).toggleClass("icon-min", show);
    })

    yznTable.listenSwitch({filter: 'status', url: init.modify_url});
    yznTable.listenEdit(init, 'currentTable', init.table_render_id, false);
    yznTable.bindevent();

});
</script>
{/block}