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

import VnPaginate from 'components/ui/VnPaginate.vue';
import FetchData from 'components/FetchData.vue';
import VnLv from 'components/ui/VnLv.vue';
import CardList from 'components/ui/CardList.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';

import { dashIfEmpty } from 'src/filters';
import axios from 'axios';

const route = useRoute();
const { t } = useI18n();
const volumeSummary = ref(null);

const loadVolumes = async (rows) => {
    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;
            }
        });
    });
};
</script>

<template>
    <FetchData
        :url="`Orders/${route.params.id}/getTotalVolume`"
        @on-fetch="(data) => (volumeSummary = data)"
        auto-load
    />
    <QPage class="column items-center q-pa-md">
        <div class="vn-card-list">
            <div
                v-if="!volumeSummary?.totalVolume && !volumeSummary?.totalBoxes"
                class="no-result"
            >
                {{ t('globals.noResults') }}
            </div>
            <QCard v-else class="order-volume-summary q-pa-lg">
                <p class="header text-right block">
                    {{ t('summary') }}
                </p>
                <VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
                <VnLv
                    :label="t('boxes')"
                    :value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
                />
            </QCard>
            <VnPaginate
                data-key="OrderCatalogVolume"
                url="OrderRows"
                :limit="20"
                auto-load
                :filter="{
                    include: {
                        relation: 'item',
                    },
                    where: { orderFk: route.params.id },
                }"
                order="itemFk"
                @on-fetch="(data) => loadVolumes(data)"
            >
                <template #body="{ rows }">
                    <div class="catalog-list q-mt-xl">
                        <CardList
                            v-for="row in rows"
                            :key="row.id"
                            :id="row.id"
                            :title="row?.item?.name"
                            class="cursor-inherit"
                        >
                            <template #list-items>
                                <div class="q-mb-sm">
                                    <fetched-tags :item="row.item" :max-length="5" />
                                </div>
                                <VnLv :label="t('item')" :value="row.item.id" />
                                <VnLv :label="t('subName')">
                                    <template #value>
                                        <span class="text-uppercase">
                                            {{ row.item.subName }}
                                        </span>
                                    </template>
                                </VnLv>
                                <VnLv :label="t('quantity')" :value="row.quantity" />
                                <VnLv :label="t('volume')" :value="row.volume" />
                            </template>
                        </CardList>
                    </div>
                </template>
            </VnPaginate>
        </div>
    </QPage>
</template>

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

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

        .value {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
</style>
<style lang="scss" scoped>
.header {
    color: $primary;
    font-weight: bold;
    margin-bottom: 25px;
    font-size: 20px;
    display: inline-block;
}

.no-result {
    font-size: 24px;
    font-weight: bold;
    color: var(--vn-label);
    text-align: center;
}
</style>
<i18n>
en:
    summary: Summary
    total: Total
    boxes: Boxes
    item: Item
    subName: Subname
    quantity: Quantity
    volume: m³ per quantity
es:
    summary: Resumen
    total: Total
    boxes: Cajas
    item: Artículo
    subName: Subname
    quantity: Cantidad
    volume: m³ por cantidad
</i18n>
