<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, toDate } from 'src/filters';
import RouteDescriptorMenu from 'pages/Route/Card/RouteDescriptorMenu.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 = {
    fields: [
        'id',
        'workerFk',
        'agencyModeFk',
        'created',
        'm3',
        'warehouseFk',
        'description',
        'vehicleFk',
        'kmStart',
        'kmEnd',
        'started',
        'finished',
        'cost',
        'zoneFk',
        'isOk',
    ],
    include: [
        { relation: 'agencyMode', scope: { fields: ['id', 'name'] } },
        {
            relation: 'vehicle',
            scope: { fields: ['id', 'm3'] },
        },
        { relation: 'zone', scope: { fields: ['id', 'name'] } },
        {
            relation: 'worker',
            scope: {
                fields: ['id'],
                include: {
                    relation: 'user',
                    scope: {
                        fields: ['id'],
                        include: { relation: 'emailUser', scope: { fields: ['email'] } },
                    },
                },
            },
        },
    ],
};
const data = ref(useCardDescription());
const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
</script>

<template>
    <CardDescriptor
        module="Route"
        :url="`Routes/${entityId}`"
        :filter="filter"
        :title="data.title"
        :subtitle="data.subtitle"
        data-key="routeData"
        @on-fetch="setData"
    >
        <template #body="{ entity }">
            <VnLv :label="t('Date')" :value="toDate(entity?.created)" />
            <VnLv :label="t('Agency')" :value="entity?.agencyMode?.name" />
            <VnLv :label="t('Zone')" :value="entity?.zone?.name" />
            <VnLv
                :label="t('Volume')"
                :value="`${dashIfEmpty(entity?.m3)} / ${dashIfEmpty(
                    entity?.vehicle?.m3
                )} m³`"
            />
            <VnLv :label="t('Description')" :value="entity?.description" />
        </template>
        <template #menu="{ entity }">
            <RouteDescriptorMenu :route="entity" />
        </template>
    </CardDescriptor>
</template>
<i18n>
es:
    Date: Fecha
    Agency: Agencia
    Zone: Zona
    Volume: Volumen
    Description: Descripción
</i18n>
