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

import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnCurrency from 'src/components/common/VnCurrency.vue';

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

<template>
    <VnFilterPanel
        :data-key="props.dataKey"
        :search-button="true"
        :unremovable-params="['from', 'to']"
    >
        <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>
                    <VnInputDate
                        v-model="params.from"
                        :label="t('invoiceOut.negativeBases.from')"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInputDate
                        v-model="params.to"
                        :label="t('invoiceOut.negativeBases.to')"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        v-model="params.company"
                        :label="t('invoiceOut.negativeBases.company')"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        v-model="params.country"
                        :label="t('invoiceOut.negativeBases.country')"
                        is-outlined
                    />
                </QItemSection>
            </QItem>

            <QItem>
                <QItemSection>
                    <VnInput
                        v-model="params.clientId"
                        :label="t('invoiceOut.negativeBases.clientId')"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        v-model="params.clientSocialName"
                        :label="t('invoiceOut.negativeBases.client')"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnCurrency
                        v-model="params.amount"
                        :label="t('invoiceOut.negativeBases.amount')"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        v-model="params.comercialName"
                        :label="t('invoiceOut.negativeBases.comercial')"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
        </template>
    </VnFilterPanel>
</template>

<i18n>
en:
    params:
        from: From
        to: To
        company: Company
        country: Country
        clientId: Client Id
        clientSocialName: Client
        amount: Amount
        comercialName: Comercial
es:
    params:
        from: Desde
        to: Hasta
        company: Empresa
        country: País
        clientId: Id cliente
        clientSocialName: Cliente
        amount: Importe
        comercialName: Comercial
    Date is required: La fecha es requerida

</i18n>
