<template>
    <ap-container>
        <ap-aside margin="1111" width="30%">
            <div class="layout-aside-header">
                <div class="layout-aside-header-title">组织列表</div>
            </div>
            <div>
                <el-input placeholder="关键字过滤" v-model="treeFilterText"></el-input>
            </div>
            <div class="layout-aside-content" v-loading="loadingTreeFlag">
                <el-tree
                        ref="userTree"
                        node-key="fdId"
                        :data="treeData"
                        :props="{children: 'children',label: 'fdName'}"
                        :check-on-click-node="true"
                        :highlight-current="true"
                        :expand-on-click-node="false"
                        :check-strictly="false"
                        :filter-node-method="filterTreeNode"
                        @node-click="clickTreeEvent">
                    <div slot-scope="{ node, data }" style="width: 100%">
                        <div class="tree-node">
                            <span style="color: #2e6d91">{{data.fdName}}</span>
                            <span v-if="data.hasAuth" style="color: #1890FF">&nbsp;&nbsp;<i
                                    class="el-icon-finished"/></span>
                        </div>
                    </div>
                </el-tree>
            </div>
        </ap-aside>
        <ap-split-panel></ap-split-panel>
        <ap-container>
            <ap-header margin="1110">
                <div class="flex ">
                    <div>
                        已选择：
                        <el-input v-model="selectedName" :disabled="true" style="width: 200px;"></el-input>
                    </div>
                    <div class="flex-1" style="text-align: right;">
                        <ap-button type="primary" :click="saveSysAuth">保存</ap-button>
                    </div>
                </div>
            </ap-header>
            <ap-main margin="0110" style="padding: 0px;">
                <ap-container>
                    <ap-aside style="border-right: 1px dashed #cccccc;" width="50%">
                        <div class="layout-aside-header">
                            <div class="layout-aside-header-title">功能角色</div>
                        </div>
                        <div>
                            <el-input placeholder="关键字过滤" v-model="functionRoleTreeFilterText"></el-input>
                        </div>
                        <div class="layout-aside-content">
                            <el-tree
                                    ref="functionRoleTree"
                                    node-key="fdId"
                                    :data="functionRoleTreeData"
                                    :default-checked-keys="functionRoleCheckedKeys"
                                    :props="{children: 'children',label: 'fdName'}"
                                    default-expand-all
                                    show-checkbox
                                    :check-on-click-node="true"
                                    :highlight-current="true"
                                    :expand-on-click-node="false"
                                    :check-strictly="true"
                                    :filter-node-method="filterFunctionRoleTreeNode">
                            </el-tree>
                        </div>
                    </ap-aside>

                    <ap-aside width="50%">
                        <div class="layout-aside-header">
                            <div class="layout-aside-header-title">组织帐套角色</div>
                        </div>
                        <div>
                            <el-input placeholder="关键字过滤" v-model="orgRoleTreeFilterText"></el-input>
                        </div>
                        <div class="layout-aside-content">
                            <el-tree
                                    ref="orgRoleTree"
                                    node-key="fdId"
                                    :data="orgRoleTreeData"
                                    :default-checked-keys="orgRoleCheckedKeys"
                                    :props="{children: 'children',label: 'fdName'}"
                                    default-expand-all
                                    show-checkbox
                                    :check-on-click-node="true"
                                    :highlight-current="true"
                                    :expand-on-click-node="false"
                                    :check-strictly="true"
                                    :filter-node-method="filterOrgRoleTreeNode">
                            </el-tree>

                        </div>
                    </ap-aside>
                </ap-container>
            </ap-main>
        </ap-container>
    </ap-container>
</template>

<script>
    import {convertToTreeData} from 'ap-util/util/DataUtil'

    export default {
        name: 'SysAuthUser',
        data() {
            return {
                // ----- 左侧树 -----
                loadingTreeFlag: false,
                treeFilterText: '',
                treeData: [],
                selectedId: "",
                selectedName: '',

                // ----- 右侧 -----
                functionRoleTreeFilterText: '',
                functionRoleTreeData: [],
                functionRoleCheckedKeys: [],
                orgRoleTreeFilterText: '',
                orgRoleTreeData: [],
                orgRoleCheckedKeys: [],
            }
        },
        watch: {
            treeFilterText(val) {
                // 过滤值修改，更新tree
                this.$refs.userTree.filter(val);
            },
            functionRoleTreeFilterText(val) {
                this.$refs.functionRoleTree.filter(val);
            },
            orgRoleTreeFilterText(val) {
                this.$refs.orgRoleTree.filter(val);
            }
        },
        created() {
            this.loadTreeData();
        },
        methods: {
            // 左侧树：加载数据
            loadTreeData() {
                this.loadingTreeFlag = true;

                // 加载数据
                this.$request({
                    url: '/apm/sys/org/getSimplifyOrgList',
                    method: 'post'
                }).then(response => {
                    let res = response.data;
                    this.getAuthOrgList(res);
                }).catch(() => {
                    this.loadingTreeFlag = false;
                })
            },
            // 左侧树：获取已授权的组织
            getAuthOrgList(treeData) {
                // 加载数据
                this.$request({
                    url: '/apm/sys/sysAuth/getAuthOrgList',
                    method: 'post'
                }).then(response => {
                    let res = response.data;
                    for (let i = 0; i < res.length; i++) {
                        for (let j = 0; j < treeData.length; j++) {
                            if (res[i].fdTypeId == treeData[j].fdId) {
                                treeData[j].hasAuth = true;
                                continue;
                            }
                        }
                    }
                    // 数据格式转换：数组 -> tree
                    this.treeData = convertToTreeData(treeData, {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                    });
                }).finally(() => {
                    this.loadingTreeFlag = false;
                })
            },
            // 左侧树：重新加载数据
            reLoadTreeData() {
                // 重置当前选择节点
                this.$refs.userTree.setCurrentKey();
                this.loadTreeData();
            },
            // 左侧树：过滤节点
            filterTreeNode(value, data) {
                if (!value) return true;
                return data.fdName.indexOf(value) !== -1;
            },
            // 左侧树：click事件
            clickTreeEvent(data, node, comp) {
                this.selectedName = data.personName != null ? data.fdName + ' - [' + data.personName + ']' : data.fdName;
                this.selectedId = data.fdId;
                this.loadRoleTreeData();
            },
            filterFunctionRoleTreeNode(value, data) {
                if (!value) return true;
                return data.fdName.indexOf(value) !== -1;
            },
            filterOrgRoleTreeNode(value, data) {
                if (!value) return true;
                return data.fdName.indexOf(value) !== -1;
            },
            loadRoleTreeData() {
                this.functionRoleTreeData = [];
                this.$request({
                    url: '/apm/sys/sysAuth/getSysOrgRoleList',
                    method: 'post',
                    data: {
                        selectedId: this.selectedId
                    }
                }).then(response => {
                    let tempRoleList = response.data.roleList;
                    let functionRoleList = [];
                    let orgRoleList = [];
                    for (let i = 0; i < tempRoleList.length; i++) {
                        if (tempRoleList[i].fdType == 0) {
                            functionRoleList.push(tempRoleList[i]);
                        } else if (tempRoleList[i].fdType == 1) {
                            orgRoleList.push(tempRoleList[i]);
                        }
                    }
                    let orgAuthRes = response.data.orgAuthList;
                    let orgAuthList = [];
                    for (let i = 0; i < orgAuthRes.length; i++) {
                        orgAuthList.push(orgAuthRes[i].fdRoleId);
                    }
                    this.functionRoleTreeData = convertToTreeData(functionRoleList, {});
                    this.functionRoleCheckedKeys = orgAuthList;

                    this.orgRoleTreeData = convertToTreeData(orgRoleList, {});
                    this.orgRoleCheckedKeys = orgAuthList;
                })
            },
            saveSysAuth() {
                let userAuth = [];
                let functionRole = this.$refs.functionRoleTree.getCheckedNodes(false);
                let orgRole = this.$refs.orgRoleTree.getCheckedNodes(false);
                let allRole = functionRole.concat(orgRole);
                for (let i = 0; i < allRole.length; i++) {
                    userAuth.push({
                        fdType: 2,
                        fdTypeId: this.selectedId,
                        fdRoleId: allRole[i].fdId,
                    })
                }
                return new Promise((resolve, reject) => {
                    this.$request({
                        url: '/apm/sys/sysAuth/saveSysAuth',
                        method: 'post',
                        data: {
                            typeId: this.selectedId,
                            list: JSON.stringify(userAuth)
                        }
                    }).then(response => {
                        this.$message.success("保存成功！");
                    }).finally(() => {
                        resolve();
                    });
                });
            }

        }
    }
</script>

<style scoped>
    .tree-node {
        font-size: 15px;
    }
</style>
