<template>
    <a-form-model layout="vertical" :model="form" :rules="rules" ref="form">
        <a-form-model-item label="父级" extra="没选择代表根目录" v-if="isAdd">
            <MenuTree v-model="form.parentMenuId" />
        </a-form-model-item>
        <a-form-model-item label="类型">
            <a-radio-group v-model="form.menuType" :disabled="isEdit">
                <a-radio value="CATALOG">目录</a-radio>
                <a-radio value="MENU">菜单</a-radio>
            </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="中文名称">
            <a-input v-model="form.menuName" />
        </a-form-model-item>
        <a-form-model-item label="英文名称">
            <a-input />
        </a-form-model-item>
        <a-form-model-item label="模块URL" prop="menuUrl">
            <a-input v-model="form.menuUrl" />
        </a-form-model-item>
        <a-form-model-item label="显示排序" prop="viewIndex">
            <a-input-number v-model="form.viewIndex" />
        </a-form-model-item>
        <a-form-model-item label="显示图标" prop="menuIcon">
            <a-input v-model="form.menuIcon" />
        </a-form-model-item>
        <a-form-model-item label="说明" prop="menuRemark">
            <a-textarea v-model="form.menuRemark" />
        </a-form-model-item>
    </a-form-model>
</template>

<script>
import { addMenuApi, updateMenuApi } from '@/api';
import MenuTree from '@/components/menu_tree/select.vue';

export default {
    components: { MenuTree },
    data: () => ({
        type: 0,
        form: {
            menuType: 'CATALOG',
            parentMenuId: null,
            menuName: '',
        },
        rules: {
            menuUrl: [{ required: true }],
        },
    }),
    computed: {
        isAdd() {
            return this.type === 0;
        },
        isEdit() {
            return this.type === 1;
        },
    },
    methods: {
        async submit() {
            await this.$refs['form'].validate();
            const reqData = { ...this.form, parentMenuId: this.form.parentMenuId ?? 0 };
            return this.isEdit ? updateMenuApi(reqData) : addMenuApi(reqData);
        },
        setEdit(data) {
            this.type = 1;
            this.form = data;
        },
    },
};
</script>
