<script setup>
import { ref, onMounted, reactive, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import CreateGenusForm from './CreateGenusForm.vue';
import CreateSpecieForm from './CreateSpecieForm.vue';

const route = useRoute();
const { t } = useI18n();

const itemBotanicalsRef = ref(null);
const itemBotanicals = ref([]);
let itemBotanicalsForm = reactive({ itemFk: null });

const entityId = computed(() => {
    return route.params.id;
});
async function handleItemBotanical(data) {
    itemBotanicalsForm = data;
}
</script>
<template>
    <FetchData
        ref="itemBotanicalsRef"
        url="ItemBotanicals"
        :filter="{
            where: { itemFk: entityId },
        }"
        @on-fetch="(data) => (itemBotanicals = data)"
    />
    <FormModel
        url="ItemBotanicals"
        url-update="ItemBotanicals"
        model="item"
        auto-load
        :filter="{
            where: { itemFk: entityId },
        }"
        @on-fetch="handleItemBotanical"
    >
        <template #form="{ data }">
            <VnRow>
                <VnSelectDialog
                    ref="genusRef"
                    :label="t('Genus')"
                    v-model="data.genusFk"
                    url="Genera"
                    option-label="name"
                    option-value="id"
                    :fields="['id', 'name']"
                    sort-by="name ASC"
                    hide-selected
                >
                    <template #form>
                        <CreateGenusForm
                            @on-data-saved="(_, res) => (data.genusFk = res.id)"
                        />
                    </template>
                </VnSelectDialog>
                <VnSelectDialog
                    :label="t('Species')"
                    v-model="data.specieFk"
                    url="Species"
                    option-label="name"
                    option-value="id"
                    :fields="['id', 'name']"
                    sort-by="name ASC"
                    hide-selected
                >
                    <template #form>
                        <CreateSpecieForm
                            @on-data-saved="(_, res) => (data.specieFk = res.id)"
                        />
                    </template>
                </VnSelectDialog>
            </VnRow>
        </template>
    </FormModel>
</template>

<i18n>
es:
    Genus: Genus
    Species: Especie
</i18n>
