package role

import (
	"context"

    "management/internal/erpserver/templ/base"
    "management/internal/pkg/mid"
	"management/internal/erpserver/templ/component"
)

templ List(ctx context.Context) {
    @base.Base(ctx, listCss(), listJs(ctx)) {
        {{ meuns := mid.GetCurMenus(ctx) }}
        @component.TemplBtn(meuns, true, "add", "refresh_cache", "rebuild_parent_path")
        @component.TemplLink(meuns, "edit", "set_menu", "refresh_role_menus")

        <div class="search-layer" id="search-layer" style="display: none;">
            <input type="hidden" id="parentId" name="parentId" value="0" />
            <div class="layui-form layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="layui-form-column">
                        <label for="status" class="tips">状态</label>
                        <select id="status">
                            <option value="0">正常</option>
                            <option value="-1">删除</option>
                            <option value="9999">全部</option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="layui-form-column">
                        <label for="id" class="tips">编号</label>
                        <input type="text" id="id" placeholder="请输入编号" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="layui-form-column">
                        <label for="name" class="tips">名称</label>
                        <input type="text" id="name" placeholder="请输入名称" class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row h-all">
            <div class="layui-col-md2 h-all">
                <div class="own-left-pannel">
                    <div id="roleTree" class="own-tree"></div>
                </div>
            </div>
            <div class="layui-col-md10">
                <div class="own-pannel">
                    <table id="tablelist" lay-filter="tablelist"></table>
                </div>
            </div>
        </div>
    }
}

templ listCss() {
}

templ listJs(ctx context.Context) {
    {{ token := mid.GetCsrfToken(ctx) }}
    <script>
        layui.use(['jquery', 'table', 'form', 'tree', 'util'], function () {
            let $ = layui.jquery;
            let table = layui.table;
            let form = layui.form;
            let tree = layui.tree;
            let util = layui.util;

            getRoleTree();

            // 加载列表
            table.render({
                elem: '#tablelist',
                url: "/system/role/list",
                method: "POST",
                headers: { 'X-CSRF-Token': '{{ token }}' },
                where: getQueryParams(),
                height: function () {
                    return $(window).height() - 22;
                },
                page: true,
                limit: 15,
                limits: [15, 30, 45, 60, 75, 90],
                cols: [[
                    { field: 'display_name', title: '显示名称', align: 'left', width: 160, fixed: 'left' },
                    { field: 'name', title: '名称', align: 'left', width: 150, fixed: 'left' },
                    {
                        field: 'status', title: '状态', align: 'center', width: 90, templet: function (row) {
                            switch (row.status) {
                                case 0: return '正常';
                                case -1: return '删除';
                                default: return '其它';
                            }
                            return '';
                        }
                    },
                    { field: 'sort', title: '排序', align: 'center', width: 60 },
                    { field: 'created_at', title: '创建时间', align: 'center', width: 160, templet: function (d) { return !d.created_at ? '' : util.toDateString(d.created_at) } },
                    { field: 'updated_at', title: '更新时间', align: 'center', width: 160, templet: function (d) { return !d.updated_at ? '' : util.toDateString(d.updated_at) } },
                    { title: '操作', toolbar: '#actionBox', align: 'center', width: 300, fixed: 'right' },
                ]],
                skin: 'grid',
                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': table.reload('tablelist'); break;
                    case 'refresh_cache': refreshCache(); break;
                    case 'rebuild_parent_path': rebuildParentPath(); break;
                    case 'search': search(); break;
                }
            });

            function add(obj) {
                layer.open({
                    type: 2,
                    title: '新增',
                    shade: 0.1,
                    area: ['99%', '98%'],
                    content: "/system/role/add"
                });
            }

            function refreshCache() {
                layer.confirm('确定要刷新角色数据吗?', { title: '提示' }, function (index, layero) {
                    $.ajax({
                        url: '/system/role/refresh_cache',
                        type: 'post',
                        headers: { 'X-CSRF-Token': '{{ token }}' },
                        dataType: 'json',
                        success: function (result) {
                            if (result.success) {
                                layer.msg(result.msg, { icon: 1, time: 2000 });
                                search_btn();
                            } 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/role/rebuild_parent_path',
                        type: 'post',
                        headers: { 'X-CSRF-Token': '{{ token }}' },
                        dataType: 'json',
                        success: function (result) {
                            if (result.success) {
                                layer.msg(result.msg, { icon: 1, time: 2000 });
                                search_btn();
                            } else {
                                layer.msg(result.msg, { icon: 2 })
                            }
                        }
                    });
                    layer.close(index); // 关闭弹窗
                }, function (index, layero) {
                    layer.close(index); // 关闭弹窗
                });
            }

            function search() {
                layer.open({
                    type: 1,
                    offset: '20px',
                    title: '搜索',
                    content: $('#search-layer'), // 捕获的元素
                    shade: 0.1,
                    shadeClose: false,
                    scrollbar: false,
                    resize: false,
                    move: false,
                    skin: 'search-layer-open',
                    area: ['50%', '350px'],
                    btn: ['搜索', '重置'],
                    btn1: function (index, layero) {
                        search_btn();
                        layer.close(index);
                    },
                    btn2: function (index, layero) {
                        $('#status').val(0);
                        $('#id').val('');
                        $('#name').val('');
                        $('#parentId').val(0);
                        form.render('select');
                        return false;
                    }
                });
            }

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

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

            function setMenu(obj) {
                layer.open({
                    type: 2,
                    title: '为 ' + obj.data['display_name'] + ' 分配权限',
                    shade: 0.1,
                    area: ['99%', '98%'],
                    content: "/system/role/set_menu?id=" + obj.data['id']
                });
            }

            function refreshRoleMenus(obj) {
                layer.confirm('确定要刷新角色权限吗？', { title: '提示' }, function (index, layero) {
                    $.ajax({
                        url: '/system/role/refresh_role_menus',
                        type: 'post',
                        headers: { 'X-CSRF-Token': '{{ token }}' },
                        dataType: 'json',
                        data: { "roleID": obj.data['id'] },
                        success: function (result) {
                            if (result.success) {
                                layer.msg(result.msg, { icon: 1, time: 2000 });
                            } else {
                                layer.msg(result.msg, { icon: 2 })
                            }
                        }
                    });
                    layer.close(index); // 关闭弹窗
                }, function (index, layero) {
                    layer.close(index); // 关闭弹窗
                });
            }

            // 搜索条件
            function getQueryParams() {
                return {
                    status: $('#status').val(),
                    name: $('#name').val(),
                    id: $('#id').val(),
                    parentId: $('#parentId').val()
                };
            }

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

            function getRoleTree() {
                $.ajax({
                    url: "/system/role/data?type=tree",
                    type: 'post',
                    dataType: 'json',
                    headers: { 'X-CSRF-Token': '{{ token }}' },
                    success: function (res) {
                        tree.render({
                            elem: '#roleTree',
                            data: res,
                            onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                            showLine: true,
                            click: function (obj) {
                                // console.log(obj.data); // 得到当前点击的节点数据
                                // console.log(obj.state); // 得到当前节点的展开状态：open、close、normal
                                // console.log(obj.elem); // 得到当前节点元素
                                // console.log(obj.data.children); // 当前节点下是否有子节点
                                $('#parentId').val(obj.data.id);
                                search_btn();
                            }
                        });
                    },
                    error: function (err) {
                        // 处理请求错误
                        console.log('请求出错：', err);
                    }
                });
            }
        });
    </script>
}