<script setup>
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import useCardDescription from 'src/composables/useCardDescription';
import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';
import filter from './TravelFilter.js';

import { toDate } from 'src/filters';

const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
});

const route = useRoute();
const { t } = useI18n();

const entityId = computed(() => {
    return $props.id || route.params.id;
});

const data = ref(useCardDescription());
const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.id));
</script>

<template>
    <CardDescriptor
        module="Travel"
        :url="`Travels/${entityId}`"
        :title="data.title"
        :subtitle="data.subtitle"
        :filter="filter"
        data-key="Travel"
        @on-fetch="setData"
    >
        <template #menu="{ entity }">
            <TravelDescriptorMenuItems :travel="entity" />
        </template>
        <template #body="{ entity }">
            <VnLv :label="t('globals.warehouseIn')" :value="entity.warehouseIn?.name" />
            <VnLv :label="t('globals.warehouseOut')" :value="entity.warehouseOut?.name" />
            <VnLv :label="t('globals.shipped')" :value="toDate(entity.shipped)" />
            <VnLv :label="t('globals.landed')" :value="toDate(entity.landed)" />
            <VnLv :label="t('globals.totalEntries')" :value="entity.totalEntries" />
        </template>
        <template #icons="{ entity }">
            <QCardActions class="q-gutter-x-md">
                <QIcon v-if="entity.isRaid" name="vn:net" color="primary" size="xs">
                    <QTooltip>
                        {{
                            t('globals.raid', { daysInForward: entity.daysInForward })
                        }}</QTooltip
                    >
                </QIcon>
            </QCardActions>
        </template>
        <template #actions="{ entity }">
            <QCardActions>
                <QBtn
                    :to="{
                        name: 'TravelList',
                        query: {
                            params: JSON.stringify({
                                agencyModeFk: entity.agencyModeFk,
                            }),
                        },
                    }"
                    size="md"
                    icon="local_airport"
                    color="primary"
                >
                    <QTooltip>{{ t('All travels with current agency') }}</QTooltip>
                </QBtn>
            </QCardActions>
        </template>
    </CardDescriptor>
</template>

<i18n>
es:
    Go to module index: Ir al índice del módulo
    The travel will be deleted: El envío será eliminado
    Do you want to delete this travel?: ¿Quieres eliminar este envío?
    All travels with current agency: Todos los envíos con la agencia actual
</i18n>
