<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toDate } from 'src/filters';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import useCardDescription from 'src/composables/useCardDescription';

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

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

const filter = {
    fields: [
        'id',
        'ref',
        'shipped',
        'landed',
        'totalEntries',
        'warehouseInFk',
        'warehouseOutFk',
        'cargoSupplierFk',
    ],
    include: [
        {
            relation: 'warehouseIn',
            scope: {
                fields: ['name'],
            },
        },
        {
            relation: 'warehouseOut',
            scope: {
                fields: ['name'],
            },
        },
    ],
};

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"
        @on-fetch="setData"
        data-key="travelData"
    >
        <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>
    </CardDescriptor>
</template>
<i18n>

</i18n>
