<!--角色管理-成员管理组件-->
<template>
    <div class="member-management-pack" :style="{height: viewHeight + 'px'}">
        <!--<div class="tip-pack">{{roleTreeNodeClickValue.name}}</div>-->
        <div class="operation-pack">
            <el-button
                v-if="Authority.checkedAuthority('/system/role/addMember')"
                size="mini"
                type="primary"
                icon="el-icon-plus"
                :disabled="roleTreeNodeClickValue.name === '角色分类'"
                @click="doAddMemberClick">
                添加成员
            </el-button>
            <el-button
                v-if="Authority.checkedAuthority('/system/role/deleteMember')"
                size="mini"
                type="danger"
                plain icon="el-icon-delete"
                :disabled="roleTreeNodeClickValue.name === '角色分类'"
                @click="doBatchMemberDeleteClick">
                批量删除
            </el-button>
        </div>
        <div class="table-pack">
            <el-table
                ref="roleTable"
                :height="roleTableHeight"
                tooltip-effect="dark"
                border
                stripe
                empty-text="暂无成员"
                style="width: 100%"
                :data="roleTableListData"
                @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.name !== null ? scope.row.name : '暂无'}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    label="职位">
                    <template slot-scope="scope">
                        <span>
                            {{scope.row.post !== null ? scope.row.post : '暂无'}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    label="工号">
                    <template slot-scope="scope">
                        <span>
                            {{scope.row.no !== null ? scope.row.no : '暂无'}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    label="手机">
                    <template slot-scope="scope">
                        <span>
                            {{scope.row.contact !== null ? scope.row.contact : '暂无'}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    label="邮箱">
                    <template slot-scope="scope">
                        <span>
                            {{scope.row.email !== null ? scope.row.email : '暂无'}}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <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 class="member-add-dialog">
            <el-dialog
                title="选择成员"
                :visible.sync="addMemberDialogToggle"
                :show-close="false"
                :close-on-press-escape="false"
                :close-on-click-modal="false"
                v-drag-dialog
                width="700px">

                <!--树形穿梭框-->
                <div class="transform-pack">
                    <div class="member-tree-pack">
                        <div class="tip-pack">成员列表</div>
                        <div class="tree-pack">
                            <el-tree
                                style="height: 100%"
                                node-key="customizeId"
                                :data="memberTreeData"
                                show-checkbox
                                @check="onMemberTreeCheck"
                                ref="memberCheckTree"
                                :props="memberTreeProps"
                                lazy
                                :load="onMemberTreeLoad">
                            </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="selectMembers.length > 0">
                                <div class="member-select-item-pack" :key="index" v-for="(item, index) in selectMembers">
                                    <div class="member-select-item-label-pack" v-if="item.tag === 'Group'">
                                        <svg-icon icon-class="department"></svg-icon>
                                        {{item.name}}
                                    </div>
                                    <div class="member-select-item-label-pack" v-if="item.tag !== 'Group'">
                                        <svg-icon icon-class="user"></svg-icon>
                                        {{item.name}} - {{item.groupName}}
                                    </div>
                                    <div class="member-select-item-delete-pack">
                                        <el-button type="text" @click="doSelectMemberDeleteClick(item.customizeId)">移除</el-button>
                                    </div>
                                </div>
                            </div>
                            <div class="no-message" v-else>请选择左侧成员</div>
                        </div>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button
                        type="primary"
                        @click="doAddMemberDialogConfirmClick"
                        icon="el-icon-check"
                        size="mini"
                        :loading="loadingToggle">
                        确 定
                    </el-button>
                    <el-button
                        @click="doAddMemberDialogCancelClick"
                        icon="el-icon-close"
                        size="mini">
                        取 消
                    </el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

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

    export default {
        directives: {
            dragDialog
        },
        data () {
            return {
                // 提交按钮状态标识
                loadingToggle: false,
                // 成员树props
                memberTreeProps: {label: 'name', children: 'children', disabled: 'disabled'},
                // 成员树结构数据
                memberTreeData: [],
                // 人员树筛选字段
                filterText: '',
                // 人员树已选中的人员
                selectMembers: [],
                // 人员树是否全选标识
                checkTotalJudge: false,
                // 选择人员dialog开关
                addMemberDialogToggle: false,
                // 成员删除id
                ids: [],
                // 当前分页页数
                currentPage: 1,
                // 当前分页数量
                pageSize: 20,
                // 成员表格数据量
                total: 0,
                // 成员表格高度
                roleTableHeight: 0,
                // 成员表格数据
                roleTableListData: []
            }
        },
        methods: {
            /*------------------------------树组件穿梭框------------------------------*/
            // 触发成员树懒加载事件
            onMemberTreeLoad (node, resolve) {
                if (node.level === 0) {
                    resolve([]);
                } else {
                    if (node.data.tag === 'Group') {
                        let queryParams = {
                            roleId: this.roleTreeNodeClickValue.id,
                            groupId: node.data.id
                        };
                        this.$store.dispatch('Role/getUserTreeList', queryParams).then((response) => {
                            let groupListData = _.cloneDeep(response[0].children);
                            let userListData = _.clone(response[0].userList);
                            let memberTreeLisData = [];
                            // 处理部门数据
                            for (let item of groupListData) {
                                item.disabled = true;
                                item.customizeId = item.id;
                            };
                            // 处理成员数据
                            for (let item of userListData) {
                                item.customizeId = `${item.groupId}-${item.id}`
                            };
                            memberTreeLisData = groupListData.concat(userListData);
                            resolve(memberTreeLisData);
                        }).catch((response) => {});
                    } else {
                        resolve([]);
                    }
                }
            },
            // 触发成员树复选框事件
            onMemberTreeCheck () {
                let memberSelect = this.$refs.memberCheckTree.getCheckedNodes();
                this.selectMembers = [];
                for (let item of memberSelect) {
                    if (item.tag !== 'Group') {
                        this.selectMembers.push(item);
                    }
                };
            },
            // 点击已选择成员移除按钮
            doSelectMemberDeleteClick (memberId) {
                this.$refs.memberCheckTree.setChecked(memberId, false);
                // 触发成员树复选框事件
                this.onMemberTreeCheck();
            },
            /*------------------------------树组件穿梭框结束------------------------------*/
            // 触发分页数量改变事件
            onSizeChange () {
                this.currentPage = 1;
                // 根据角色ID获取用户列表
                this.getUserListByRoleId()
            },
            // 触发分页页数改变事件
            onCurrentChange () {
                // 根据角色ID获取用户列表
                this.getUserListByRoleId()
            },
            // 触发表格多选事件
            onTableSelectChange (selectValue) {
                this.ids = [];
                for (let item of selectValue) {
                    this.ids.push(item.id);
                };
            },
            // 点击添加成员按钮
            doAddMemberClick () {
                if (this.roleTreeNodeClickValue.name === '角色分类') {
                    this.$message.warning('此角色不可添加成员！');
                } else {
                    this.addMemberDialogToggle = true;
                    // 获取用户组树
                    this.getUserTreeList();
                }
            },
            // 点击选择成员对话框确定按钮
            doAddMemberDialogConfirmClick () {
                if (this.selectMembers.length <= 0) {
                    this.$message.warning('已选成员列表不能为空！');
                } else {
                    this.loadingToggle = true;
                    let userIdList = [];
                    for (let item of this.selectMembers) {
                        userIdList.push(item.id);
                    };
                    let queryParams = {
                        roleId: this.roleTreeNodeClickValue.id,
                        userIdList: userIdList
                    };
                    this.$store.dispatch('Role/addUserListForRole', queryParams).then((response) => {
                        this.loadingToggle = false;
                        this.$message.success('添加成功！');
                        this.addMemberDialogToggle = false;
                        this.memberTreeData = [];
                        this.selectMembers = [];
                        // 根据角色ID获取用户列表
                        this.getUserListByRoleId();
                    }).catch((response) => {});
                }
            },
            // 点击选择成员对话框取消按钮
            doAddMemberDialogCancelClick () {
                this.addMemberDialogToggle = false;
                this.selectMembers = [];
                this.memberTreeData = [];
            },
            // 根据角色ID获取用户列表
            getUserListByRoleId () {
                let queryParams = {
                    roleId: this.roleTreeNodeClickValue.id,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize
                };
                this.$store.dispatch('Role/getUserListByRoleId', queryParams).then((response) => {
                    if (response.list.length === 0 && response.pageNum !== 1) {
                        this.currentPage -= 1;
                        // 根据角色ID获取用户列表
                        this.getUserListByRoleId();
                    } else {
                        this.roleTableListData = _.cloneDeep(response.list);
                        this.total = _.cloneDeep(response.total);
                    };
                }).catch((response) => {});
            },
            // 点击角色下成员列表批量删除按钮
            doBatchMemberDeleteClick () {
                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,
                            userIdList: this.ids
                        };
                        this.$store.dispatch('Role/batchDeleteMemberByRole', queryParams).then((response) => {
                            this.$message.success('删除成功！');
                            // 根据角色ID获取用户列表
                            this.getUserListByRoleId();
                        })
                    }).catch(() => {})
                }
            },
            // 获取用户组树
            getUserTreeList () {
                let queryParams = {
                    roleId: this.roleTreeNodeClickValue.id,
                    groupId: ''
                };
                this.$store.dispatch('Role/getUserTreeList', queryParams).then((response) => {
                    let memberTreeData = _.cloneDeep(response);
                    for (let item of memberTreeData) {
                        if (item.tag === 'Group') {
                            item.disabled = true;
                        } else {
                            item.disabled = false;
                        }
                    };
                    this.memberTreeData = memberTreeData;
                }).catch((response) => {});
            }
        },
        props: {
            viewHeight: {
                type: Number,
                required: true
            },
            roleTreeNodeClickValue: {
                type: Object,
                required: true
            }
        },
        mounted () {
            let timer = setTimeout(() => {}, 0)
        },
        watch: {
            viewHeight (value) {
                // 成员表格高度赋值
                this.roleTableHeight = value - 114;
            },
            roleTreeNodeClickValue (value) {
                // 查询有某个角色的所有用户列表
                this.getUserListByRoleId(value.id);
            },
            filterText (value) {
                this.$refs.memberCheckTree.filter(value);
            }
        }
    }
</script>

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