<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="menuTypeNameZh" />
        </a-form-model-item>
        <a-form-model-item label="英文名称">
            <a-input v-model="menuTypeNameEn" />
        </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, getMenuDetailApi } from '@/api';
import MenuTree from '@/components/menu_tree/select.vue';

export default {
    components: { MenuTree },
    data: () => ({
        type: 0,
        form: {
            menuType: 'CATALOG',
            parentMenuId: null,
            menuName: '',
            menuNameI18nList: [
                { i18nLocale: 'zh_CN', i18nMessage: '' },
                { i18nLocale: 'en_US', i18nMessage: '' },
            ],
            menuRemark: '',
        },
        menuTypeNameZh: '',
        menuTypeNameEn: '',

        rules: {
            menuUrl: [{ required: true }],
        },
    }),
    computed: {
        isAdd() {
            return this.type === 0;
        },
        isEdit() {
            return this.type === 1;
        },
    },
    methods: {
        async submit() {
            await this.$refs['form'].validate();
            console.log('this.form.enuNameI18nList', this.form.enuNameI18nList);
            const reqData = {
                ...this.form,
                parentMenuId: this.form.parentMenuId ?? 0,
                menuNameI18nList: this.form.menuNameI18nList.map(i18 => {
                    if (i18.i18nLocale === 'en_US') i18.i18nMessage = this.menuTypeNameEn;
                    if (i18.i18nLocale === 'zh_CN') i18.i18nMessage = this.menuTypeNameZh;
                    return i18;
                }),
                menuName: this.menuTypeNameZh,
            };
            console.log('this.form.enuNameI18nList', this.form.enuNameI18nList);

            return this.isEdit ? updateMenuApi(reqData) : addMenuApi(reqData);
        },
        async setEdit(data) {
            this.type = 1;
            this.form = await getMenuDetailApi(data.menuId);

            this.form.menuNameI18nList?.forEach(i18 => {
                if (i18.i18nLocale === 'en_US') this.menuTypeNameEn = i18.i18nMessage;
                if (i18.i18nLocale === 'zh_CN') this.menuTypeNameZh = i18.i18nMessage;
            });
        },
    },
};
</script>
