<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInput from 'components/common/VnInput.vue';

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

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

const agencyList = ref([]);
const agencyAgreementList = ref([]);
const supplierList = ref([]);

const exprBuilder = (param, value) => {
    switch (param) {
        case 'agencyModeFk':
            return { 'a.agencyModeFk': value };
        case 'supplierFk':
            return { 'a.supplierName': value };
        case 'routeFk':
            return { 'a.routeFk': value };
        case 'created':
        case 'agencyFk':
        case 'packages':
        case 'm3':
        case 'kmTotal':
        case 'price':
        case 'invoiceInFk':
            return { [`a.${param}`]: value };
    }
};
</script>

<template>
    <FetchData
        url="AgencyModes"
        :filter="{ fields: ['id', 'name'] }"
        sort-by="name ASC"
        limit="30"
        @on-fetch="(data) => (agencyList = data)"
        auto-load
    />
    <FetchData
        url="Agencies"
        :filter="{ fields: ['id', 'name'] }"
        sort-by="name ASC"
        limit="30"
        @on-fetch="(data) => (agencyAgreementList = data)"
        auto-load
    />
    <FetchData
        url="Suppliers"
        :filter="{ fields: ['name'] }"
        sort-by="name ASC"
        limit="30"
        @on-fetch="(data) => (supplierList = data)"
        auto-load
    />
    <VnFilterPanel
        :data-key="props.dataKey"
        :expr-builder="exprBuilder"
        search-button
        @search="emit('search')"
    >
        <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 }">
            <QList dense>
                <QItem class="q-my-sm">
                    <QItemSection>
                        <VnInput v-model="params.routeFk" :label="t('ID')" is-outlined />
                    </QItemSection>
                </QItem>
                <QItem class="q-my-sm" v-if="agencyList">
                    <QItemSection>
                        <VnSelect
                            :label="t('Agency route')"
                            v-model="params.agencyModeFk"
                            :options="agencyList"
                            option-value="id"
                            option-label="name"
                            dense
                            outlined
                            rounded
                            emit-value
                            map-options
                            use-input
                            is-clearable
                            :input-debounce="0"
                        />
                    </QItemSection>
                </QItem>
                <QItem class="q-my-sm" v-if="agencyAgreementList">
                    <QItemSection>
                        <VnSelect
                            :label="t('Agency agreement')"
                            v-model="params.agencyFk"
                            :options="agencyAgreementList"
                            option-value="id"
                            option-label="name"
                            dense
                            outlined
                            rounded
                            emit-value
                            map-options
                            use-input
                            is-clearable
                            :input-debounce="0"
                        />
                    </QItemSection>
                </QItem>
                <QItem class="q-my-sm" v-if="supplierList">
                    <QItemSection>
                        <VnSelect
                            :label="t('Autonomous')"
                            v-model="params.supplierFk"
                            :options="supplierList"
                            option-value="name"
                            option-label="name"
                            dense
                            outlined
                            rounded
                            emit-value
                            map-options
                            use-input
                            is-clearable
                            :input-debounce="0"
                        />
                    </QItemSection>
                </QItem>
                <QItem class="q-my-sm">
                    <QItemSection>
                        <VnInputDate
                            v-model="params.created"
                            :label="t('Date')"
                            is-outlined
                        />
                    </QItemSection>
                </QItem>
                <QItem class="q-my-sm">
                    <QItemSection>
                        <VnInputDate
                            v-model="params.from"
                            :label="t('From')"
                            is-outlined
                        />
                    </QItemSection>
                </QItem>
                <QItem class="q-my-sm">
                    <QItemSection>
                        <VnInputDate
                            v-model="params.to"
                            :label="t('To')"
                            is-outlined
                            is-clearable
                        />
                    </QItemSection>
                </QItem>
                <QItem class="q-my-sm">
                    <QItemSection>
                        <VnInput
                            v-model="params.packages"
                            :label="t('Packages')"
                            is-outlined
                        />
                    </QItemSection>
                </QItem>
                <QItem class="q-my-sm">
                    <QItemSection>
                        <VnInput v-model="params.m3" :label="t('m3')" is-outlined />
                    </QItemSection>
                </QItem>
                <QItem class="q-my-sm">
                    <QItemSection>
                        <VnInput v-model="params.kmTotal" :label="t('Km')" is-outlined />
                    </QItemSection>
                </QItem>
                <QItem class="q-my-sm">
                    <QItemSection>
                        <VnInput v-model="params.price" :label="t('Price')" is-outlined />
                    </QItemSection>
                </QItem>
                <QItem class="q-my-sm">
                    <QItemSection>
                        <VnInput
                            v-model="params.invoiceInFk"
                            :label="t('Received')"
                            is-outlined
                        />
                    </QItemSection>
                </QItem>
            </QList>
        </template>
    </VnFilterPanel>
</template>

<i18n>
en:
    params:
        agencyModeFk: Agency route
        m3: m³
        from: From
        to: To
        date: Date
        agencyFk: Agency agreement
        packages: Packages
        price: Price
        invoiceInFk: Received
        supplierFk: Autonomous
es:
    params:
        agencyModeFk: Agencia ruta
        m3: m³
        from: Desde
        to: Hasta
        date: Fecha
        agencyFk: Agencia Acuerdo
        packages: Bultos
        price: Precio
        invoiceInFk: Recibida
        supplierFk: Autónomos
    From: Desde
    To: Hasta
    Date: Fecha
    Agency route: Agencia Ruta
    Agency agreement: Agencia Acuerdo
    Packages: Bultos
    Price: Precio
    Received: Recibida
    Autonomous: Autónomos
</i18n>
