<template>
    <el-row>
        <el-col :span="5">
            <company-tree @node-click="nodeClick"></company-tree>
        </el-col>
        <el-col :span="19">
            <basic-container>
                <avue-crud :data="data" :table-loading="loading" :option="option" ref="crud" v-model="form"
                    :permission="permissionList" 
                     @search-change="searchChange"
                    @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
                    @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
                    <template slot="menuLeft">
                        <!--
                            <el-button type="danger" size="small" icon="el-icon-delete" plain @click="handleDelete">删 除
                        </el-button>
                        -->

                        <el-button size="small" icon="el-icon-setting" @click="handleRole" plain>权限设置</el-button>
                    </template>
                </avue-crud>
                <el-dialog title="角色权限配置" append-to-body :visible.sync="box" width="345px">
                    <el-tabs type="border-card">
                        <el-tab-pane label="菜单权限">
                            <el-tree :data="menuGrantList" show-checkbox node-key="id" ref="treeMenu"
                                :default-checked-keys="menuTreeObj" :props="props"></el-tree>
                        </el-tab-pane>
                        <el-tab-pane label="数据权限" v-if="userInfo.role_name !== 'admin'">
                            <el-tree :data="dataScopeGrantList" show-checkbox node-key="id" ref="treeDataScope"
                                :default-checked-keys="dataScopeTreeObj" :props="props"></el-tree>
                        </el-tab-pane>
                        <el-tab-pane label="接口权限" v-if="userInfo.role_name !== 'admin'">
                            <el-tree :data="apiScopeGrantList" show-checkbox node-key="id" ref="treeApiScope"
                                :default-checked-keys="apiScopeTreeObj" :props="props"></el-tree>
                        </el-tab-pane>
                    </el-tabs>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="box = false">取 消</el-button>
                        <el-button type="primary" @click="submit">确 定</el-button>
                    </span>
                </el-dialog>
            </basic-container>
        </el-col>
    </el-row>
</template>
<script>
    import companyTree from "./companyTree";
    import { getList,  grant, grantTree, getRole} from '@/api/manage/role'
    import { mapGetters } from 'vuex'
    export default {
        name: 'roleList',
        components: {
            companyTree
        },
        computed: {
            ...mapGetters(['userInfo']),
            ids() {
                let ids = [];
                this.selectionList.forEach((ele) => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            },
            idsArray() {
                let ids = [];
                this.selectionList.forEach((ele) => {
                    ids.push(ele.id);
                });
                return ids;
            },
        },
        data() {
            return {
                companyId: null,
                tenantId: null,
                box: false,
                selectionList: [],
                menuGrantList: [],
                page: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                query: {

                },
                props: {
                    label: "title",
                    value: "key",
                },
                data: [],
                option: {
                    height: "auto",
                    calcHeight: 186,
                    tip: false,
                    page: true,
                    addBtn: false,
                    delBtn: false,
                    viewBtn: true,
                    editBtn: false,
                    selection: true,
                    searchShow: true,
                    searchMenuSpan: 6,
                    dialogType: "drawer",
                    index: true,
                    indexLabel: '序号',
                    column: [
                        {
                            label: '角色名称',
                            prop: 'roleName',
                            search: true,
                            rules: [
                                {
                                    required: true, message: '请输入角色名称', trigger: 'blur'
                                }
                            ]
                        }, {
                            label: '角色排序',
                            prop: 'sort',
                            type: 'number',
                            rules: [
                                {
                                    required: true, message: '请输入角色排序', trigger: 'blur'
                                }
                            ]
                        }
                    ]
                }
            }
        },
        methods: {
            nodeClick(data) {
                this.companyId = data.data.id;
                this.tenantId = data.data.tenantId;
                this.onLoad(this.page)

            },
            /*权限配置*/
            handleRole() {
                if (this.selectionList.length !== 1) {
                    this.$message.warning("只能选择一条数据");
                    return;
                }
                this.menuTreeObj = [];
                this.dataScopeTreeObj = [];
                this.apiScopeTreeObj = [];
                grantTree().then((res) => {
                    this.menuGrantList = res.data.data.menu;
                    this.dataScopeGrantList = res.data.data.dataScope;
                    this.apiScopeGrantList = res.data.data.apiScope;
                    getRole(this.ids, this.tenantId).then((res) => {
                        this.menuTreeObj = res.data.data.menu;
                        this.dataScopeTreeObj = res.data.data.dataScope;
                        this.apiScopeTreeObj = res.data.data.apiScope;
                        this.box = true;
                    });
                });

            },
            submit() {
                const menuList = this.$refs.treeMenu.getCheckedKeys();

                let dataScopeList = [];
                let apiScopeList = [];
                if (this.userInfo.role_name !== "admin") {
                    dataScopeList = this.$refs.treeDataScope.getCheckedKeys();
                    apiScopeList = this.$refs.treeApiScope.getCheckedKeys();
                }
                grant(this.idsArray, this.tenantId, menuList, dataScopeList, apiScopeList).then(() => {
                    this.box = false;
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    this.onLoad(this.page);
                });
            },
            selectionChange(list) {
                this.selectionList = list;
            },
            selectionClear() {
                this.selectionList = [];
                this.$refs.crud.toggleSelection();
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page, this.query);
            },
            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.page.currentPage = 1;
                this.onLoad(this.page, this.query);
                done();
            },
            onLoad(page, params = {}) {

                if (this.companyId) {
                    this.loading = true;
                    getList(
                        page.currentPage,
                        page.pageSize,
                        Object.assign(this.query, params),
                        this.tenantId,

                    ).then((res) => {
                        const data = res.data.data;
                        this.page.total = data.total;
                        this.data = data;
                        this.loading = false;
                    });
                }
            }
        }

    }
</script>