<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnInput from 'components/common/VnInput.vue';

const props = defineProps({
    formData: {
        type: Object,
        default: () => ({}),
    },
    roadmapFk: {
        type: [Number, String],
        required: true,
    },
    layout: {
        type: String,
        default: 'row',
    },
});

const { t } = useI18n();
const warehouseList = ref([]);
const form = computed(() => props.formData);
const isDialog = computed(() => props.layout === 'dialog');
</script>
<template>
    <FetchData
        url="Warehouses"
        auto-load
        :filter="{ fields: ['id', 'name'] }"
        sort-by="name"
        limit="30"
        @on-fetch="(data) => (warehouseList = data)"
    />
    <div :class="[isDialog ? 'column' : 'form-gap', 'full-width flex']">
        <QCardSection class="flex-grow q-px-none flex-1">
            <VnSelectFilter
                v-model.number="form.warehouseFk"
                class="full-width"
                :label="t('Warehouse')"
                :options="warehouseList"
                option-value="id"
                option-label="name"
                emit-value
                map-options
                use-input
                hide-selected
                autofocus
                :input-debounce="0"
            />
        </QCardSection>
        <div :class="[!isDialog ? 'flex-2' : null, 'form-gap flex no-wrap']">
            <QCardSection class="row q-px-none flex-1">
                <VnInputDate
                    v-model="form.eta"
                    class="full-width"
                    :label="t('ETA date')"
                />
            </QCardSection>
            <QCardSection class="row q-px-none flex-1">
                <VnInputTime
                    v-model="form.eta"
                    class="full-width"
                    :label="t('ETA hour')"
                />
            </QCardSection>
        </div>
        <QCardSection class="q-px-none flex-1">
            <VnInput
                v-model="form.description"
                class="full-width"
                :label="t('Description')"
                type="textarea"
                :rows="1"
            />
        </QCardSection>
    </div>
</template>
<style lang="scss" scoped>
.form-gap {
    gap: 16px;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}
</style>
<i18n>
es:
    Warehouse: Almacén
    ETA date: Fecha ETA
    ETA hour: Hora ETA
    Description: Descripción
    Remove stop: Eliminar parada
    Add stop: Añadir parada
</i18n>
