<script setup>
import axios from 'axios';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref, onMounted } from 'vue';
import { dashIfEmpty } from 'src/filters';
import { useStateStore } from 'stores/useStateStore';

import FetchData from 'components/FetchData.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import ItemDescriptorProxy from 'pages/Item/Card/ItemDescriptorProxy.vue';
import VnLv from 'components/ui/VnLv.vue';
import VnTable from 'components/VnTable/VnTable.vue';

const route = useRoute();
const { t } = useI18n();
const volumeSummary = ref(null);
const volumeRef = ref();
const volumes = ref([]);
const volumeFilter = ref({
    include: [
        {
            relation: 'item',
        },
    ],
    where: { orderFk: route.params.id },
});

const columns = [
    {
        name: 'itemFk',
        label: t('item'),
        align: 'left',
    },
    {
        name: 'description',
        label: t('globals.description'),
        align: 'left',
    },
    {
        name: 'quantity',
        label: t('quantity'),
        align: 'left',
    },
    {
        name: 'volume',
        label: t('volume'),
        align: 'left',
    },
];

const loadVolumes = async (rows) => {
    if (!rows) return;
    const { data } = await axios.get(`Orders/${route.params.id}/getVolumes`);
    rows.forEach((order) => {
        (data.volumes || []).forEach((volume) => {
            if (order.itemFk === volume.itemFk) order.volume = volume.volume;
        });
    });
    volumes.value = rows;
};

const stateStore = useStateStore();
onMounted(async () => (stateStore.rightDrawer = false));
</script>

<template>
    <FetchData
        :url="`Orders/${route.params.id}/getTotalVolume`"
        @on-fetch="(data) => (volumeSummary = data)"
        auto-load
    />
    <QCard v-if="volumeSummary" class="order-volume-summary q-pa-lg">
        <VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
        <VnLv
            :label="t('boxes')"
            :value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
        />
    </QCard>
    <VnTable
        ref="volumeRef"
        data-key="OrderCatalogVolume"
        url="OrderRows"
        :columns="columns"
        auto-load
        :user-filter="volumeFilter"
        order="itemFk"
        @on-fetch="(data) => loadVolumes(data)"
        :right-search="false"
        :column-search="false"
        :disable-option="{ card: true }"
    >
        <template #column-itemFk="{ row }">
            <span class="link">
                {{ row.itemFk }}
                <ItemDescriptorProxy :id="row.itemFk" />
            </span>
        </template>
        <template #column-description="{ row }">
            <div class="row column full-width justify-between items-start">
                {{ row?.item?.name }}
                <div v-if="row?.item?.subName" class="subName">
                    {{ row?.item?.subName.toUpperCase() }}
                </div>
            </div>
            <FetchedTags :item="row?.item" />
        </template>
        <template #column-volume="{ rowIndex }">
            {{ volumes?.[rowIndex]?.volume }}
        </template>
    </VnTable>
</template>

<style lang="scss">
.order-volume-summary {
    .vn-label-value {
        display: flex;
        justify-content: flex-end;
        gap: 2%;

        .label {
            color: var(--vn-label-color);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .value {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.subName {
    color: var(--vn-label-color);
    text-transform: uppercase;
}
</style>
<i18n>
en:
    summary: Summary
    total: Total
    boxes: Boxes
    item: Item
    quantity: Quantity
    volume: m³ per quantity
es:
    summary: Resumen
    total: Total
    boxes: Cajas
    item: Artículo
    quantity: Cantidad
    volume: m³ por cantidad
</i18n>
