{{template "header"}}

<div class="layui-row layui-col-space15">
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <div class="layui-colla-title">查询</div>
            <div class="layui-colla-content layui-show">
                <div class="layui-card">
                    <div class="layui-card-body layui-bzw-table">
                        <form class="layui-form" action="">
                            {{.CsrfTokenField}}
                            <div class="layui-form-item">
                                <input type="hidden" id="ParentID" name="ParentID" value="0" />
                                <div class="layui-form-item layui-inline">
                                    <select id="searchStatus">
                                        <option value="0">正常</option>
                                        <option value="-1">删除</option>
                                        <option value="9999">全部</option>
                                    </select>
                                </div>

                                <div class="layui-form-item layui-inline">
                                    <select id="searchName" name="searchName">
                                        <option value="name">名称</option>
                                    </select>
                                </div>

                                <div class="layui-form-item layui-inline">
                                    <input type="text" id="searchKey" placeholder=""
                                        class="layui-input layui-form-group-input">
                                </div>

                                <div class="layui-form-item layui-inline">
                                    <button type="button" class="pear-btn pear-btn-md pear-btn-primary" lay-submit
                                        lay-filter="btn-query">
                                        <i class="layui-icon layui-icon-search"></i>
                                        查询
                                    </button>
                                    <button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="btn-reset">
                                        <i class="layui-icon layui-icon-refresh"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbar">
    {{ genBtn .AuthorizeMenus "add" "refresh" "rebuild_parent_path"}}
</script>

<script type="text/html" id="actionBox">
    {{ genLink .AuthorizeMenus "add_children" "edit"}}
</script>

<div class="layui-row layui-col-space15">
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="organizationTreeContent" style="overflow: auto">
                    <ul id="departTree" class="dtree organizationTree"></ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md10">
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="tablelist" lay-filter="tablelist"></table>
            </div>
        </div>
    </div>
</div>

{{define "js"}}
<script>
    layui.use(['jquery', 'table', 'form', 'dtree', 'util'], function () {
        let $ = layui.jquery;
        let table = layui.table;
        let form = layui.form;
        let dtree = layui.dtree;
        let util = layui.util;

        var dTree = dtree.render({
            elem: "#departTree",
            width: 200,
            initLevel: "2", // 默认展开层级为1
            line: true, // 有线树
            ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
            icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
            method: 'POST',
            url: "/system/department/dtree",
            headers: { 'X-CSRF-Token': $('#csrf_token').val() }
        });

        // 绑定节点事件
        dtree.on("node(departTree)", function (obj) {
            $('#ParentID').val(obj.param.nodeId);
            search();
        });

        // 加载列表
        table.render({
            elem: '#tablelist',
            url: '/system/department/list',
            method: 'post',
            headers: { 'X-CSRF-Token': $('#csrf_token').val() },
            where: getQueryParams(),
            height: 'full',
            page: true,
            limits: [10, 20, 30, 50],
            cols: [[
                { field: 'name', title: '名称', width: 360 },
                {
                    field: 'status', title: '状态', width: 60, align: 'center', templet: function (d) {
                        if (d.id === 0) { return ''; }

                        switch (d.status) {
                            case 0: return '<span style="color: green">正常</span>';
                            case -1: return '<span style="color: red">删除</span>';
                            default: return '其它';
                        }
                        return '';
                    }
                },
                { title: '操作', toolbar: '#actionBox', align: 'center', width: 200 },
                { field: 'created_at', title: '创建时间', width: 160, align: 'center', templet: function (d) { return (!d.created_at || d.id === 0) ? '' : util.toDateString(d.created_at) } },
                { field: 'updated_at', title: '更新时间', width: 160, align: 'center', templet: function (d) { return !d.updated_at ? '' : util.toDateString(d.updated_at) } },
            ]],
            skin: 'line',
            toolbar: '#toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'exports'],
            request: {
                pageName: 'page',
                limitName: 'rows'
            }
        });

        // 工具栏
        table.on('toolbar(tablelist)', function (obj) {
            switch (obj.event) {
                case 'add': add(); break;
                case 'refresh': refresh(); break;
                case 'rebuild_parent_path': rebuildParentPath(); break;

            }
        });

        function add() {
            layer.open({
                type: 2,
                title: '新增部门',
                shade: 0.1,
                area: ['95%', '95%'],
                content: "/system/department/add"
            });
        }

        function refresh() {
            layer.confirm('确定要刷新部门数据吗?', { title: '提示' }, function (index, layero) {
                $.ajax({
                    url: '/system/department/refresh',
                    type: 'post',
                    headers: { 'X-CSRF-Token': $('#csrf_token').val() },
                    dataType: 'json',
                    success: function (result) {
                        if (result.success) {
                            layer.msg(result.msg, { icon: 1, time: 2000 });
                            search();
                        } else {
                            layer.msg(result.msg, { icon: 2 })
                        }
                    }
                });
                layer.close(index); // 关闭弹窗
            }, function (index, layero) {
                layer.close(index); // 关闭弹窗
            });
        }

        function rebuildParentPath() {
            layer.confirm('确定要重建父路径吗?', { title: '提示' }, function (index, layero) {
                $.ajax({
                    url: '/system/department/rebuild_parent_path',
                    type: 'post',
                    headers: { 'X-CSRF-Token': $('#csrf_token').val() },
                    dataType: 'json',
                    success: function (result) {
                        if (result.success) {
                            layer.msg(result.msg, { icon: 1, time: 2000 });
                            search();
                        } else {
                            layer.msg(result.msg, { icon: 2 })
                        }
                    }
                });
                layer.close(index); // 关闭弹窗
            }, function (index, layero) {
                layer.close(index); // 关闭弹窗
            });
        }

        // 表格项操作按钮
        table.on('tool(tablelist)', function (obj) {
            switch (obj.event) {
                case 'add_children': addChildren(obj); break;
                case 'edit': edit(obj); break;
            }
        });

        function addChildren(obj) {
            layer.open({
                type: 2,
                title: '为 ' + obj.data['Name'] + ' 新增子级',
                shade: 0.1,
                area: ['95%', '95%'],
                content: "/system/department/add_children?parentID=" + obj.data['id']
            });
        }

        function edit(obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['95%', '95%'],
                content: "/system/department/edit?id=" + obj.data['id']
            });
        }

        // 搜索条件
        function getQueryParams() {
            return {
                SearchStatus: $('#searchStatus').val(),
                SearchName: $('#searchName').val(),
                SearchKey: $('#searchKey').val(),
                SearchParentID: $('#ParentID').val()
            };
        }

        // 搜索
        function search() {
            table.reload('tablelist', {
                where: getQueryParams(),
                page: {
                    curr: 1
                }
            })
        }

        form.on('submit(btn-query)', function (data) {
            table.reload('tablelist', {
                where: getQueryParams(),
                page: {
                    curr: 1
                }
            })
            return false;
        });
    });
</script>
{{end}}

{{template "footer" .}}