<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" :show-all="false">
        <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 :label="t('Order ID')" v-model="params.orderFk" is-outlined>
                        <template #prepend>
                            <QIcon name="vn:basket" size="xs" />
                        </template>
                    </VnInput>
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="t('Customer ID')"
                        v-model="params.clientFk"
                        is-outlined
                    >
                        <template #prepend>
                            <QIcon name="vn:client" size="xs" />
                        </template>
                    </VnInput>
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnCurrency v-model="params.amount" is-outlined />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInputDate v-model="params.from" :label="t('From')" is-outlined />
                </QItemSection>
                <QItemSection>
                    <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
                </QItemSection>
            </QItem>
        </template>
    </VnFilterPanel>
</template>

<i18n>
en:
    params:
        orderFk: Order
        clientFk: Customer
        amount: Amount
        from: From
        to: To
es:
    params:
        orderFk: Pedido
        clientFk: Cliente
        amount: Importe
        from: Desde
        to: Hasta
    Order ID: ID pedido
    Customer ID: ID cliente
    Amount: Importe
    Please type a number: Por favor, escriba un número
    From: Desde
    To: Hasta
</i18n>
