<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import EntityDescriptor from 'components/ui/EntityDescriptor.vue';
import useCardDescription from 'composables/useCardDescription';
import VnLv from 'components/ui/VnLv.vue';
import { dashIfEmpty, toDate } from 'src/filters';
import RouteDescriptorMenu from 'pages/Route/Card/RouteDescriptorMenu.vue';
import filter from './RouteFilter.js';
import axios from 'axios';

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

const route = useRoute();
const zone = ref();
const zoneId = ref();
const entityId = computed(() => {
    return $props.id || route.params.id;
});
const getZone = async () => {
    const filter = {
        where: { routeFk: $props.id ? $props.id : route.params.id },
    };
    const { data } = await axios.get('Tickets/filter', {
        params: {
            filter: JSON.stringify(filter),
        },
    });

    if (!data.length) return;
    const firstRecord = data[0];

    zoneId.value = firstRecord.zoneFk;
    const { data: zoneData } = await axios.get(`Zones/${zoneId.value}`);
    zone.value = zoneData.name;
};
const data = ref(useCardDescription());
onMounted(async () => {
    getZone();
});
</script>
<template>
    <EntityDescriptor
        :url="`Routes/${entityId}`"
        :filter="filter"
        :title="null"
        data-key="Route"
        width="lg-width"
    >
        <template #body="{ entity }">
            <VnLv :label="$t('Date')" :value="toDate(entity?.dated)" />
            <VnLv :label="$t('Agency')" :value="entity?.agencyMode?.name" />
            <VnLv :label="$t('Zone')" :value="zone" />
            <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>
        <template #actions="{ entity }">
            <QCardActions class="flex justify-center" style="padding-inline: 0">
                <QBtn
                    size="md"
                    icon="vn:delivery"
                    color="primary"
                    :href="`https://grafana.verdnatura.es/d/edkvyi479dbeob/pronostico-de-entregas?orgId=1&var-vRouteFk=${entity.id}`"
                    target="_blank"
                >
                    <QTooltip>{{ $t('route.deliveryForecast') }}</QTooltip>
                </QBtn>
            </QCardActions>
        </template>
    </EntityDescriptor>
</template>
<i18n>
es:
    Date: Fecha
    Agency: Agencia
    Zone: Zona
    Volume: Volumen
    Description: Descripción
</i18n>
