<!--角色管理页面-->
<template>
    <div class="role-page">
        <div class="left-pack">
            <div class="title-pack">角色管理</div>
            <div class="search-pack">
                <el-input
                    placeholder="输入名称进行过滤"
                    prefix-icon="el-icon-search"
                    v-model="filterText"
                    clearable>
                </el-input>
            </div>
            <div class="org-pack">
                <el-tree
                    empty-text="暂无角色"
                    :data="roleDataList"
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false"
                    :highlight-current="true"
                    :filter-node-method="filterNode"
                    ref="roleTree"
                    :props="treeProps"
                    @node-click="doRoleTreeClick">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{data.name}}</span>
                        <span style="margin-left: 20px">
                            <el-button
                                type="text"
                                size="mini"
                                v-if="data.name === '角色分类' && Authority.checkedAuthority('/system/role/addRole')"
                                @click="doRoleTreeAddClick">
                                新增
                            </el-button>
                            <el-button
                                type="text"
                                size="mini"
                                v-if="data.name !== '角色分类' && data.roleType !== 'SYSTEM' && Authority.checkedAuthority('/system/role/editRole')"
                                @click="doRoleTreeEditClick(data)">
                                编辑
                            </el-button>
                            <el-button
                                type="text"
                                size="mini"
                                v-if="data.name !== '角色分类' && data.roleType !== 'SYSTEM' && Authority.checkedAuthority('/system/role/deleteRole')"
                                style="color: #f56c6c"
                                @click="doRoleTreeDeleteClick(data)">
                                删除
                            </el-button>
                        </span>
                    </span>
                </el-tree>
            </div>
        </div>
        <div class="right-pack">
            <el-tabs type="card" v-model="tabItem">
                <el-tab-pane label="成员管理" name="memberManagement">
                    <MemberManagement :viewHeight="rightViewPackHeight" :roleTreeNodeClickValue="roleTreeNodeClickValue"></MemberManagement>
                </el-tab-pane>
                <el-tab-pane label="部门管理" name="departmentManagement">
                    <DepartmentManagement :viewHeight="rightViewPackHeight" :roleTreeNodeClickValue="roleTreeNodeClickValue"></DepartmentManagement>
                </el-tab-pane>
                <el-tab-pane label="功能权限" name="featuresAuthority">
                    <FeaturesAuthority :viewHeight="rightViewPackHeight" :roleTreeNodeClickValue="roleTreeNodeClickValue"></FeaturesAuthority>
                </el-tab-pane>
                <el-tab-pane label="数据权限" name="dataAuthority">
                    <DataAuthority :viewHeight="rightViewPackHeight" :roleTreeNodeClickValue="roleTreeNodeClickValue"></DataAuthority>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!--新增角色对话框-->
        <div class="role-add-form-pack">
            <el-dialog
                title="新增角色"
                :visible.sync="addRoleDialogToggle"
                :show-close="false"
                :close-on-press-escape="false"
                :close-on-click-modal="false"
                v-drag-dialog
                width="400px">
                <el-form
                    :model="addRoleForm"
                    ref="addRoleForm"
                    label-position="top"
                    label-width="150px"
                    :rules="memberRoles">
                    <el-form-item label="角色编码" required prop="code">
                        <el-input
                            :maxlength="50"
                            placeholder="请输入角色编码"
                            v-model="addRoleForm.code">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="角色名称" required prop="name">
                        <el-input
                            :maxlength="100"
                            placeholder="请输入角色名称"
                            v-model="addRoleForm.name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="当前角色类型" required>
                        <el-select
                            :maxlength="20"
                            placeholder="系统默认角色/自定义角色"
                            value="自定义角色"
                            disabled>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button
                        type="primary"
                        @click="doAddRoleDialogConfirmClick('addRoleForm')"
                        icon="el-icon-check"
                        size="mini"
                        :loading="loadingToggle">
                        确 定
                    </el-button>
                    <el-button
                        @click="doAddRoleDialogCancelClick('addRoleForm')"
                        icon="el-icon-close"
                        size="mini">
                        取 消
                    </el-button>
                </span>
            </el-dialog>
        </div>

        <!--编辑角色对话框-->
        <div class="role-edit-form-pack">
            <el-dialog
                title="编辑角色"
                :visible.sync="editRoleDialogToggle"
                :show-close="false"
                :close-on-press-escape="false"
                :close-on-click-modal="false"
                v-drag-dialog
                width="400px">
                <el-form
                    :model="editRoleForm"
                    ref="editRoleForm"
                    label-position="top"
                    label-width="150px"
                    :rules="memberRoles">
                    <el-form-item label="角色编码" required prop="code">
                        <el-input
                            :maxlength="50"
                            placeholder="请输入角色编码"
                            v-model="editRoleForm.code"
                            disabled>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="角色名称" required prop="name">
                        <el-input
                            :maxlength="100"
                            placeholder="请输入角色名称"
                            v-model="editRoleForm.name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="当前角色类型" required>
                        <el-select
                            :maxlength="20"
                            placeholder="系统默认/自定义"
                            disabled
                            v-model="editRoleForm.roleType">
                            <el-option
                                label="系统默认角色"
                                value="SYSTEM">
                            </el-option>
                            <el-option
                                label="自定义角色"
                                value="CUSTOM">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button
                        type="primary"
                        @click="doEditRoleDialogConfirmClick('editRoleForm')"
                        icon="el-icon-check"
                        size="mini"
                        :loading="loadingToggle">
                        确 定
                    </el-button>
                    <el-button
                        @click="doAEditRoleDialogCancelClick('editRoleForm')"
                        icon="el-icon-close"
                        size="mini">
                        取 消
                    </el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import MemberManagement from './components/MemberManagement';
    import FeaturesAuthority from './components/FeaturesAuthority';
    import DataAuthority from './components/DataAuthority';
    import DepartmentManagement from './components/DepartmentManagement';
    import dragDialog from '@/directive/dragDialog';

    export default {
        name: 'Role',
        components: {
            MemberManagement,
            FeaturesAuthority,
            DataAuthority,
            DepartmentManagement
        },
        directives: {
            dragDialog
        },
        data () {
            return {
                // 成员树点击节点数据
                roleTreeNodeClickValue: {},
                // 角色编辑id
                roleEditId: '',
                // 提交按钮状态标识
                loadingToggle: false,
                // 新增角色对话框开关
                addRoleDialogToggle: false,
                // 编辑角色对话框开关
                editRoleDialogToggle: false,
                // 树配置
                treeProps: {label: 'name', children: 'children'},
                // 右侧操作区域高度
                rightViewPackHeight: 0,
                // tab栏标识字段
                tabItem: 'memberManagement',
                // 搜索关键字
                filterText: '',
                // 角色管理列表
                roleDataList: [{id: 0, name: '角色分类', children: []}],
                // 新增角色表单
                addRoleForm: {
                    code: '',
                    name: ''
                },
                // 编辑角色表单
                editRoleForm: {
                    name: '',
                    code: '',
                    roleType: ''
                },
                // 角色表单验证规则
                memberRoles: {
                    // 角色编码
                    code: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('角色编码不能为空'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 角色名称
                    name: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('角色名称不能为空'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ]
                }
            }
        },
        methods: {
            // 树组件查询
            filterNode (value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            // 查询所有角色信息
            getRoleList () {
                this.$store.dispatch('Role/getRoleList').then((response) => {
                    this.roleDataList[0].children = _.cloneDeep(response);
                    this.$refs.roleTree.setCurrentKey(0);
                    this.roleTreeNodeClickValue = this.$refs.roleTree.getCurrentNode();
                }).catch((response) => {});
            },
            // 点击角色树新增按钮
            doRoleTreeAddClick () {
                this.addRoleDialogToggle = true;
            },
            // 点击新增角色对话框确定按钮
            doAddRoleDialogConfirmClick (formName) {
                this.$refs[formName].validate((vaild) => {
                    if (vaild) {
                        let queryParams = this.addRoleForm;
                        this.loadingToggle = true;
                        this.$store.dispatch('Role/addRole', queryParams).then((response) => {
                            this.$message.success('新增成功！');
                            this.loadingToggle = false;
                            for (let key in this.addRoleForm) {
                                this.addRoleForm[key] = '';
                            };
                            // 清空表单
                            this.$refs[formName].resetFields();
                            this.addRoleDialogToggle = false;
                            // 查询所有角色信息
                            this.getRoleList();
                        }).catch((response) => {
                            this.loadingToggle = false;
                        });
                    }
                })
            },
            // 点击新增角色对话框取消按钮
            doAddRoleDialogCancelClick () {
                this.addRoleDialogToggle = false;
            },
            // 点击角色树编辑按钮
            doRoleTreeEditClick (roleValue) {
                this.roleEditId = roleValue.id;
                this.editRoleDialogToggle = true;
                for (let key in roleValue) {
                    if (this.editRoleForm.hasOwnProperty(key)) {
                        this.editRoleForm[key] = roleValue[key];
                    }
                };
            },
            // 点击编辑角色对话框确定按钮
            doEditRoleDialogConfirmClick (formName) {
                this.$refs[formName].validate((vaild) => {
                    if (vaild) {
                        let queryParams = this.editRoleForm;
                        queryParams.id = this.roleEditId;
                        queryParams.roleType = 'CUSTOM ';
                        this.loadingToggle = true;
                        this.$store.dispatch('Role/editRole', queryParams).then((response) => {
                            this.$message.success('编辑成功！');
                            this.loadingToggle = false;
                            for (let key in this.editRoleForm) {
                                this.editRoleForm[key] = '';
                            };
                            // 清空表单
                            this.$refs[formName].resetFields();
                            this.editRoleDialogToggle = false;
                            // 查询所有角色信息
                            this.getRoleList();
                        }).catch((response) => {
                            this.loadingToggle = false;
                        })
                    }
                })
            },
            // 点击编辑角色对话框取消按钮
            doAEditRoleDialogCancelClick () {
                this.editRoleDialogToggle = false;
            },
            // 点击角色树删除按钮
            doRoleTreeDeleteClick (roleValue) {
                this.$confirm('确定要删除当前角色吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true,
                    closeOnClickModal: false,
                    closeOnPressEscape: false
                }).then(() => {
                    let queryParams = {
                        roleId: roleValue.id
                    };
                    this.$store.dispatch('Role/deleteRole', queryParams).then((response) => {
                        this.$message.success('删除成功！');
                        // 查询所有角色信息
                        this.getRoleList();
                    })
                }).catch(() => {})
            },
            // 触发角色树点击事件
            doRoleTreeClick (treeNode) {
                this.roleTreeNodeClickValue = _.cloneDeep(treeNode);
            }
        },
        mounted () {
            let timer = setTimeout(() => {
                let rightViewPackHeight = document.querySelector('.role-page').offsetHeight - 41;
                this.rightViewPackHeight = rightViewPackHeight;
                // 查询所有角色信息
                this.getRoleList();
            }, 0)
        },
        watch: {
            // 树组件查询
            filterText (val) {
                this.$refs.roleTree.filter(val);
            }
        },
        destroyed () {
            clearTimeout();
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    @import "@/styles/System/Role/role.scss";
</style>
