<script setup>
import VnSelect from 'components/common/VnSelect.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
import { dateRange } from 'src/filters';
import { date } from 'quasar';

defineProps({ dataKey: { type: String, required: true } });
const dateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZ';

function handleDaysAgo(params, daysAgo) {
    const [from, to] = dateRange(Date.vnNew());
    if (!daysAgo && daysAgo !== 0) {
        Object.assign(params, { from: undefined, to: undefined });
    } else {
        from.setDate(from.getDate() - daysAgo);
        Object.assign(params, {
            from: date.formatDate(from, dateFormat),
            to: date.formatDate(to, dateFormat),
        });
    }
}
</script>

<template>
    <VnFilterPanel :data-key="dataKey" :search-button="true" :hidden-tags="['daysAgo']">
        <template #tags="{ tag, formatFn, getLocale }">
            <div class="q-gutter-x-xs">
                <strong>{{ getLocale(tag.label) }}: </strong>
                <span>{{ formatFn(tag.value) }}</span>
            </div>
        </template>
        <template #body="{ params, searchFn, getLocale }">
            <QItem>
                <QItemSection>
                    <VnInputDate
                        :label="$t('globals.from')"
                        v-model="params.from"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInputDate
                        :label="$t('globals.to')"
                        v-model="params.to"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInputNumber
                        :label="$t('globals.daysAgo')"
                        v-model="params.daysAgo"
                        is-outlined
                        :step="0"
                        @update:model-value="(val) => handleDaysAgo(params, val)"
                        @remove="(val) => handleDaysAgo(params, val)"
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnSelect
                        v-model="params.supplierFk"
                        url="Suppliers"
                        :fields="['id', 'nickname']"
                        :label="getLocale('supplierFk')"
                        option-label="nickname"
                        dense
                        outlined
                        rounded
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="getLocale('supplierRef')"
                        v-model="params.supplierRef"
                        is-outlined
                        lazy-rules
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="getLocale('fi')"
                        v-model="params.fi"
                        is-outlined
                        lazy-rules
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="getLocale('serial')"
                        v-model="params.serial"
                        is-outlined
                        lazy-rules
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="getLocale('account')"
                        v-model="params.account"
                        is-outlined
                        lazy-rules
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="getLocale('globals.params.awbCode')"
                        v-model="params.awbCode"
                        is-outlined
                        lazy-rules
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInputNumber
                        :label="$t('globals.amount')"
                        v-model="params.amount"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnSelect
                        v-model="params.companyFk"
                        :label="$t('globals.company')"
                        url="Companies"
                        option-label="code"
                        :fields="['id', 'code']"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <QCheckbox
                        :label="$t('InvoiceIn.isBooked')"
                        v-model="params.isBooked"
                        @update:model-value="searchFn()"
                        toggle-indeterminate
                    />
                    <QCheckbox
                        :label="getLocale('params.correctingFk')"
                        v-model="params.correctingFk"
                        @update:model-value="searchFn()"
                        toggle-indeterminate
                    />
                </QItemSection>
            </QItem>
        </template>
    </VnFilterPanel>
</template>
