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

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

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

const countries = ref();
</script>

<template>
    <FetchData url="Countries" @on-fetch="(data) => (countries = data)" auto-load />
    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
        <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('route.cmr.list.cmrFk')"
                        v-model="params.cmrFk"
                        is-outlined
                    >
                        <template #prepend>
                            <QIcon name="article" size="sm"></QIcon>
                        </template>
                    </VnInput>
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <QCheckbox
                        :label="t('route.cmr.list.hasCmrDms')"
                        v-model="params.hasCmrDms"
                        lazy-rules
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="t('route.cmr.list.ticketFk')"
                        v-model="params.ticketFk"
                        is-outlined
                    >
                        <template #prepend>
                            <QIcon name="vn:ticket" size="sm"></QIcon>
                        </template>
                    </VnInput>
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="t('route.cmr.list.routeFk')"
                        v-model="params.routeFk"
                        is-outlined
                    >
                        <template #prepend>
                            <QIcon name="vn:delivery" size="sm"></QIcon>
                        </template>
                    </VnInput>
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="t('route.cmr.list.clientFk')"
                        v-model="params.clientFk"
                        is-outlined
                    >
                        <template #prepend>
                            <QIcon name="vn:client" size="sm"></QIcon>
                        </template>
                    </VnInput>
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection v-if="!countries">
                    <QSkeleton type="QInput" class="full-width" />
                </QItemSection>
                <QItemSection v-if="countries" class="q-mb-sm">
                    <QSelect
                        :label="t('route.cmr.list.country')"
                        v-model="params.country"
                        :options="countries"
                        option-value="country"
                        option-label="country"
                        transition-show="jump-down"
                        transition-hide="jump-up"
                        emit-value
                        map-options
                        dense
                        outlined
                        rounded
                    >
                        <template #prepend>
                            <QIcon name="flag" size="sm"></QIcon>
                        </template>
                    </QSelect>
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInputDate
                        v-model="params.shipped"
                        :label="t('route.cmr.list.shipped')"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
        </template>
    </VnFilterPanel>
</template>

<i18n>
    en:
        params:
            cmrFk: Cmr id
            hasCmrDms: Attached in gestdoc
            ticketFk: Ticketd id
            country: Country
            clientFk: Client id
            shipped: Preparation date

    es:
        params:
            cmrFk: Id cmr
            hasCmrDms: Adjuntado en gestdoc
            ticketFk: Id ticket
            country: País
            clientFk: Id cliente
            shipped: Fecha preparación
</i18n>
