importCSS("common.css");

var vm,form,layer,element,menuPerTable,treetable;
jsapi.ready(function () {

    // 渲染表格
    var treemenu = {
        reload: function () {
            treetable.render({
                elem: '#menus-table',
                url: serviceBase + '/service/menuWork/list',
                // toolbar: 'default',
                height: 'full-200',
                method:'get',
                where: {
                    name: $("#name").val()
                },
                tree: {
                    iconIndex: 2,
                    isPidData: true,
                    idName: 'code',//父ID
                    pidName: 'parentCode',//子ID
                    openName: 'open',// 是否默认展开的字段名
                    //public bool open { get; set; }open字段是bool类型
                },
                // defaultToolbar: ['filter', 'print', 'exports'],
                cols: [[
                    {type: 'numbers'},
                    {field: 'code', title: '菜单代码', width: 100},
                    {field: 'name', title: '名称', width: 250},
                    {field: 'description', title: '描述', width: 200},
                    {field: 'url', title: '菜单路由'},
                    {field: 'perCode', title: '权限代码'},
                    {field: 'icon', title: '图标', align: 'center', width: 100,
                        templet:'<div><i class="layui-icon {{d.icon}}"></i></div>'
                    },
                    {field: 'seqNo', title: '顺序号', align: 'center', width: 110},
                    {field: 'createTime', title: '创建时间', align: 'center', width: 200},
                    {toolbar: '#menusState', width: 120, align: 'center', title: '操作'}
                ]],
                style: 'margin-top:0;'

            });
            treetable.on('tool(menus-table)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                if (layEvent === 'detail') {
                    layer.open({
                        type: 2, //type2表示打开iframe层
                        title: ['详情'],  //false表示不显示标题
                        area: ['800px', '600px'],
                        shade: 0.1, //是否显示遮罩层
                        // shadeClose: true, //是否点击遮罩关闭
                        id: "detail",  //设置id防止重复弹出
                        moveType: 0, //拖拽模式0或者1
                        content: kiteBase + "page/configure/menu_detail.html?" + $.param({
                            code: data.code,
                            icon: data.icon,
                        })
                    });
                } else if (layEvent === 'edit') {
                    layer.open({
                        type: 2, //type2表示打开iframe层
                        title: ['新增配置'],  //false表示不显示标题
                        area: ['800px', '700px'],
                        shade: 0.1, //是否显示遮罩层
                        // shadeClose: true, //是否点击遮罩关闭
                        id: "edit1",  //设置id防止重复弹出
                        moveType: 0, //拖拽模式0或者1
                        content: kiteBase + "page/configure/menu_edit.html?" + $.param({
                            code: data.code,
                            icon: data.icon,
                        })
                    });
                }
            });
            form.render();
        }

    }

    var menuPer = {
        reload: function () {
            menuPerTable.render({
                id: 'menuPerTable',
                elem: '#menuPerTable',
                url: serviceBase + '/service/sys/per/listPage',
                method: "post",
                where: {
                    code: $("#perCode").val(),
                    parentCode: $("#perParentCode").val()
                },
                page: true, //开启分页
                limit: 10,
                parseDate: function (res) {
                },
                cols: [[ //表头
                    {sort: true, field: 'code', title: '菜单代码', align: 'center', width: 328},
                    {sort: true, field: 'parentCode', title: '父级代码', align: 'center', width: 264},
                    {sort: true, field: 'name', title: '名称', align: 'center', width: 150},
                    {sort: true, field: 'description', title: '描述', align: 'center', width: 289},
                    {sort: true, field: 'seqNo', title: '顺序号', align: 'center', width: 110},
                    {sort: true, field: 'createTime', title: '创建时间', align: 'center', width: 200},
                    {sort: true, fixed: 'right', toolbar: '#menuPerBar', title: '操作', align: 'center', width: 300}
                ]],
            });

            menuPerTable.on('tool(menuPerTable)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                if (layEvent === 'editPer') {
                    layer.open({
                        type: 2, //type2表示打开iframe层
                        title: ['编辑配置'],  //false表示不显示标题
                        area: ['800px', '700px'],
                        shade: 0.1, //是否显示遮罩层
                        // shadeClose: true, //是否点击遮罩关闭
                        id: "edit2",  //设置id防止重复弹出
                        moveType: 0, //拖拽模式0或者1
                        content: kiteBase + "page/configure/menu_per_edit.html?" + $.param({
                            code: data.code,
                        })
                    });
                }
            });
            form.render();
        }
    }


    vm = new Vue({
        el: "body",
        data: $.extend($g.data, {
            id: ""
        }),
        methods: {
            add: function (obj) {
                layer.open({
                    type: 2, //type2表示打开iframe层
                    title: ['新增配置'],  //false表示不显示标题
                    area: ['800px', '700px'],
                    shade: 0.1, //是否显示遮罩层
                    // shadeClose: true, //是否点击遮罩关闭
                    id: "add1",  //设置id防止重复弹出
                    moveType: 0, //拖拽模式0或者1
                    content: kiteBase + "page/configure/menu_add.html" + $.param({})
                });
            },
            addPer: function (obj) {
                layer.open({
                    type: 2, //type2表示打开iframe层
                    title: ['新增配置'],  //false表示不显示标题
                    area: ['800px', '500px'],
                    shade: 0.1, //是否显示遮罩层
                    // shadeClose: true, //是否点击遮罩关闭
                    id: "add2",  //设置id防止重复弹出
                    moveType: 0, //拖拽模式0或者1
                    content: kiteBase + "page/configure/menu_per_add.html" + $.param({})
                });
            },
            menuPerQuery: function (e) {
                menuPer.reload();
            },
            treeMenuQuery: function (e) {
                treemenu.reload();
            },
        }
    })

    layui.use(['layer', 'form', 'table', 'element', 'treeTable'], function () {
        var $ = layui.$;
        form = layui.form;
        layer = layui.layer;
        element = layui.element;
        menuPerTable = layui.table;
        treetable = layui.treeTable;

        treemenu.reload();
        menuPer.reload();

    })

})