<script setup>
import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
import VnSelect from 'src/components/common/VnSelect.vue';

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

const emit = defineEmits(['search']);
</script>

<template>
    <VnFilterPanel
        :data-key="props.dataKey"
        :search-button="true"
        @search="emit('search')"
    >
        <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 class="q-my-sm">
                <QItemSection>
                    <VnSelect
                        v-model="params.parkingFk"
                        url="Parkings"
                        :fields="['id', 'code']"
                        :label="t('params.parkingFk')"
                        option-value="id"
                        option-label="code"
                        :filter-options="['id', 'code']"
                        dense
                        outlined
                        rounded
                        sort-by="code ASC"
                    />
                </QItemSection>
            </QItem>
            <QItem class="q-mb-sm">
                <QItemSection>
                    <VnSelect
                        dense
                        outlined
                        rounded
                        :label="t('params.userFk')"
                        v-model="params.userFk"
                        url="Workers/activeWithInheritedRole"
                        option-value="id"
                        option-label="firstName"
                        :where="{ role: 'salesPerson' }"
                        sort-by="firstName ASC"
                        :use-like="false"
                    />
                </QItemSection>
            </QItem>
            <QItem class="q-mb-md">
                <QItemSection>
                    <QCheckbox
                        v-model="params.isRecyclable"
                        :label="t('params.isRecyclable')"
                        toggle-indeterminate
                    />
                </QItemSection>
            </QItem>
        </template>
    </VnFilterPanel>
</template>

<i18n>
en:
    params:
        parkingFk: Parking
        userFk: Worker
        isRecyclable: Recyclable
        search: Search
es:
    params:
        parkingFk: Parking
        userFk: Trabajador
        isRecyclable: Reciclable
        search: Contiene
</i18n>
