<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 VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSelect from 'components/common/VnSelect.vue';

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

const salespersons = ref();
const countries = ref();
const authors = ref();
const departments = ref();
</script>

<template>
    <FetchData
        :filter="{ where: { role: 'salesPerson' } }"
        @on-fetch="(data) => (salespersons = data)"
        auto-load
        url="Workers/activeWithInheritedRole"
    />
    <FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" />
    <FetchData
        @on-fetch="(data) => (authors = data)"
        auto-load
        url="Workers/activeWithInheritedRole"
    />
    <FetchData @on-fetch="(data) => (departments = data)" auto-load url="Departments" />

    <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, searchFn }">
            <QItem class="q-mb-sm">
                <VnSelect
                    :label="t('Client')"
                    url="Clients"
                    dense
                    option-label="name"
                    option-value="id"
                    outlined
                    rounded
                    emit-value
                    hide-selected
                    map-options
                    v-model="params.clientFk"
                    use-input
                    @update:model-value="searchFn()"
                />
            </QItem>
            <QItem class="q-mb-sm">
                <QItemSection v-if="salespersons">
                    <VnSelect
                        :input-debounce="0"
                        :label="t('Salesperson')"
                        :options="salespersons"
                        dense
                        emit-value
                        hide-selected
                        map-options
                        option-label="name"
                        option-value="id"
                        outlined
                        rounded
                        use-input
                        v-model="params.salesPersonFk"
                        @update:model-value="searchFn()"
                    />
                </QItemSection>
                <QItemSection v-else>
                    <QSkeleton class="full-width" type="QInput" />
                </QItemSection>
            </QItem>
            <QItem class="q-mb-sm">
                <QItemSection v-if="departments">
                    <VnSelect
                        :input-debounce="0"
                        :label="t('Departments')"
                        :options="departments"
                        dense
                        emit-value
                        hide-selected
                        map-options
                        option-label="name"
                        option-value="id"
                        outlined
                        rounded
                        use-input
                        v-model="params.departmentFk"
                        @update:model-value="searchFn()"
                    />
                </QItemSection>
                <QItemSection v-else>
                    <QSkeleton class="full-width" type="QInput" />
                </QItemSection>
            </QItem>

            <QItem class="q-mb-sm">
                <QItemSection v-if="countries">
                    <VnSelect
                        :input-debounce="0"
                        :label="t('Country')"
                        :options="countries"
                        dense
                        emit-value
                        hide-selected
                        map-options
                        option-label="name"
                        option-value="id"
                        outlined
                        rounded
                        use-input
                        v-model="params.countryFk"
                        @update:model-value="searchFn()"
                    />
                </QItemSection>
                <QItemSection v-else>
                    <QSkeleton class="full-width" type="QInput" />
                </QItemSection>
            </QItem>

            <QItem class="q-mb-sm">
                <QItemSection>
                    <VnInput
                        :label="t('P. Method')"
                        clearable
                        is-outlined
                        v-model="params.paymentMethod"
                    />
                </QItemSection>
            </QItem>

            <QItem class="q-mb-sm">
                <QItemSection>
                    <VnInput
                        :label="t('Balance D.')"
                        clearable
                        is-outlined
                        v-model="params.balance"
                    />
                </QItemSection>
            </QItem>

            <QItem class="q-mb-sm">
                <QItemSection v-if="authors">
                    <VnSelect
                        :input-debounce="0"
                        :label="t('Author')"
                        :options="authors"
                        dense
                        emit-value
                        hide-selected
                        map-options
                        option-label="name"
                        option-value="id"
                        outlined
                        rounded
                        use-input
                        v-model="params.workerFk"
                        @update:model-value="searchFn()"
                    />
                </QItemSection>
                <QItemSection v-else>
                    <QSkeleton class="full-width" type="QInput" />
                </QItemSection>
            </QItem>

            <QItem class="q-mb-sm">
                <QItemSection>
                    <VnInputDate
                        :label="t('L. O. Date')"
                        clearable
                        is-outlined
                        v-model="params.date"
                    />
                </QItemSection>
            </QItem>

            <QItem class="q-mb-sm">
                <QItemSection>
                    <VnInput
                        :label="t('Credit I.')"
                        clearable
                        is-outlined
                        v-model="params.credit"
                    />
                </QItemSection>
            </QItem>

            <QItem class="q-mb-sm">
                <QItemSection>
                    <VnInputDate
                        :label="t('From')"
                        is-outlined
                        v-model="params.defaulterSinced"
                    />
                </QItemSection>
            </QItem>
            <QSeparator />
        </template>
    </VnFilterPanel>
</template>

<i18n>
en:
    params:
        clientFk: Client
        salesPersonFk: Salesperson
        countryFk: Country
        paymentMethod: P. Method
        balance: Balance D.
        workerFk: Author
        date: L. O. Date
        credit: Credit I.
        defaulterSinced: From
es:
    params:
        clientFk: Cliente
        salesPersonFk: Comercial
        countryFk: País
        paymentMethod: F. Pago
        balance: Saldo V.
        workerFk: Autor
        date: Fecha Ú. O.
        credit: Crédito A.
        defaulterSinced: Desde
    Client: Cliente
    Salesperson: Comercial
    Country: País
    P. Method: F. Pago
    Balance D.: Saldo V.
    Author: Autor
    L. O. Date: Fecha Ú. O.
    Credit I.: Crédito A.
    From: Desde
</i18n>
