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

import FetchData from 'components/FetchData.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSelect from 'components/common/VnSelect.vue';
import ItemsFilterPanel from 'src/components/ItemsFilterPanel.vue';

const { t } = useI18n();

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

const itemTypeWorkersOptions = ref([]);
const exprBuilder = (param, value) => {
    switch (param) {
        case 'name':
            return { 'i.name': { like: `%${value}%` } };
        case 'itemFk':
        case 'warehouseFk':
        case 'rate2':
        case 'rate3':
            param = `fp.${param}`;
            return { [param]: value };
        case 'minPrice':
            param = `i.${param}`;
            return { [param]: value };
    }
};
</script>

<template>
    <FetchData
        url="TicketRequests/getItemTypeWorker"
        limit="30"
        auto-load
        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
        @on-fetch="(data) => (itemTypeWorkersOptions = data)"
    />
    <ItemsFilterPanel :data-key="props.dataKey" :custom-tags="['tags']">
        <template #body="{ params, searchFn }">
            <QItem class="q-my-md">
                <QItemSection>
                    <VnSelect
                        :label="t('components.itemsFilterPanel.buyerFk')"
                        v-model="params.buyerFk"
                        :options="itemTypeWorkersOptions"
                        option-value="id"
                        option-label="nickname"
                        dense
                        outlined
                        rounded
                        use-input
                        @update:model-value="searchFn()"
                    />
                </QItemSection>
            </QItem>
            <QItem class="q-my-md">
                <QItemSection>
                    <VnSelect
                        url="Warehouses"
                        auto-load
                        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
                        :label="t('components.itemsFilterPanel.warehouseFk')"
                        v-model="params.warehouseFk"
                        option-label="name"
                        option-value="id"
                        dense
                        outlined
                        rounded
                        use-input
                        @update:model-value="searchFn()"
                    />
                </QItemSection>
            </QItem>
            <QItem class="q-my-md">
                <QItemSection>
                    <VnInputDate
                        :label="t('components.itemsFilterPanel.started')"
                        v-model="params.started"
                        is-outlined
                        @update:model-value="searchFn()"
                    />
                </QItemSection>
            </QItem>
            <QItem class="q-my-md">
                <QItemSection>
                    <VnInputDate
                        :label="t('components.itemsFilterPanel.ended')"
                        v-model="params.ended"
                        is-outlined
                        @update:model-value="searchFn()"
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <QCheckbox
                        :label="t('components.itemsFilterPanel.mine')"
                        v-model="params.mine"
                        toggle-indeterminate
                        @update:model-value="searchFn()"
                    />

                    <QCheckbox
                        v-model="params.showBadDates"
                        :label="t(`components.itemsFilterPanel.showBadDates`)"
                        toggle-indeterminate
                        @update:model-value="searchFn()"
                    >
                    </QCheckbox>

                    <QCheckbox
                        :label="t('components.itemsFilterPanel.hasMinPrice')"
                        v-model="params.hasMinPrice"
                        toggle-indeterminate
                        @update:model-value="searchFn()"
                    />
                </QItemSection>
            </QItem>
        </template>
    </ItemsFilterPanel>
</template>
