<!--角色管理-数据权限组件-->
<template>
    <div class="data-authority-pack" :style="{height: viewHeight + 'px'}">
        <!--<div class="tip-pack">{{roleTreeNodeClickValue.name}}</div>-->
        <div class="operation-pack">
            <el-button
                v-if="Authority.checkedAuthority('/system/role/addDataAuthority')"
                size="mini"
                type="primary"
                icon="el-icon-plus"
                :disabled="roleTreeNodeClickValue.name === '角色分类'"
                @click="doAddDataAuthorityClick">
                添加权限
            </el-button>
            <el-button
                v-if="Authority.checkedAuthority('/system/role/deleteDataAuthority')"
                size="mini"
                type="danger"
                plain icon="el-icon-delete"
                :disabled="roleTreeNodeClickValue.name === '角色分类'"
                @click="doBatchDataAuthorityDeleteClick">
                批量删除
            </el-button>
        </div>
        <div class="table-pack">
            <el-table
                ref="dataAuthorityTable"
                :height="dataAuthorityTableHeight"
                tooltip-effect="dark"
                border
                stripe
                empty-text="暂无数据"
                style="width: 100%"
                :data="dataAuthorityTableListData"
                @selection-change="onTableSelectChange">
                <el-table-column
                    type="selection"
                    width="35">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    label="编号"
                    width="100">
                    <template slot-scope="scope">
                        <span>
                            {{scope.row.id !== null ? scope.row.id : '暂无'}}
                        </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.type !== null ? typeJudge(scope.row.type) : '暂无'}}
                        </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="data-authority-add-dialog">
            <el-dialog
                title="选择数据权限"
                :show-close="false"
                :close-on-press-escape="false"
                :close-on-click-modal="false"
                v-drag-dialog
                :visible.sync="dataAuthorityAddDialogToggle"
                width="700px">
                <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="customizeId"
                                    :data="memberTreeData"
                                    show-checkbox
                                    @check="onMemberTreeCheck"
                                    ref="memberCheckTree"
                                    :props="memberTreeProps"
                                    lazy
                                    :load="onMemberTreeLoad"
                                    :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="selectDataAuthority.length > 0">
                                    <div class="member-select-item-pack" :key="index" v-for="(item, index) in selectDataAuthority">
                                        <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>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button
                        type="primary"
                        @click="doAddDataAuthorityDialogConfirmClick"
                        icon="el-icon-check"
                        size="mini"
                        :loading="loadingToggle">
                        确 定
                    </el-button>
                    <el-button
                        @click="doAddDataAuthorityDialogCancelClick"
                        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 {
                // 数据权限删除id
                ids: [],
                // 数据权限列表数据
                dataAuthorityTableListData: [],
                // 数据权限列表高度
                dataAuthorityTableHeight: 0,
                // 当前分页页数
                currentPage: 1,
                // 当前分页数量
                pageSize: 20,
                // 数据权限数据量
                total: 0,
                // 选择数据权限对话框开关标识
                dataAuthorityAddDialogToggle: false,
                // 提交按钮状态标识
                loadingToggle: false,
                // 成员树结构数据
                memberTreeData: [],
                // 人员树已选中的人员
                selectDataAuthority: [],
                // 成员树props
                memberTreeProps: {label: 'name', children: 'children', disabled: 'disabled'}
            }
        },
        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/getDataAuthTreeList', queryParams).then((response) => {
                            let groupListData = _.cloneDeep(response[0].children);
                            let userListData = _.clone(response[0].userList);
                            let memberTreeLisData = [];// 处理部门数据
                            for (let item of groupListData) {
                                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.selectDataAuthority = [];
                for (let item of memberSelect) {
                    this.selectDataAuthority.push(item);
                };
            },
            // 点击已选择成员移除按钮
            doSelectMemberDeleteClick (memberId) {
                this.$refs.memberCheckTree.setChecked(memberId, false);
                // 触发成员树复选框事件
                this.onMemberTreeCheck();
            },
            /*------------------------------树组件穿梭框结束------------------------------*/
            // 点击添加权限按钮
            doAddDataAuthorityClick () {
                if (this.roleTreeNodeClickValue.name === '角色分类') {
                    this.$message.warning('此角色不可添加数据权限！');
                } else {
                    this.dataAuthorityAddDialogToggle = true;
                    // 获取用户组树
                    this.getUserTreeList();
                }
            },
            // 点击批量删除按钮
            doBatchDataAuthorityDeleteClick () {
                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,
                            dataAuthorityIdList: this.ids
                        };
                        this.$store.dispatch('Role/batchDeleteDataAuthorityForRole', queryParams).then((response) => {
                            this.$message.success('删除成功！');
                            // 获取角色拥有的权限列表
                            this.getDataPermissionListForRole();
                        }).catch(() => {});
                    }).catch(() => {})
                }
            },
            // 触发分页数量改变事件
            onSizeChange () {
                this.currentPage = 1;
                // 获取角色拥有的权限列表
                this.getDataPermissionListForRole();
            },
            // 触发分页页数改变事件
            onCurrentChange () {
                // 获取角色拥有的权限列表
                this.getDataPermissionListForRole();
            },
            // 触发表格多选事件
            onTableSelectChange (selectValue) {
                this.ids = [];
                for (let item of selectValue) {
                    this.ids.push(item.id);
                };
            },
            // 获取用户组树
            getUserTreeList () {
                let queryParams = {
                    roleId: this.roleTreeNodeClickValue.id,
                    groupId: ''
                };
                this.$store.dispatch('Role/getDataAuthTreeList', queryParams).then((response) => {
                    let memberTreeData = _.cloneDeep(response);
                    this.memberTreeData = memberTreeData;
                }).catch((response) => {});
            },
            // 获取角色拥有的权限列表
            getDataPermissionListForRole () {
                let queryParams = {
                    roleId: this.roleTreeNodeClickValue.id,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize
                };
                this.$store.dispatch('Role/getDataPermissionListForRole', queryParams).then((response) => {
                    if (response.list.length === 0 && response.pageNum !== 1) {
                        this.currentPage -= 1;
                        // 获取角色拥有的权限列表
                        this.getDataPermissionListForRole();
                    } else {
                        this.dataAuthorityTableListData = _.cloneDeep(response.list);
                        this.total = _.cloneDeep(response.total);
                    };
                }).catch(() => {});
            },
            // 点击选择数据权限对话框确认按钮
            doAddDataAuthorityDialogConfirmClick () {
                if (this.selectDataAuthority.length <= 0) {
                    this.$message.warning('已选列表不能为空！');
                } else {
                    this.loadingToggle = true;
                    // 成员、成员组分组，调用不同的接口
                    let groupIdList = [];
                    let userIdList = [];
                    let submitSuccess = false;
                    for (let item of this.selectDataAuthority) {
                        if (item.tag === 'Group') {
                            groupIdList.push(item.id);
                        } else {
                            userIdList.push(item.id);
                        }
                    };
                    // 新增成员组列表
                    let queryParams = {
                        roleId: this.roleTreeNodeClickValue.id,
                        groupIdList: groupIdList,
                        userIdList: userIdList
                    };
                    this.$store.dispatch('Role/addDataAuthorityListForRole', queryParams).then((resepone) => {
                        this.loadingToggle = false;
                        this.$message.success('添加成功！');
                        this.memberTreeData = [];
                        this.selectDataAuthority = [];
                        this.dataAuthorityAddDialogToggle = false;
                        // 获取角色拥有的权限列表
                        this.getDataPermissionListForRole();
                    }).catch((response) => {
                        this.loadingToggle = false;
                    })
                }
            },
            // 点击选择数据权限对话框取消按钮
            doAddDataAuthorityDialogCancelClick () {
                this.dataAuthorityAddDialogToggle = false;
                this.memberTreeData = [];
                this.selectDataAuthority = [];
            },
            // 判断类型（成员、部门）
            typeJudge (type) {
                if (type === 'GROUP') {
                    return '部门';
                } else {
                    return '成员';
                }
            }
        },
        props: {
            viewHeight: {
                type: Number,
                required: true
            },
            roleTreeNodeClickValue: {
                type: Object,
                required: true
            }
        },
        watch: {
            filterText (value) {
                this.$refs.memberCheckTree.filter(value);
            },
            viewHeight (value) {
                // 数据权限表格高度赋值
                this.dataAuthorityTableHeight = value - 114;
            },
            roleTreeNodeClickValue (value) {
                // 获取角色拥有的权限列表
                this.getDataPermissionListForRole();
                this.selectDataAuthority = [];
            }
        }
    }
</script>

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