<template>
    <a-form-model layout="vertical" :model="form" :rules="rules">
        <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" showMenu ref="menuTree" :disabled="isView" />
        </a-form-model-item>
    </a-form-model>
</template>

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

export default {
    components: { MenuTree },
    data() {
        return {
            type: 0,
            form: {},
            rules: {},
            checkedKeys: [],
        };
    },
    computed: {
        isEdit() {
            return this.type === 1;
        },
        isView() {
            return this.type === 2;
        },
    },
    methods: {
        submit() {
            return addRoleApi({ ...this.form, authorityList: this.$refs['menuTree'].get() });
        },
        setData(data, type) {
            this.form = data;
            this.type = type;
        },
    },
};
</script>
