<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'components/ui/VnLv.vue';
import useCardDescription from 'composables/useCardDescription';
import { dashIfEmpty, toDateHourMin } from 'src/filters';
import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
import RoadmapDescriptorMenu from 'pages/Route/Roadmap/RoadmapDescriptorMenu.vue';

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 filter = { include: [{ relation: 'supplier' }] };
const data = ref(useCardDescription());
const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
</script>

<template>
    <CardDescriptor
        module="Roadmap"
        :url="`Roadmaps/${entityId}`"
        :filter="filter"
        :title="data.title"
        :subtitle="data.subtitle"
        data-key="Roadmap"
        @on-fetch="setData"
    >
        <template #body="{ entity }">
            <VnLv :label="t('Roadmap')" :value="entity?.name" />
            <VnLv :label="t('ETD')" :value="toDateHourMin(entity?.etd)" />
            <VnLv :label="t('Carrier')">
                <template #value>
                    <span class="link" v-if="entity?.supplier?.id">
                        {{ dashIfEmpty(entity?.supplier?.nickname) }}
                        <SupplierDescriptorProxy :id="entity?.supplier?.id" />
                    </span>
                </template>
            </VnLv>
        </template>
        <template #menu="{ entity }">
            <RoadmapDescriptorMenu :route="entity" />
        </template>
    </CardDescriptor>
</template>
<i18n>
es:
    Roadmap: Troncal
    Carrier: Transportista
</i18n>
