<script setup>
import VnSelectDialog from './VnSelectDialog.vue';
import FilterTravelForm from 'src/components/FilterTravelForm.vue';
import { useI18n } from 'vue-i18n';
import { toDate } from 'src/filters';
const { t } = useI18n();

const $props = defineProps({
    data: {
        type: Object,
        required: true,
    },
    onFilterTravelSelected: {
        type: Function,
        required: true,
    },
});
</script>
<template>
    <VnSelectDialog
        :label="t('entry.basicData.travel')"
        v-bind="$attrs"
        url="Travels/filter"
        :fields="['id', 'warehouseInName']"
        option-value="id"
        option-label="warehouseInName"
        map-options
        hide-selected
        :required="true"
        action-icon="filter_alt"
        :roles-allowed-to-create="['buyer']"
    >
        <template #form>
            <FilterTravelForm @travel-selected="onFilterTravelSelected(data, $event)" />
        </template>
        <template #option="scope">
            <QItem v-bind="scope.itemProps">
                <QItemSection>
                    <QItemLabel>
                        {{ scope.opt?.agencyModeName }} -
                        {{ scope.opt?.warehouseInName }}
                        ({{ toDate(scope.opt?.shipped) }}) →
                        {{ scope.opt?.warehouseOutName }}
                        ({{ toDate(scope.opt?.landed) }})
                    </QItemLabel>
                </QItemSection>
            </QItem>
        </template>
    </VnSelectDialog>
</template>
