<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 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 agencyFilter = { fields: ['id', 'name'] };
const agencyList = ref(null);
const sourceList = ref([]);
</script>

<template>
    <FetchData
        url="AgencyModes/isActive"
        :filter="agencyFilter"
        sort-by="name ASC"
        auto-load
        @on-fetch="(data) => (agencyList = data)"
    />
    <FetchData
        url="Orders/getSourceValues"
        :filter="{ fields: ['value'] }"
        sort-by="value ASC"
        @on-fetch="(data) => (sourceList = data)"
        auto-load
    />
    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
        <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 }">
            <div class="q-px-md q-gutter-y-sm">
                <VnInput
                    :label="t('customerId')"
                    v-model="params.clientFk"
                    lazy-rules
                    dense
                    outlined
                    rounded
                />
                <VnSelect
                    :label="t('agency')"
                    v-model="params.agencyModeFk"
                    :options="agencyList"
                    :input-debounce="0"
                    dense
                    outlined
                    rounded
                />
                <VnSelect
                    :label="t('salesPerson')"
                    v-model="params.workerFk"
                    url="Workers/search"
                    :filter="{ departmentCodes: ['VT'] }"
                    sort-by="nickname ASC"
                    option-label="nickname"
                    dense
                    outlined
                    rounded
                >
                    <template #option="{ itemProps, opt }">
                        <QItem v-bind="itemProps">
                            <QItemSection>
                                <QItemLabel>{{ opt.name }}</QItemLabel>
                                <QItemLabel caption>
                                    {{ opt.nickname }},{{ opt.code }}
                                </QItemLabel>
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelect>
                <VnInputDate
                    v-model="params.from"
                    :label="t('fromLanded')"
                    dense
                    outlined
                    rounded
                />
                <VnInputDate
                    v-model="params.to"
                    :label="t('toLanded')"
                    dense
                    outlined
                    rounded
                />
                <VnInput
                    :label="t('orderId')"
                    v-model="params.orderFk"
                    lazy-rules
                    is-outlined
                />
                <VnSelect
                    :label="t('application')"
                    v-model="params.sourceApp"
                    :options="sourceList"
                    option-label="value"
                    dense
                    outlined
                    rounded
                    :input-debounce="0"
                />
                <QCheckbox
                    v-model="params.myTeam"
                    :label="t('myTeam')"
                    toggle-indeterminate
                />
                <QCheckbox
                    v-model="params.isConfirmed"
                    :label="t('isConfirmed')"
                    toggle-indeterminate
                />
                <QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
            </div>
        </template>
    </VnFilterPanel>
</template>

<i18n>
en:
    params:
        search: Includes
        clientFk: Client
        agencyModeFk: Agency
        salesPersonFk: Sales Person
        from: From
        to: To
        orderFk: Order
        sourceApp: Application
        myTeam: My Team
        isConfirmed: Is Confirmed
        showEmpty: Show Empty
    customerId: Customer ID
    agency: Agency
    salesPerson: Sales Person
    fromLanded: From Landed
    toLanded: To Landed
    orderId: Order ID
    application: Application
    myTeam: My Team
    isConfirmed: Order Confirmed
    showEmpty: Show Empty
es:
    params:
        search: Búsqueda
        clientFk: Cliente
        agencyModeFk: Agencia
        salesPersonFk: Comercial
        from: Desde
        to: Hasta
        orderFk: Cesta
        sourceApp: Aplicación
        myTeam: Mi Equipo
        isConfirmed: Confirmado
        showEmpty: Mostrar vacías
    customerId: ID Cliente
    agency: Agencia
    salesPerson: Comercial
    fromLanded: Desde F. entrega
    toLanded: Hasta F. entrega
    orderId: ID Cesta
    application: Aplicación
    myTeam: Mi Equipo
    isConfirmed: Confirmado
    showEmpty: Mostrar vacías
</i18n>
