<template>
    <ap-container>
        <ap-main margin="1111" style="padding:0px 10px;">
            <el-tabs v-model="activeName" @tab-click="handleClick" class="ap-tabs">
                <el-tab-pane label="用户权限总览" name="first" class="ap-tab">
                    <div class="flex-justify-start" style="height: 100%">
                        <div style="width: 300px;height:100%;padding: 0 10px 0 0;border-right: 1px solid #dcdfe6;">
                            <ap-aside-tree :options.sync="userTreeOptions">
                                <div slot="tree" slot-scope="{ node, data }" style="width: 100%">
                                    <template v-if="data.isUser != 1">
                                        <div class="tree-node">
                                            <span style="color: #2e6d91">{{ data.fdName }}</span>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div class="tree-node ap-ellipse">
                                    <span style="color: #1890FF">
                                        <i class="el-icon-s-custom"/>&nbsp;&nbsp;{{ data.fdName }}
                                        <template v-if="data.personName != null">
                                            {{ ' - [' + data.personName + ']' }}
                                        </template>
                                    </span>
                                        </div>
                                    </template>
                                </div>
                            </ap-aside-tree>
                        </div>
                        <div style="width: 300px;height:100%;margin-left: 10px;">
                            <ap-aside-tree :options.sync="userRoleOptions" ref="userRoleTree">
                                <div slot="tree" slot-scope="{ node, data }" style="width: 100%">
                                    <template v-if="data.fdType == 0">
                                        <span style="color: #173242;font-weight: bold;">{{ data.fdName }}</span>
                                    </template>
                                    <template v-else>
                                        <template v-if="data.fdIsGroup == 1">
                                            <span style="color: #2e6d91">
                                                {{ data.fdName }}
                                            </span>
                                        </template>
                                        <template v-else>
                                            <span style="color: #1890ff">
                                                {{ data.fdName }}
                                            </span>
                                        </template>
                                    </template>
                                </div>
                            </ap-aside-tree>
                        </div>
                        <div style="width: 300px;height:100%;margin-left: 10px;">
                            <ap-aside-tree :options.sync="functionTypeOptions" ref="functionTypeTree">
                                <div slot="tree" slot-scope="{ node, data }" style="width: 100%">
                                    <div v-if="data.fdType == 0">
                                        <span style="color: #2e6d91">{{ data.fdName }}</span>
                                    </div>
                                    <div v-else>
                                        <div style="color: #1890FF;min-width: 140px;"><i class="el-icon-guide"/>
                                            &nbsp{{data.fdName }}
                                        </div>
                                    </div>
                                </div>
                            </ap-aside-tree>
                        </div>
                        <div style="width: 300px;height:100%;margin-left: 10px;">
                            <ap-aside-tree :options.sync="functionMenuOptions" ref="functionMenuTree">
                                <div slot="tree" slot-scope="{ node, data }" style="width: 100%">
                                    <span>{{ data.fdName }}</span>
                                </div>
                            </ap-aside-tree>
                        </div>
                        <div style="width: 300px;height:100%;margin-left: 10px;">
                            <ap-aside-tree :options.sync="functionItemOptions" ref="functionItemTree">
                                <div slot="tree" slot-scope="{ node, data }" style="width: 100%">
                                    <span>{{ data.fdName }}</span>
                                </div>
                            </ap-aside-tree>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="功能角色授权总览" name="second" class="ap-tab">
                    <div class="flex-justify-start" style="height: 100%">
                        <div style="width: 300px;height:100%;padding: 0 10px 0 0;border-right: 1px solid #dcdfe6;">
                            <ap-aside-tree :options.sync="functionRoleTreeOptions" ref="functionRoleTree">
                                <div slot="tree" slot-scope="{ node, data }" style="width: 100%">
                                    <template v-if="data.fdIsGroup == 1">
                                        <span style="color: #2e6d91">
                                            {{ data.fdName }}
                                        </span>
                                    </template>
                                    <template v-else>
                                        <span style="color: #1890ff">
                                            {{ data.fdName }}
                                        </span>
                                    </template>
                                </div>
                            </ap-aside-tree>
                        </div>
                        <div style="width: 300px;height:100%;margin-left: 10px;">
                            <ap-aside-tree :options.sync="functionRoleUserOptions" ref="functionRoleUser">
                                <div slot="tree" slot-scope="{ node, data }" style="width: 100%">
                                    <template v-if="data.isUser != 1">
                                        <div class="tree-node">
                                            <span style="color: #2e6d91">{{data.fdName}}</span>
                                        </div>
                                    </template>
                                    <template v-if="data.isUser == 1">
                                        <div class="tree-node ap-ellipse">
                                <span style="color: #1890FF">
                                    <i class="el-icon-s-custom"/>&nbsp;&nbsp;{{data.fdName}}
                                    <template v-if="data.personName != null">
                                        {{' - [' + data.personName + ']'}}
                                    </template>
                                </span>
                                        </div>
                                    </template>
                                </div>
                            </ap-aside-tree>
                        </div>
                        <div style="width: 300px;height:100%;margin-left: 10px;">
                            <ap-aside-tree :options.sync="userGroupTreeOptions" ref="userGroupTree">
                                <div slot="tree" slot-scope="{ node, data }" style="width: 100%">
                                    <span style="color: #1890FF">
                                        {{data.fdName}}
                                    </span>
                                </div>
                            </ap-aside-tree>
                        </div>
                        <div style="width: 300px;height:100%;margin-left: 10px;">
                            <ap-aside-tree :options.sync="orgTreeOptions" ref="orgTree">
                                <div slot="tree" slot-scope="{ node, data }" style="width: 100%">
                                    <span style="color: #1890FF">
                                        {{data.fdName}}
                                    </span>
                                </div>
                            </ap-aside-tree>
                        </div>
                        <div style="width: 300px;height:100%;margin-left: 10px;">
                            <ap-aside-tree :options.sync="orgPersonTreeOptions" ref="orgPersonTree">
                                <div slot="tree" slot-scope="{ node, data }" style="width: 100%">
                                    <span style="color: #1890FF">
                                        {{data.fdName}}
                                    </span>
                                </div>
                            </ap-aside-tree>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </ap-main>
    </ap-container>
</template>

<script>
export default {
    name: 'SysAuthOverview',
    data() {
        return {
            activeName: 'first',
            selectedUserId: "",
            selectedRoleId: "",
            userTreeOptions: this.getUserTreeOption(),
            userRoleOptions: this.getUserRoleOption(),
            functionTypeOptions: this.getFunctionTypeOption(),
            functionMenuOptions: this.getFunctionMenuOption(),
            functionItemOptions: this.getFunctionItemOption(),
            functionRoleTreeOptions: this.getFunctionRoleOptions(),
            functionRoleUserOptions: this.getFunctionRoleUserOptions(),
            userGroupTreeOptions: this.getUserGroupTreeOptions(),
            orgTreeOptions: this.getOrgTreeOptions(),
            orgPersonTreeOptions: this.getOrgPersonTreeOptions(),
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        getUserTreeOption() {
            let treeOptions = {
                title: "用户列表",
                onClick: (data, node, comp) => {
                    this.selectedUserId = data.fdId;
                    this.$refs.userRoleTree.clear();
                    this.$refs.functionTypeTree.clear();
                    this.$refs.functionMenuTree.clear();
                    this.$refs.functionItemTree.clear();
                    if (data.isUser != 1) {
                        return;
                    }
                    this.$refs.userRoleTree.reLoadTreeData();
                    this.$refs.functionTypeTree.reLoadTreeData();
                    this.$refs.functionMenuTree.reLoadTreeData();
                    this.$refs.functionItemTree.reLoadTreeData();
                },
                defaultExpandAll: false,
                renderAfterExpand: true,
                loadOptions: {
                    url: "/apm/sys/sysAuth/getUserList",
                    data: {
                        type: 0
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
            };
            return treeOptions;
        },
        getUserRoleOption() {
            let treeOptions = {
                title: "已授权角色",
                onClick: (data, node, comp) => {
                },
                defaultExpandAll: true,
                renderAfterExpand: true,
                initData: false, // 默认不加载
                loadOptions: {
                    url: "/apm/sys/sysAuth/getUserAllRoleList",
                    data: () => {
                        return { userId : this.selectedUserId}
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
            };
            return treeOptions;
        },
        getFunctionTypeOption() {
            let treeOptions = {
                title: "已授权应用",
                onClick: (data, node, comp) => {
                },
                defaultExpandAll: true,
                renderAfterExpand: true,
                initData: false, // 默认不加载
                loadOptions: {
                    url: "/apm/sys/sysAuth/getUserAllFunctionTypeList",
                    data: () => {
                        return { userId : this.selectedUserId}
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
            };
            return treeOptions;
        },
        getFunctionMenuOption() {
            let treeOptions = {
                title: "已授权菜单",
                onClick: (data, node, comp) => {
                },
                defaultExpandAll: true,
                renderAfterExpand: true,
                initData: false, // 默认不加载
                loadOptions: {
                    url: "/apm/sys/sysAuth/getUserAllFunctionList",
                    data: () => {
                        return {
                            userId : this.selectedUserId,
                            authType: 0
                        }
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
            };
            return treeOptions;
        },
        getFunctionItemOption() {
            let treeOptions = {
                title: "已授权功能权限",
                onClick: (data, node, comp) => {
                },
                defaultExpandAll: true,
                renderAfterExpand: true,
                initData: false, // 默认不加载
                loadOptions: {
                    url: "/apm/sys/sysAuth/getUserAllFunctionList",
                    data: () => {
                        return {
                            userId : this.selectedUserId,
                            authType: 1
                        }
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
            };
            return treeOptions;
        },
        getFunctionRoleOptions() {
            let treeOptions = {
                title: "功能角色列表",
                onClick: (data, node, comp) => {
                    this.selectedRoleId = data.fdId;
                    this.$refs.functionRoleUser.clear();
                    this.$refs.userGroupTree.clear();
                    this.$refs.orgPersonTree.clear();
                    this.$refs.orgTree.clear();
                    this.$refs.functionRoleUser.reLoadTreeData();
                    this.$refs.userGroupTree.reLoadTreeData();
                    this.$refs.orgPersonTree.reLoadTreeData();
                    this.$refs.orgTree.reLoadTreeData();
                },
                defaultExpandAll: false,
                renderAfterExpand: true,
                loadOptions: {
                    url: "/apm/sys/TSysRole/getTSysRoleList",
                    data: {
                        type: 0
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
            };
            return treeOptions;
        },
        getFunctionRoleUserOptions() {
            let treeOptions = {
                title: "已授权用户",
                onClick: (data, node, comp) => {
                },
                defaultExpandAll: true,
                // renderAfterExpand: true,
                initData: false, // 默认不加载
                loadOptions: {
                    url: "/apm/sys/sysAuth/getFunctionRoleUser",
                    data: () => {
                        return { roleId : this.selectedRoleId}
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
            };
            return treeOptions;
        },
        getUserGroupTreeOptions() {
            let treeOptions = {
                title: "已授权用户分组",
                onClick: (data, node, comp) => {
                },
                defaultExpandAll: true,
                // renderAfterExpand: true,
                initData: false, // 默认不加载
                loadOptions: {
                    url: "/apm/sys/sysAuth/getFunctionRoleUserGroup",
                    data: () => {
                        return { roleId : this.selectedRoleId}
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
            };
            return treeOptions;
        },
        getOrgTreeOptions() {
            let treeOptions = {
                title: "已授权组织部门",
                onClick: (data, node, comp) => {
                },
                defaultExpandAll: true,
                // renderAfterExpand: true,
                initData: false, // 默认不加载
                loadOptions: {
                    url: "/apm/sys/sysAuth/getFunctionRoleOrg",
                    data: () => {
                        return { roleId : this.selectedRoleId}
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
            };
            return treeOptions;
        },
        getOrgPersonTreeOptions() {
            let treeOptions = {
                title: "已授权组织用户分组",
                onClick: (data, node, comp) => {
                },
                defaultExpandAll: true,
                // renderAfterExpand: true,
                initData: false, // 默认不加载
                loadOptions: {
                    url: "/apm/sys/sysAuth/getFunctionRoleOrgPerson",
                    data: () => {
                        return { roleId : this.selectedRoleId}
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
            };
            return treeOptions;
        },
    }
}
</script>

<style scoped>
.ap-tabs {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.ap-tab {
    height: 100%;
}

.ap-tabs /deep/ .el-tabs__content {
    flex: 1;
    overflow: scroll;
    background-color: white;
    padding: 0;
}
</style>