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

import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';

import { toDate } from 'src/filters';

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

const newTravelForm = reactive({
    ref: null,
    agencyModeFk: null,
    shipped: null,
    landed: null,
    warehouseOutFk: null,
    warehouseInFk: null,
});

const agenciesOptions = ref([]);
const viewAction = ref();
const warehousesOptions = ref([]);

onBeforeMount(() => {
    // Esto nos permite decirle a FormModel si queremos observar los cambios o no
    // Ya que si queremos clonar queremos que nos permita guardar inmediatamente sin realizar cambios en el form
    viewAction.value = route.query.travelData ? 'clone' : 'create';

    if (route.query.travelData) {
        const travelData = JSON.parse(route.query.travelData);
        for (let key in newTravelForm) {
            if (key === 'landed' || key === 'shipped') {
                newTravelForm[key] = travelData[key].substring(0, 10);
            } else {
                newTravelForm[key] = travelData[key];
            }
        }
    }
});

const onFetchAgencies = (agencies) => {
    agenciesOptions.value = [...agencies];
};

const onFetchWarehouses = (warehouses) => {
    warehousesOptions.value = [...warehouses];
};
</script>

<template>
    <FetchData url="AgencyModes" @on-fetch="(data) => onFetchAgencies(data)" auto-load />
    <FetchData url="Warehouses" @on-fetch="(data) => onFetchWarehouses(data)" auto-load />
    <QPage>
        <QToolbar class="bg-vn-dark">
            <div id="st-data"></div>
            <QSpace />
            <div id="st-actions"></div>
        </QToolbar>
        <FormModel
            url-update="Travels"
            model="travel"
            :form-initial-data="newTravelForm"
            :observe-form-changes="viewAction === 'create'"
        >
            <template #form="{ data }">
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <VnInput v-model="data.ref" :label="t('globals.reference')" />
                    </div>
                    <div class="col">
                        <VnSelectFilter
                            :label="t('globals.agency')"
                            v-model="data.agencyModeFk"
                            :options="agenciesOptions"
                            option-value="agencyFk"
                            option-label="name"
                            hide-selected
                        />
                    </div>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <QInput
                            rounded
                            placeholder="dd-mm-aaa"
                            :label="t('globals.shipped')"
                            :model-value="toDate(data.shipped)"
                        >
                            <template #append>
                                <QIcon name="event" class="cursor-pointer">
                                    <QPopupProxy
                                        cover
                                        transition-show="scale"
                                        transition-hide="scale"
                                    >
                                        <QDate v-model="data.shipped">
                                            <div class="row items-center justify-end">
                                                <QBtn
                                                    v-close-popup
                                                    :label="t('globals.close')"
                                                    color="primary"
                                                    flat
                                                />
                                            </div>
                                        </QDate>
                                    </QPopupProxy>
                                </QIcon>
                            </template>
                        </QInput>
                    </div>
                    <div class="col">
                        <QInput
                            rounded
                            placeholder="dd-mm-aaa"
                            :label="t('globals.landed')"
                            :model-value="toDate(data.landed)"
                        >
                            <template #append>
                                <QIcon name="event" class="cursor-pointer">
                                    <QPopupProxy
                                        cover
                                        transition-show="scale"
                                        transition-hide="scale"
                                    >
                                        <QDate v-model="data.landed">
                                            <div class="row items-center justify-end">
                                                <QBtn
                                                    v-close-popup
                                                    :label="t('globals.close')"
                                                    color="primary"
                                                    flat
                                                />
                                            </div>
                                        </QDate>
                                    </QPopupProxy>
                                </QIcon>
                            </template>
                        </QInput>
                    </div>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <VnSelectFilter
                            :label="t('globals.wareHouseOut')"
                            v-model="data.warehouseOutFk"
                            :options="warehousesOptions"
                            option-value="id"
                            option-label="name"
                            hide-selected
                        />
                    </div>
                    <div class="col">
                        <VnSelectFilter
                            :label="t('globals.wareHouseIn')"
                            v-model="data.warehouseInFk"
                            :options="warehousesOptions"
                            option-value="id"
                            option-label="name"
                            hide-selected
                        />
                    </div>
                </VnRow>
            </template>
        </FormModel>
    </QPage>
</template>

<style lang="scss" scoped>
.card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
}
</style>
