<template>
    <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
        <a-form-model-item label="角色名称">
            <a-input v-model="form.roleName" :disabled="isView" />
        </a-form-model-item>
        <a-form-model-item label="角色编码">
            <a-input v-model="form.roleCode" :disabled="isView" />
        </a-form-model-item>
        <a-form-model-item label="角色说明" prop="remark">
            <a-input v-model="form.remark" :disabled="isView" />
        </a-form-model-item>

        <a-form-model-item label="菜单权限">
            <MenuTree
                v-model="checkedKeys"
                :defaultCheckedKeys="defaultCheckedKeys"
                showMenu
                ref="menuTree"
                :disabled="isView"
            />
        </a-form-model-item>
    </a-form-model>
</template>

<script>
import MenuTree from '@/components/menu_tree/index.vue';
import { addRoleApi, getRoleApi, updateRoleApi } from '@/api';
import FormMixin from '@/components/FormMixin';

export default {
    mixins: [FormMixin],
    components: { MenuTree },
    data() {
        return {
            form: {},
            rules: {},
            checkedKeys: [],
            defaultCheckedKeys: [],
        };
    },
    methods: {
        submit() {
            const query = {
                ...this.form,
                authorityList: this.$refs['menuTree'].get().map(i => ({
                    ...i,
                    nodeId: i.menuId,
                    parentNodeId: i.parentMenuId,
                    nodeType: i.menuType,
                })),
            };
            return this.isEdit ? updateRoleApi(query) : addRoleApi(query);
        },
        setData(data, type) {
            this.getData(data.roleId);
            this.type = type;
        },
        async getData(id) {
            const res = await getRoleApi(id);
            this.form = res;
            this.defaultCheckedKeys = res.menuComponentKeys.map(i => parseInt(i.split('-')[0]));
        },
    },
};
</script>
