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

import VnLv from 'src/components/ui/VnLv.vue';
import CardSummary from 'components/ui/CardSummary.vue';
import VnTitle from 'src/components/common/VnTitle.vue';

import { getUrl } from 'src/composables/getUrl';
import { toCurrency } from 'filters/index';
import { toTimeFormat } from 'src/filters/date';
import axios from 'axios';
import ZoneDescriptorMenuItems from './ZoneDescriptorMenuItems.vue';

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

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

const entityId = computed(() => $props.id || route.params.id);
const zoneUrl = ref();

const filter = computed(() => {
    const filter = {
        include: {
            relation: 'agencyMode',
            fields: ['name'],
        },
        where: {
            id: entityId,
        },
    };
    return filter;
});

const columns = computed(() => [
    {
        label: t('list.name'),
        name: 'name',
        field: 'warehouse',
        align: 'left',
        format: (val) => val.name,
    },
]);
const warehouses = ref([]);

const getWarehouses = async () => {
    const params = {
        filter: {
            include: {
                relation: 'warehouse',
                fields: ['name'],
            },
        },
    };

    const { data } = await axios.get(`Zones/${entityId.value}/warehouses`, { params });
    warehouses.value = data;
};

onMounted(async () => {
    zoneUrl.value = (await getUrl('')) + `zone/${entityId.value}/`;
    await getWarehouses();
});
</script>

<template>
    <CardSummary
        data-key="ZoneSummary"
        ref="summary"
        url="Zones/findOne"
        :filter="filter"
    >
        <template #header="{ entity }">
            <div>#{{ entity.id }} - {{ entity.name }}</div>
        </template>
        <template #menu="{ entity }">
            <ZoneDescriptorMenuItems :zone="entity" />
        </template>
        <template #body="{ entity: zone }">
            <QCard class="vn-one">
                <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
                <VnLv :label="t('list.agency')" :value="zone.agencyMode?.name" />
                <VnLv :label="t('list.price')" :value="toCurrency(zone.price)" />
                <VnLv :label="t('zone.bonus')" :value="toCurrency(zone.bonus)" />
            </QCard>
            <QCard class="vn-one">
                <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
                <VnLv :label="t('summary.closeHour')" :value="toTimeFormat(zone.hour)" />
                <VnLv :label="t('zone.travelingDays')" :value="zone.travelingDays" />
                <QCheckbox
                    :label="t('zone.volumetric')"
                    v-model="zone.isVolumetric"
                    :disable="true"
                />
            </QCard>
            <QCard class="full-width">
                <VnTitle :url="zoneUrl + `warehouses`" :text="t('list.warehouse')" />
                <QTable
                    :columns="columns"
                    :rows="warehouses"
                    :no-data-label="t('globals.noResults')"
                />
            </QCard>
        </template>
    </CardSummary>
</template>
