<!DOCTYPE html>
<html>

<head>
    <include file="public@head" title="导航管理"/>
</head>

<body class="layui-layout-admin">
<include file="public@header"/>
<include file="public@side"/>
<div class="layui-body">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a href="{:url('admin/index/index')}">主页</a>
        <a>系统设置</a>
        <a href="{:url('index')}"><cite>导航管理</cite></a>
    </div>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">
                导航管理
                <div class="layui-btn-group fr">
                    <a class="layui-btn layui-btn-sm layui-btn-normal" href="{:url('add')}">添加导航</a>
                </div>
            </div>
            <div class="layui-card-body">
                <table class="layui-hide table-center" id="lists" lay-filter="lists"></table>
                <script type="text/html" id="barLists">
                    <a class="layui-btn layui-btn-sm" href="{:url('add')}?pid={{d.id}}">添加二级导航</a>
                    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
                </script>
                <script type="text/html" id="nameTpl">
                    {{d.str}}{{d.name}}
                </script>
                <script type="text/html" id="switchTpl">
                    <input type="checkbox" lay-skin="switch" lay-text="启用|禁用" lay-filter="switch"
                           data-url="{:url('changeShow')}?id={{d.id}}&field=status" {{ d.status==1 ? 'checked' : '' }}>
                </script>
            </div>
        </div>
    </div>
</div>
<include file="public@scripts"/>
<script>
    var table = layui.table;

    table.render({
        elem: '#lists',
        even: true,
        url: "{:url('getMenus')}",
        cols: [
            [
                {field: 'id', title: '序号', align: 'center', width: 80},
                {field: 'list_order', title: '排序', edit: 'text', width: 80},
                {field: 'name', title: '导航名称', templet: '#nameTpl', edit: 'text'},
                {field: 'url', title: '链接', edit: 'text'},
                {field: 'title', title: '标题', edit: 'text'},
                {field: 'status', title: '状态', width: 120, templet: '#switchTpl', align: 'center'},
                {fixed: 'right', title: '操作', align: 'center', toolbar: '#barLists'}
            ]
        ]
    });

    //监听单元格编辑
    table.on('edit(lists)', function (obj) {
        var value = obj.value,
            data = obj.data,
            field = obj.field;
        $.ajax({
            type: "post",
            url: "{:url('updateField')}?id=" + data.id + "&field=" + field + "&value=" + value,
        });
    });
    table.on('tool(lists)', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;
        if (layEvent === 'delete') {
            layer.confirm('您将彻底删除【' + data.title + '】菜单！', function (index) {
                obj.del();
                layer.close(index);
                $.ajax({
                    type: "post",
                    url: "{:url('delete')}?id=" + data.id,
                });
            });
        }
    });
</script>
</body>

</html>
