<template>
    <a-form-model layout="vertical" :model="form" :rules="rules" ref="form">
        <a-form-model-item :label="$t('menu.parent')" :extra="$t('menu.noSelected')" v-if="isAdd">
            <MenuTree v-model="form.parentMenuId" />
        </a-form-model-item>
        <a-form-model-item :label="$t('menu.type')">
            <a-radio-group v-model="form.menuType" :disabled="isEdit">
                <a-radio value="CATALOG">{{ $t('menu.catalogue') }}</a-radio>
                <a-radio value="MENU">{{ $t('menu.menu') }}</a-radio>
            </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :label="$t('menu.chineseName')" prop="menuTypeNameZh">
            <a-input v-model="form.menuTypeNameZh" :placeholder="$t('input.placeholder')" />
        </a-form-model-item>
        <a-form-model-item :label="$t('menu.englishName')" prop="menuTypeNameEn">
            <a-input v-model="form.menuTypeNameEn" :placeholder="$t('input.placeholder')" />
        </a-form-model-item>
        <a-form-model-item label="URL" prop="menuUrl">
            <a-input v-model="form.menuUrl" :placeholder="$t('input.placeholder')" />
        </a-form-model-item>
        <a-form-model-item :label="$t('menu.order')" prop="viewIndex">
            <a-input-number v-model="form.viewIndex" />
        </a-form-model-item>
        <a-form-model-item :label="$t('menu.icon')" prop="menuIcon">
            <a-input v-model="form.menuIcon" :placeholder="$t('input.placeholder')" />
        </a-form-model-item>
        <a-form-model-item :label="$t('table.remark')" prop="menuRemark">
            <a-textarea v-model="form.menuRemark" :placeholder="$t('input.placeholder')" />
        </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: (vm) => ({
        type: 0,
        form: {
            menuType: 'CATALOG',
            parentMenuId: null,
            menuName: '',
            menuNameI18nList: [
                { i18nLocale: 'zh_CN', i18nMessage: '' },
                { i18nLocale: 'en_US', i18nMessage: '' },
            ],
            menuRemark: '',
            menuTypeNameZh: '',
            menuTypeNameEn: '',
        },

        rules: {
            menuUrl: [{ required: true, message: vm.$t('menu.menuUrlRequired') }],
            menuTypeNameZh: [{ required: true, message: vm.$t('menu.menuTypeNameZhRequired') }],
            menuTypeNameEn: [{ required: true, message: vm.$t('menu.menuTypeNameEnRequired') }],
        },
    }),
    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,
                menuNameI18nList: this.form.menuNameI18nList.map((i18) => {
                    if (i18.i18nLocale === 'en_US') i18.i18nMessage = this.form.menuTypeNameEn;
                    if (i18.i18nLocale === 'zh_CN') i18.i18nMessage = this.form.menuTypeNameZh;
                    return i18;
                }),
                menuName: this.menuTypeNameZh,
                menuTypeNameEn: undefined,
                menuTypeNameZh: undefined,
            };

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

            this.$set(this.form, 'menuTypeNameEn', '');
            this.$set(this.form, 'menuTypeNameZh', '');

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