<template>
    <el-dialog
        id="userMenu"
        width="30%"
        :title="editMenu.title"
        :visible.sync="editMenu.editDialogVisible"
        append-to-body
        :before-close="handleClose"
        @open="open"
        :close-on-click-modal="false"
    >
        <el-tree
            :props="props1"
            :show-checkbox="true"
            default-expand-all
            node-key="id"
            ref="tree"
            :data="menuList"
            @check="handleCheckChange"
            highlight-current
            v-loading="loading"
        >
        </el-tree>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleClose" :disabled="saving">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="saving">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'userMenu',
    props: ['editMenu'],
    data: function() {
        return {
            loading: false,
            menuList: [],
            checkedId: [],
            checkedTreeId: [],
            props1: {
                label: 'name',
                children: 'children'
            },
            saving: false
        };
    },
    components: {},
    methods: {
        open() {
            this.queryMenu();
        },
        queryMenu() {
            this.$http
                .get('/menu/allUserMenu', { authorityName: this.editMenu.roleId })
                .then(res => {
                    this.checkedId = [];
                    this.menuList = res.menuList;
                    this.checkedId = res.menuId;
                    if (this.checkedId != undefined && this.checkedId.length > 0) {
                        this.setCheckedKeys(this.checkedId);
                    }
                    this.loading = false;
                })
                .catch(e => {
                    this.loading = false;
                    console.log(e);
                    this.$message.error(e.error);
                });
        },
        setCheckedKeys(ids) {
            this.$refs.tree.setCheckedKeys(ids);
        },
        handleCheckChange(data, checked) {
            this.checkedTreeId = this.$refs.tree.getCheckedKeys();
        },
        handleClose() {
            this.$emit('closeEditMenu', false); // 给父组件传值，隐藏弹出框
        },
        handleSubmit() {
            // 为该角色添加权限;
            this.saving = true;
            this.$axios
                .post(
                    '/authorityMenu/save',
                    { authorityName: this.editMenu.roleId, menuId: this.checkedTreeId.join(',') },
                    { emulateJSON: true }
                )
                .then(res => {
                    this.saving = false;
                    let success = res.data.success;
                    if (success === true) {
                        this.$message({
                            type: 'success',
                            message: '提交成功'
                        });
                        this.$emit('closeEditMenu', false); // 给父组件传值，隐藏弹出框
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(error => {
                    this.saving = false;
                    console.log(error);
                    this.$message.error('服务器暂时无法连接，请稍后再试');
                });
        }
    },
    mounted: function() {
        // this.$nextTick(function() {});
    }
};
</script>

<style>
#userMenu .el-dialog__body {
    overflow: auto;
    max-height: 310px;
}
</style>
