<!--角色管理-部门管理组件-->
<template>
    <div class="department-management-pack" :style="{height: viewHeight + 'px'}">
        <div class="operation-pack">
            <el-button
                v-if="Authority.checkedAuthority('/system/role/addDepartment')"
                size="mini"
                type="primary"
                icon="el-icon-plus"
                :disabled="roleTreeNodeClickValue.name === '角色分类'"
                @click="doAddDepartmentManagementClick">
                添加部门
            </el-button>
            <el-button
                v-if="Authority.checkedAuthority('/system/role/deleteDepartment')"
                size="mini"
                type="danger"
                plain icon="el-icon-delete"
                :disabled="roleTreeNodeClickValue.name === '角色分类'"
                @click="doBatchDepartmentManagementDeleteClick">
                批量删除
            </el-button>
        </div>
        <div class="table-pack">
            <el-table
                ref="departmentManagementTable"
                :height="departmentManagementTableHeight"
                tooltip-effect="dark"
                border
                stripe
                empty-text="暂无部门"
                style="width: 100%"
                :data="departmentManagementTableListData"
                @selection-change="onTableSelectChange">
                <el-table-column
                    type="selection"
                    width="35">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    label="部门编码">
                    <template slot-scope="scope">
                        <span>{{scope.row.code !== null ? scope.row.code : '暂无'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    label="部门名称">
                    <template slot-scope="scope">
                        <span>{{scope.row.name !== null ? scope.row.name : '暂无'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    label="人数">
                    <template slot-scope="scope">
                        <span>{{scope.row.memberTotal !== null ? scope.row.memberTotal : '暂无'}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div id="pagination-pack">
                <el-pagination
                    background
                    :total="total"
                    style="text-align: center; margin-top: 12px;"
                    :page-sizes="[20, 50, 100, 200]"
                    layout="prev, pager, next, sizes, jumper"
                    :current-page.sync="currentPage"
                    :page-size.sync="pageSize"
                    @size-change="onSizeChange"
                    @current-change="onCurrentChange">
                </el-pagination>
            </div>
        </div>

        <!--添加部门对话框-->
        <div class="add-department-management-dialog">
            <el-dialog
                title="选择部门"
                :show-close="false"
                :close-on-press-escape="false"
                :close-on-click-modal="false"
                v-drag-dialog
                width="700px"
                :visible.sync="departmentManagementAddDialogToggle">
                <div class="transform-view-pack">
                    <!--树形穿梭框-->
                    <div class="transform-pack">
                        <div class="member-tree-pack">
                            <div class="tip-pack">部门列表</div>
                            <div class="tree-pack">
                                <el-tree
                                    node-key="id"
                                    :data="memberTreeData"
                                    show-checkbox
                                    @check="onMemberTreeCheck"
                                    ref="memberCheckTree"
                                    :props="memberTreeProps"
                                    :check-strictly="true">
                                </el-tree>
                            </div>
                        </div>
                        <div class="member-select-pack">
                            <div class="tip-pack">已选部门</div>
                            <div class="tree-pack">
                                <div class="member-select-view-pack" v-if="selectDepartment.length > 0">
                                    <div class="member-select-item-pack" :key="index" v-for="(item, index) in selectDepartment">
                                        <div class="member-select-item-label-pack">
                                            <svg-icon icon-class="department"></svg-icon>
                                            {{item.name}}
                                        </div>
                                        <div class="member-select-item-delete-pack">
                                            <el-button type="text" @click="doSelectMemberDeleteClick(item.id)">移除</el-button>
                                        </div>
                                    </div>
                                </div>
                                <div class="no-message" v-else>请选择左侧列表数据</div>
                            </div>
                        </div>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button
                        type="primary"
                        icon="el-icon-check"
                        size="mini"
                        :loading="loadingToggle"
                        @click="doAddDepartmentManagementDialogConfirmClick">
                        确 定
                    </el-button>
                    <el-button
                        icon="el-icon-close"
                        size="mini"
                        @click="doAddDepartmentManagementDialogCancelClick">
                        取 消
                    </el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import dragDialog from '@/directive/dragDialog';

    export default {
        directives: {
            dragDialog
        },
        data () {
            return {
                // 提交按钮状态标识
                loadingToggle: false,
                // 选择部门对话框开关标识
                departmentManagementAddDialogToggle: false,
                // 部门删除id
                ids: [],
                // 部门管理表格高度
                departmentManagementTableHeight: 0,
                // 部门管理列表数据
                departmentManagementTableListData: [],
                // 部门管理数据量
                total: 0,
                // 当前分页页数
                currentPage: 1,
                // 当前分页数量
                pageSize: 20,
                // 成员树结构数据
                memberTreeData: [],
                // 人员树已选中的人员
                selectDepartment: [],
                // 成员树props
                memberTreeProps: {label: 'name', children: 'children', disabled: 'disabled'}
            }
        },
        methods: {
            /*------------------------------树组件穿梭框------------------------------*/
            // 触发成员树复选框事件
            onMemberTreeCheck () {
                let memberSelect = this.$refs.memberCheckTree.getCheckedNodes();
                this.selectDepartment = [];
                for (let item of memberSelect) {
                    this.selectDepartment.push(item);
                };
            },
            // 点击已选择成员移除按钮
            doSelectMemberDeleteClick (memberId) {
                this.$refs.memberCheckTree.setChecked(memberId, false);
                // 触发成员树复选框事件
                this.onMemberTreeCheck();
            },
            /*------------------------------树组件穿梭框结束------------------------------*/
            // 触发表格多选事件
            onTableSelectChange (selectValue) {
                this.ids = [];
                for (let item of selectValue) {
                    this.ids.push(item.id);
                };
            },
            // 触发分页数量改变事件
            onSizeChange () {
                this.currentPage = 1;
                // 获取角色对应的用户组列表
                this.getUserGroupListByRoleId();
            },
            // 触发分页页数改变事件
            onCurrentChange () {
                // 获取角色对应的用户组列表
                this.getUserGroupListByRoleId();
            },
            // 获取角色对应的用户组列表
            getUserGroupListByRoleId () {
                let queryParams = {
                    roleId: this.roleTreeNodeClickValue.id,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize
                };
                this.$store.dispatch('Role/getUserGroupListByRoleId', queryParams).then((response) => {
                    if (response.list.length === 0 && response.pageNum !== 1) {
                        this.currentPage -= 1;
                        // 获取角色对应的用户组列表
                        this.getUserGroupListByRoleId();
                    } else {
                        this.departmentManagementTableListData = _.cloneDeep(response.list);
                        this.total = _.cloneDeep(response.total);
                    };
                }).catch((response) => {});
            },
            // 获取用户组列表
            geDepartmentLine () {
                let queryParams = {
                    roleId: this.roleTreeNodeClickValue.id
                };
                this.$store.dispatch('Role/getUserGroupTreeList', queryParams).then((response) => {
                    this.memberTreeData = _.cloneDeep(response);
                }).catch((response) => {});
            },
            // 点击部门管理批量删除按钮
            doBatchDepartmentManagementDeleteClick () {
                if (this.ids.length <= 0) {
                    this.$message.warning('请选择要删除的选项！');
                } else {
                    this.$confirm('确定要删除当前选项吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true,
                        closeOnClickModal: false,
                        closeOnPressEscape: false
                    }).then(() => {
                        let queryParams = {
                            roleId: this.roleTreeNodeClickValue.id,
                            groupList: this.ids
                        };
                        this.$store.dispatch('Role/batchDeleteUserGroupListForRole', queryParams).then((response) => {
                            this.$message.success('删除成功!');
                            // 获取角色对应的用户组列表
                            this.getUserGroupListByRoleId();
                        }).catch((response) => {});
                    }).catch(() => {});
                }
            },
            // 点击添加部门按钮
            doAddDepartmentManagementClick () {
                if (this.roleTreeNodeClickValue.name === '角色分类') {
                    this.$message.warning('此角色不可添加部门！');
                } else {
                    this.departmentManagementAddDialogToggle = true;
                    // 获取用户组列表
                    this.geDepartmentLine();
                };
            },
            // 点击选择部门对话框确认按钮
            doAddDepartmentManagementDialogConfirmClick () {
                if (this.selectDepartment.length <= 0) {
                    this.$message.warning('已选列表不能为空！');
                } else {
                    this.loadingToggle = true;
                    let groupList = [];
                    for (let item of this.selectDepartment) {
                        groupList.push(item.id)
                    };
                    let queryParams = {
                        roleId: this.roleTreeNodeClickValue.id,
                        groupList: groupList
                    };
                    this.$store.dispatch('Role/addUserGroupListForRole', queryParams).then((response) => {
                        this.loadingToggle = false;
                        this.$message.success('添加成功！');
                        this.memberTreeData = [];
                        this.selectDepartment = [];
                        this.departmentManagementAddDialogToggle = false;
                        // 获取角色对应的用户组列表
                        this.getUserGroupListByRoleId();
                    }).catch((response) => {
                        this.loadingToggle = false;
                    })
                }
            },
            // 点击选择部门对话框取消按钮
            doAddDepartmentManagementDialogCancelClick () {
                this.departmentManagementAddDialogToggle = false;
                this.memberTreeData = [];
                this.selectDepartment = [];
            }
        },
        props: {
            viewHeight: {
                type: Number,
                required: true
            },
            roleTreeNodeClickValue: {
                type: Object,
                required: true
            }
        },
        watch: {
            viewHeight (value) {
                // 部门管理表格高度赋值
                this.departmentManagementTableHeight = value - 114;
            },
            roleTreeNodeClickValue (value) {
                // 获取角色对应的用户组列表
                this.getUserGroupListByRoleId();
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '@/styles/System/Role/departmentManagement.scss';
</style>
