<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">菜单管理</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!home_console">首页</a>
          <a><cite>菜单管理</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            所属应用：<select id="menu_clients" lay-filter="menu_clients"></select>
            &emsp;搜索：<input id="menus-edit-search" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp;
            <button id="menus-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button id="menus-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
            <button id="menus-btn-expand" class="layui-btn">全部展开</button>
            <button id="menus-btn-fold" class="layui-btn">全部折叠</button>
        </div>

        <!-- 数据表格 -->
        <table class="layui-table" id="menus-table" lay-filter="menus-table"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="menus-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>

    layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects', 'treetable'],function () {
        let table = layui.table;
        let layer = layui.layer;
        let admin = layui.admin;
        let treetable = layui.treetable;
        let config = layui.config;
        let form = layui.form;

        // 渲染表格
        var renderTable = function (param) {
            if (param) {
                param.access_token = config.getToken().access_token;
            } else {
                param = {
                    access_token: config.getToken().access_token
                };
            }
            treetable.render({
                treeColIndex: 1,
                treeSpid: -1,
                treeIdName: 'id',
                treePidName: 'parentId',
                elem: '#menus-table',
                url: config.base_server + 'api-user/menus/findAlls',
                where: param,
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'name', minWidth: 200, title: '菜单名称'},
                    {field: 'url', title: '菜单url'},
                    {field: 'path', title: '菜单path'},
                    {field: 'css',  align: 'center', title: '样式'},
                    {field: 'sort', width: 80, align: 'center', title: '排序号'},
                    {
                        field: 'type', width: 80, align: 'center', templet: function (d) {
                            if (d.type === 2) {
                                return '<span class="layui-badge layui-bg-gray">资源</span>';
                            }
                            if (d.parentId === -1) {
                                return '<span class="layui-badge layui-bg-blue">目录</span>';
                            } else {
                                return '<span class="layui-badge-rim">菜单</span>';
                            }
                        }, title: '类型'
                    },
                    {templet: '#menus-state', width: 120, align: 'center', title: '操作'}
                ]]
            });
        };
        renderTable({tenantId: config.clientId});

        // 获取应用列表
        layer.load(2);
        admin.req('api-uaa/clients/all', {}, function (data) {
            layer.closeAll('loading');
            if (0 === data.code) {
                let selected = false;
                $.each(data.data,function(index,item){
                    if (config.clientId === item.clientId) {
                        selected = true;
                    } else {
                        selected = false;
                    }
                    //往下拉菜单里添加元素
                    $('#menu_clients').append(new Option(item.clientName, item.clientId, false, selected));
                })
                form.render();
            } else {
                layer.msg(data.msg, {icon: 2, time: 500});
            }
        }, 'GET');

        // 工具条点击事件
        table.on('tool(menus-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') {
                layer.confirm('确定删除此菜单吗？', function () {
                    layer.load(2);
                    let tenantId = $('#menu_clients').val();
                    admin.req('api-user/menus/'+obj.data.id+'?tenantId='+tenantId, {}, function (data) {
                        layer.closeAll('loading');
                        if (0 === data.code) {
                            layer.msg(data.msg, {icon: 1, time: 500});
                            renderTable({tenantId: tenantId});
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 500});
                        }
                    }, 'DELETE');
                });
            }
        });

        // 显示编辑弹窗
        var showEditModel = function (data) {
            let tenantId = $('#menu_clients').val();
            let title = data ? '修改菜单' : '添加菜单';
            if (data){
                data.type = data.type.toString();
                data.hidden = data.hidden.toString();
            } else {
                data = {};
            }
            data.tenantId = tenantId;
            admin.putTempData('t_menus', data);

            admin.popupCenter({
                title: title,
                path: 'pages/system/menus_form.html',
                finish: function () {
                    renderTable({tenantId: tenantId});
                }
            });
        };

        // 添加按钮点击事件
        $('#menus-btn-add').click(function () {
            showEditModel();
        });

        // 搜索按钮点击事件
        $('#menus-btn-search').click(function () {
            var keyword = $('#menus-edit-search').val();
            var searchCount = 0;
            $('#menus-table').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                $(this).css('background-color', 'transparent');
                var text = $(this).text();
                if (keyword !== '' && text.indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount === 0) {
                        $('.layui-tab-item.layui-show').stop(true);
                        $('.layui-tab-item.layui-show').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (keyword !== '' && searchCount === 0) {
                layer.msg("没有匹配结果", {icon: 5, time: 500});
            } else {
                treetable.expandAll('#menus-table');
            }
        });

        $('#menus-btn-expand').click(function () {
            treetable.expandAll('#menus-table');
        });

        $('#menus-btn-fold').click(function () {
            treetable.foldAll('#menus-table');
        });

        // 应用下来框点击事件
        form.on('select(menu_clients)', function(data){
            renderTable({tenantId: data.value});
        });
    });
</script>