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

import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FormModelPopup from './FormModelPopup.vue';

const emit = defineEmits(['onDataSaved']);

const { t } = useI18n();

const thermographFormData = reactive({
    thermographId: null,
    model: 'DISPOSABLE',
    warehouseId: null,
    temperatureFk: 'cool',
});

const thermographsModels = ref(null);
const warehousesOptions = ref([]);
const temperaturesOptions = ref([]);

const onDataSaved = (dataSaved) => {
    emit('onDataSaved', dataSaved);
};
</script>

<template>
    <FetchData
        @on-fetch="(data) => (thermographsModels = data)"
        auto-load
        url="Thermographs/getThermographModels"
    />
    <FetchData
        @on-fetch="(data) => (warehousesOptions = data)"
        auto-load
        url="Warehouses"
        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
    />
    <FetchData
        @on-fetch="(data) => (temperaturesOptions = data)"
        auto-load
        url="Temperatures"
    />
    <FormModelPopup
        url-create="Thermographs/createThermograph"
        model="thermograph"
        :title="t('New thermograph')"
        :form-initial-data="thermographFormData"
        @on-data-saved="(_, response) => onDataSaved(response)"
    >
        <template #form-inputs="{ data, validate }">
            <VnRow>
                <VnInput
                    :label="t('Identifier')"
                    v-model="data.thermographId"
                    :required="true"
                    :rules="validate('thermograph.id')"
                />
                <VnSelect
                    :label="t('Model')"
                    :options="thermographsModels"
                    hide-selected
                    option-label="value"
                    option-value="value"
                    v-model="data.model"
                    :required="true"
                    :rules="validate('thermograph.model')"
                />
            </VnRow>
            <VnRow class="row q-gutter-md q-mb-xl">
                <VnSelect
                    :label="t('Warehouse')"
                    :options="warehousesOptions"
                    hide-selected
                    option-label="name"
                    option-value="id"
                    v-model="data.warehouseId"
                    :required="true"
                />
                <VnSelect
                    :label="t('Temperature')"
                    :options="temperaturesOptions"
                    hide-selected
                    option-label="name"
                    option-value="code"
                    v-model="data.temperatureFk"
                    :required="true"
                />
            </VnRow>
        </template>
    </FormModelPopup>
</template>

<i18n>
es:
    Identifier: Identificador
    Model: Modelo
    Warehouse: Almacén
    Temperature: Temperatura
    New thermograph: Nuevo termógrafo
</i18n>
