<template>
    <ap-container>
        <ap-aside margin="1111" width="30%">
            <div class="layout-aside-header">
                <div class="layout-aside-header-title">组织帐套角色</div>
                <div class="layout-aside-header-icon">
                    <i class="el-icon-plus" @click="addRole"/>
                    <i class="el-icon-edit-outline" @click="editRole"/>
                    <i class="el-icon-delete" @click="deleteRole"/>
                    <el-popover ref="popoverRef" placement="bottom" trigger="click">
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-top" @click="doSortChange('prev')">上移
                            </el-button>
                            <el-button type="primary" icon="el-icon-bottom" @click="doSortChange('next')">下移
                            </el-button>
                            <el-button type="primary" icon="el-icon-s-operation" @click="sortByIndex">一键排序
                            </el-button>
                        </el-button-group>
                        <i class="el-icon-sort" slot="reference"/>
                    </el-popover>
                </div>
            </div>
            <div>
                <el-input placeholder="关键字过滤" v-model="treeFilterText"></el-input>
            </div>
            <div class="layout-aside-content" v-loading="loadingTreeFlag">
                <el-tree
                        ref="tSysRoleTree"
                        node-key="fdId"
                        :data="treeData"
                        :props="{children: 'children',label: 'fdName'}"
                        default-expand-all
                        :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 }">
                        <div v-if="data.fdIsGroup == 1" class="tree-node">
                            <span style="color: #2e6d91">{{data.fdName}}</span>
                        </div>
                        <div v-else class="tree-node ap-ellipse">
                            <span style="color: #1890FF"><i class="el-icon-s-custom"/>&nbsp;{{data.fdName}}</span>
                        </div>
                    </div>
                </el-tree>
            </div>
        </ap-aside>
        <ap-split-panel></ap-split-panel>
        <ap-container>
            <ap-header margin="1110">
                <div style="text-align: right;">
                    <ap-button type="primary" :click="saveRoleFunction">保存</ap-button>
                </div>
            </ap-header>
            <ap-main margin="0110" style="padding: 0px;">
                <ap-container>
                    <ap-aside width="50%">
                        <div class="layout-aside-header">
                            <div class="layout-aside-header-title">组织分组{{selectedRoleName}}</div>
                        </div>
                        <div>
                            <el-input placeholder="关键字过滤" v-model="groupTreeFilterText"></el-input>
                        </div>
                        <div class="layout-aside-content">
                            <el-tree
                                    ref="orgGroupTree"
                                    node-key="fdSort"
                                    :data="groupTreeData"
                                    :default-checked-keys="groupCheckedKeys"
                                    :props="{children: 'children',label: 'fdName'}"
                                    default-expand-all
                                    show-checkbox
                                    :check-on-click-node="false"
                                    :highlight-current="true"
                                    :expand-on-click-node="false"
                                    :check-strictly="false"
                                    :filter-node-method="filterOrgGroupTreeNode">
                            </el-tree>
                        </div>
                    </ap-aside>
                </ap-container>
            </ap-main>
        </ap-container>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="350px">
            <el-form ref="dialogForm"
                     :inline="true"
                     :model="dialogForm" :rules="dialogFormRules" label-width="80px">
                <el-form-item label="父节点">
                    <el-select v-model="dialogForm.fdParentId" filterable placeholder="请选择父节点">
                        <el-option label="无" value=""></el-option>
                        <el-option
                                v-for="item in roleGroupList"
                                :key="item.fdId"
                                :label="item.fdName"
                                :value="item.fdId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称" prop="fdName">
                    <el-input v-model="dialogForm.fdName"></el-input>
                </el-form-item>
                <el-form-item label="分组">
                    <el-radio v-model="dialogForm.fdIsGroup" :label="1">是</el-radio>
                    <el-radio v-model="dialogForm.fdIsGroup" :label="0">否</el-radio>
                </el-form-item>
                <el-form-item label="排序" prop="fdSort">
                    <el-input-number v-model="dialogForm.fdSort" controls-position="right"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveDialog" :loading="saveDialogLoadingFlag">确 定</el-button>
            </span>
        </el-dialog>
    </ap-container>
</template>

<script>
    import {convertToTreeData} from 'ap-util/util/DataUtil'
    import {getNodeByCurrent, getSortListByIndex} from 'ap-util/util/TreeUtil'

    export default {
        name: 'SysRoleOrgGroup',
        data() {
            return {
                // ----- 左侧树 -----
                loadingTreeFlag: false,
                saveDialogLoadingFlag: false,
                dialogVisible: false,
                dialogTitle: '',
                isAddDialog: true,
                treeFilterText: '',
                treeData: [],
                roleGroupList: [],
                selectedRoleId: "",
                selectedRoleName: '',
                dialogForm: this.getInitDialogForm(),

                dialogFormRules: {
                    fdName: [
                        {required: true, message: '请输角色名称', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ],
                },
                // ----- 右侧 -----
                groupTreeFilterText: '',
                groupTreeData: [],
                groupCheckedKeys: [],
                selectedGroupId: '',
            }
        },
        watch: {
            treeFilterText(val) {
                // 过滤值修改，更新tree
                this.$refs.tSysRoleTree.filter(val);
            },
            groupTreeFilterText(val) {
                this.$refs.orgGroupTree.filter(val);
            }
        },
        created() {
            this.loadTreeData();
        },
        methods: {
            // 左侧树：加载数据
            loadTreeData() {
                this.loadingTreeFlag = true;

                // 加载数据
                this.$request({
                    url: '/apm/sys/TSysRole/getTSysRoleList',
                    method: 'post',
                    data: {
                        type: 1
                    }
                }).then(response => {
                    let res = response.data;
                    // 数据格式转换：数组 -> tree
                    this.treeData = convertToTreeData(res, {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                    });

                    let roleGroupList = [];
                    for (let i = 0; i < res.length; i++) {
                        if (res[i].fdIsGroup == 1) {
                            roleGroupList.push(res[i]);
                        }
                    }
                    this.roleGroupList = roleGroupList;
                }).finally(() => {
                    this.loadingTreeFlag = false;
                })
            },
            // 左侧树：重新加载数据
            reLoadTreeData() {
                // 重置当前选择节点
                this.$refs.tSysRoleTree.setCurrentKey();
                this.loadTreeData();
            },
            // 左侧树：过滤节点
            filterTreeNode(value, data) {
                if (!value) return true;
                return data.fdName.indexOf(value) !== -1;
            },
            // 左侧树：click事件
            clickTreeEvent(data, node, comp) {
                this.selectedRoleName = ` -【${data.fdName}】`;
                this.selectedRoleId = data.fdId;
                if (data.fdIsGroup == 1) return;
                this.loadGroupType();
            },
            getInitDialogForm() {
                let form = {
                    fdId: '',
                    fdName: '',
                    fdIsGroup: 0,
                    fdParentId: '',
                    fdSort: 0,
                    fdType: 1
                };
                return form;
            },
            //重置表单数据
            resetDialogForm() {
                this.dialogForm = this.getInitDialogForm()
            },
            // 获取树的节点信息
            getCurrentNode() {
                return this.$refs.tSysRoleTree.getCurrentNode() || {}
            },
            // dialog：添加数据
            addRole() {
                let currentNodeFdId = this.getCurrentNode().fdId;
                this.resetDialogForm();
                this.dialogVisible = true;
                this.dialogTitle = '添加角色';
                this.isAddDialog = true;
                this.dialogForm.fdParentId = currentNodeFdId;
            },

            // dialog：编辑数据
            editRole() {
                let currentNodeFdId = this.getCurrentNode().fdId;
                if (!currentNodeFdId) {
                    this.$message.error('请选择需要编辑的数据！');
                    return
                }

                this.resetDialogForm();
                this.dialogVisible = true;
                this.dialogTitle = '编辑角色';
                this.isAddDialog = false;
                this.dialogForm.fdId = currentNodeFdId;

                this.$request({
                    url: '/apm/sys/TSysRole/getTSysRoleByFdId',
                    method: 'post',
                    data: {
                        fdId: currentNodeFdId
                    }
                }).then(response => {
                    this.dialogForm.fdId = response.data.fdId;
                    this.dialogForm.fdParentId = response.data.fdParentId;
                    this.dialogForm.fdName = response.data.fdName;
                    this.dialogForm.fdIsGroup = response.data.fdIsGroup;
                    this.dialogForm.fdSort = response.data.fdSort;
                })
            },
            deleteRole() {
                let currentNode = this.getCurrentNode();
                let currentNodeFdId = currentNode.fdId;
                if (!currentNodeFdId) {
                    this.$message.error('请选择需要删除的数据！');
                    return
                }

                this.$confirm(`确定要删除【${currentNode.fdName}】?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$request({
                        url: '/apm/sys/TSysRole/updateTSysRoleForDelete',
                        method: 'post',
                        data: {
                            fdId: currentNodeFdId
                        }
                    }).then(response => {
                        this.$message.success(`删除成功！已删除${response.data}条数据！`);
                        this.loadTreeData();
                    })
                })
            },
            saveDialog() {
                this.saveDialogLoadingFlag = true;
                this.$refs.dialogForm.validate((valid) => {
                    if (!valid) {
                        this.$message.error(`数据校验失败，请重新填写信息！`);
                        return false;
                    }

                    if (this.isAddDialog) {
                        console.log(this.dialogForm);
                        // 添加数据
                        this.$request({
                            url: '/apm/sys/TSysRole/insertTSysRole',
                            method: 'post',
                            data: this.dialogForm
                        }).then(response => {
                            this.$message.success(`添加成功！已添加${response.data}条数据！`)
                            this.dialogVisible = false;
                            this.reLoadTreeData();
                        }).finally(() => {
                            this.saveDialogLoadingFlag = false;
                        })
                    } else {
                        // 更新数据
                        this.$request({
                            url: '/apm/sys/TSysRole/updateTSysRole',
                            method: 'post',
                            data: this.dialogForm
                        }).then(response => {
                            this.$message.success(`更新成功！已更新${response.data}条数据！`)
                            this.dialogVisible = false;
                            this.reLoadTreeData();
                        }).finally(() => {
                            this.saveDialogLoadingFlag = false;
                        })
                    }
                });
            },
            // 修改排序
            doSortChange(type) {
                let currentNode = this.getCurrentNode();
                if (!currentNode.fdId) {
                    this.$message.error(`请选择需要操作的节点！`);
                    return;
                }
                let exchangeNode = getNodeByCurrent(this.$refs.tSysRoleTree, type);
                if (exchangeNode == null) {
                    this.$message.error(`无需排序！`);
                    return;
                }

                this.$request({
                    url: '/apm/sys/TSysRole/updateRoleSort',
                    method: 'post',
                    data: {
                        rowFdId: currentNode.fdId,
                        rowFdSort: exchangeNode.fdSort,
                        exchangeRowFdId: exchangeNode.fdId,
                        exchangeRowFdSort: currentNode.fdSort
                    }
                }).then(response => {
                    this.$message.success(`修改成功！`)
                    this.$refs.popoverRef.doClose();
                    this.loadTreeData();
                })
            },
            // 一键排序
            sortByIndex() {
                let list = getSortListByIndex(this.$refs.tSysRoleTree.data);
                this.$request({
                    url: '/apm/sys/TSysRole/updateRoleSortList',
                    method: 'post',
                    data: {list: JSON.stringify(list)}
                }).then(response => {
                    this.$message.success(`排序成功！`)
                    this.$refs.popoverRef.doClose();
                    this.loadTreeData();
                })
            },
            filterOrgGroupTreeNode(value, data) {
                if (!value) return true;
                return data.fdName.indexOf(value) !== -1;
            },
            loadGroupType() {
                this.groupTreeData = [];
                this.$request({
                    url: '/apm/sys/TSysRoleOrgGroup/getSysRoleOrgGroupList',
                    method: 'post',
                    data: {
                        roleId: this.selectedRoleId
                    }
                }).then(response => {
                    let orgGroupTypeList = response.data.orgGroupTypeList;
                    this.groupTreeData = convertToTreeData(orgGroupTypeList, {});
                    this.groupCheckedKeys = response.data.roleOrgGroupList;
                })
            },
            saveRoleFunction() {
                let list = [];
                let checkedNodes = this.$refs.orgGroupTree.getCheckedNodes(false);
                for (let i = 0; i < checkedNodes.length; i++) {
                    let node = checkedNodes[i];
                    if (node.fdCode == null) {
                        list.push({
                            fdRoleId: this.selectedRoleId,
                            fdGroupTypeId: node.fdParentId,
                            fdOrgId: node.fdId
                        });
                    }
                }
                return new Promise((resolve, reject) => {
                    this.$request({
                        url: '/apm/sys/TSysRoleOrgGroup/saveRoleOrgGroup',
                        method: 'post',
                        data: {
                            list: JSON.stringify(list),
                            roleId: this.selectedRoleId
                        }
                    }).then(response => {
                        this.$message.success("保存成功！");
                    }).finally(()=>{
                        resolve();
                    });
                });
            }

        }
    }
</script>

<style scoped>
    .tree-title {
        font-weight: bold;
        font-size: 14px;
        line-height: 32px;
        border-bottom: 1px solid #cccccc;
        padding: 2px 10px;
    }
    .tree-node {
        font-size: 14px;
    }
    .layout-aside-content /deep/ .el-tree-node__content {
        height: 20px;
    }
</style>
