<template>
    <el-dialog
        title="授权"
        :visible.sync="authorizationDialogVisible"
        :before-close="close"
        :close-on-click-modal="false"
        class="authorization-dialog"
        width="30%"
    >
        <el-scrollbar>
            <el-tree
                :data="data"
                show-checkbox
                node-key="id"
                default-expand-all
                highlight-current
                :props="defaultProps"
                :default-checked-keys="defaultCheckedKey"
                ref="tree"
                @node-click="handleNodeClick"
            ></el-tree>
        </el-scrollbar>
        <div class="footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submit" :disabled="btnLoading">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { toTree } from '@/apps/mobile/utils/util';
import { queryAppMenuPermission, updateAppMenuPermission, queryAppRolePermissionDetail } from '@/apps/mobile/api/authority/index';
export default {
    data() {
        return {
            btnLoading: false,
            defaultCheckedKey: [],
            data: [],
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            authorizationDialogVisible: false,
            roleId: null,
        };
    },
    methods: {
        init() {
            queryAppMenuPermission()
                .then(res => {
                    this.data = res;
                    this.$nextTick(() => {
                        this.getDetail();
                    });
                })
                .catch(() => {});
        },
        getDetail() {
            queryAppRolePermissionDetail(this.roleId)
                .then(res => {
                    this.defaultCheckedKey = [];
                    res.forEach(item => {
                        this.defaultCheckedKey.push(item.id);
                    });
                })
                .catch(() => {});
        },
        submit() {
            let nodeIds = this.$refs.tree.getCheckedKeys();
            let obj = {
                ids: nodeIds,
                levelId: this.roleId,
            };
            updateAppMenuPermission(obj)
                .then(res => {
                    let message = '授权成功';
                    this.completeOperation(message);
                })
                .catch(() => {
                    this.btnLoading = false;
                });
        },
        handleNodeClick(data) {
            console.log(data);
        },
        open(data) {
            this.roleId = data.id;
            this.init();
            this.authorizationDialogVisible = true;
        },
        close() {
            this.authorizationDialogVisible = false;
            this.defaultCheckedKey = [];
        },
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.btnLoading = false;
            this.$emit('queryListData');
        },
    },
};
</script>
<style lang="stylus" scoped>
.authorization-dialog {
    ::v-deep .el-dialog {
        background-color: #fff;
        height: 70%;

        .el-dialog__body {
            height: calc(100% - 54px);
        }

        .el-scrollbar {
            height: 90%;
        }

        .el-scrollbar__wrap {
            overflow-x: hidden;
        }

        .footer {
            float: right;
        }
    }
}
</style>
