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

import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'src/components/common/VnInputTime.vue';

const { t } = useI18n();
const props = defineProps({
    dataKey: {
        type: String,
        required: true,
    },
});

const states = ref([]);

defineExpose({ states });
</script>

<template>
    <FetchData url="warehouses" @on-fetch="(data) => (states = data)" auto-load />
    <VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
        <template #tags="{ tag, formatFn }">
            <div class="q-gutter-x-xs">
                <strong>{{ t(`params.${tag.label}`) }}: </strong>
                <span>{{ formatFn(tag.value) }}</span>
            </div>
        </template>
        <template #body="{ params, searchFn }">
            <div class="q-pa-sm q-gutter-y-sm">
                <VnInput
                    :label="t('travel.Id')"
                    v-model="params.id"
                    lazy-rules
                    is-outlined
                >
                    <template #prepend> <QIcon name="badge" size="xs" /></template>
                </VnInput>
                <VnInput
                    :label="t('travel.ref')"
                    v-model="params.ref"
                    lazy-rules
                    is-outlined
                />
                <VnSelect
                    :label="t('travel.agency')"
                    v-model="params.agencyModeFk"
                    @update:model-value="searchFn()"
                    url="agencyModes"
                    :use-like="false"
                    option-value="id"
                    option-label="name"
                    option-filter="name"
                    dense
                    outlined
                    rounded
                />
                <VnSelect
                    :label="t('travel.warehouseInFk')"
                    v-model="params.warehouseInFk"
                    @update:model-value="searchFn()"
                    url="warehouses"
                    :use-like="false"
                    option-value="id"
                    option-label="name"
                    option-filter="name"
                    dense
                    outlined
                    rounded
                />
                <VnInputDate
                    :label="t('travel.shipped')"
                    v-model="params.shipped"
                    @update:model-value="searchFn()"
                    dense
                    outlined
                    rounded
                />
                <VnInputTime
                    v-model="params.shipmentHour"
                    @update:model-value="searchFn()"
                    :label="t('travel.shipmentHour')"
                    outlined
                    rounded
                    dense
                />
                <VnSelect
                    :label="t('travel.warehouseOut')"
                    v-model="params.warehouseOut"
                    @update:model-value="searchFn()"
                    url="warehouses"
                    :use-like="false"
                    option-value="id"
                    option-label="name"
                    option-filter="name"
                    dense
                    outlined
                    rounded
                />
                <VnInputDate
                    :label="t('travel.landed')"
                    v-model="params.landed"
                    @update:model-value="searchFn()"
                    dense
                    outlined
                    rounded
                />
                <VnInputTime
                    v-model="params.landingHour"
                    @update:model-value="searchFn()"
                    :label="t('travel.landingHour')"
                    outlined
                    rounded
                    dense
                />
                <VnInput
                    :label="t('travel.totalEntries')"
                    v-model="params.totalEntries"
                    lazy-rules
                    is-outlined
                />
                <VnInput
                    :label="t('travel.travelList.tableVisibleColumns.daysOnward')"
                    v-model="params.daysOnward"
                    lazy-rules
                    is-outlined
                />
            </div>
        </template>
    </VnFilterPanel>
</template>

<i18n>
en:
    travel:
        Id: Contains
        ref: Reference
        agency: Agency
        warehouseInFk: W. In
        shipped: Shipped
        shipmentHour: Shipment Hour
        warehouseOut: W. Out
        landed: Landed
        landingHour: Landing Hour
        totalEntries: Σ
es:
    travel:
        Id: Id
        ref: Referencia
        agency: Agencia
        warehouseInFk: Alm.Salida
        shipped: F.Envío
        shipmentHour: Hora de envío
        warehouseOut: Alm.Entrada
        landed: F.Entrega
        landingHour: Hora de entrega
        totalEntries: Σ
</i18n>
