<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 VnSelectFilter from 'components/common/VnSelectFilter.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 salesPersonFilter = {
    fields: ['id', 'nickname'],
};
const salesPersonList = ref(null);
const sourceFilter = { fields: ['value'] };
const sourceList = ref(null);
</script>

<template>
    <FetchData
        url="AgencyModes/isActive"
        :filter="agencyFilter"
        limit="30"
        sort-by="name ASC"
        auto-load
        @on-fetch="(data) => (agencyList = data)"
    />
    <FetchData
        url="Workers/search"
        :filter="salesPersonFilter"
        limit="30"
        sort-by="nickname ASC"
        @on-fetch="(data) => (salesPersonList = data)"
        :params="{ departmentCodes: ['VT'] }"
        auto-load
    />
    <FetchData
        url="Orders/getSourceValues"
        :filter="sourceFilter"
        limit="30"
        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 }">
            <QItem>
                <QItemSection>
                    <VnInput
                        is-outlined
                        :label="t('customerId')"
                        v-model="params.clientFk"
                        lazy-rules
                    >
                        <template #prepend>
                            <QIcon name="badge" size="sm"></QIcon>
                        </template>
                    </VnInput>
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection v-if="agencyList">
                    <VnSelectFilter
                        :label="t('agency')"
                        v-model="params.agencyModeFk"
                        :options="agencyList"
                        option-value="id"
                        option-label="name"
                        dense
                        outlined
                        rounded
                        emit-value
                        map-options
                        use-input
                        :input-debounce="0"
                    />
                </QItemSection>
                <QItemSection v-else>
                    <QSkeleton type="QInput" class="full-width" />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection v-if="salesPersonList">
                    <VnSelectFilter
                        :label="t('salesPerson')"
                        v-model="params.workerFk"
                        :options="salesPersonList"
                        option-value="id"
                        option-label="name"
                        dense
                        outlined
                        rounded
                        emit-value
                        map-options
                        use-input
                        :input-debounce="0"
                    >
                        <template #option="{ itemProps, opt }">
                            <QItem v-bind="itemProps">
                                <QItemSection>
                                    <QItemLabel>{{ opt.name }}</QItemLabel>
                                    <QItemLabel caption>
                                        {{ opt.nickname }},{{ opt.code }}
                                    </QItemLabel>
                                </QItemSection>
                            </QItem>
                        </template>
                    </VnSelectFilter>
                </QItemSection>
                <QItemSection v-else>
                    <QSkeleton type="QInput" class="full-width" />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInputDate
                        v-model="params.from"
                        :label="t('fromLanded')"
                        dense
                        outlined
                        rounded
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInputDate
                        v-model="params.to"
                        :label="t('toLanded')"
                        dense
                        outlined
                        rounded
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="t('orderId')"
                        v-model="params.orderFk"
                        lazy-rules
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection v-if="sourceList">
                    <VnSelectFilter
                        :label="t('application')"
                        v-model="params.sourceApp"
                        :options="sourceList"
                        option-label="value"
                        emit-value
                        map-options
                        use-input
                        dense
                        outlined
                        rounded
                        :input-debounce="0"
                    />
                </QItemSection>
                <QItemSection v-else>
                    <QSkeleton type="QInput" class="full-width" />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <QCheckbox
                        v-model="params.myTeam"
                        :label="t('myTeam')"
                        toggle-indeterminate
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <QCheckbox
                        v-model="params.isConfirmed"
                        :label="t('isConfirmed')"
                        toggle-indeterminate
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
                </QItemSection>
            </QItem>
        </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>
