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

import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import VnRow from 'components/ui/VnRow.vue';
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';

import { toDate, toCurrency } from 'src/filters';
import { getUrl } from 'src/composables/getUrl';
import axios from 'axios';

onUpdated(() => summaryRef.value.fetch());

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

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

const entityId = computed(() => $props.id || route.params.id);
const summaryRef = ref();
const entry = ref();
const entryBuys = ref([]);
const entryUrl = ref();

onMounted(async () => {
    entryUrl.value = (await getUrl('entry/')) + entityId.value;
});

const tableColumnComponents = {
    quantity: {
        component: () => 'span',
    },
    stickers: {
        component: () => 'span',
    },
    packagingFk: {
        component: () => 'span',
    },
    weight: {
        component: () => 'span',
    },
    packing: {
        component: () => 'span',
    },
    grouping: {
        component: () => 'span',
    },
    buyingValue: {
        component: () => 'span',
    },
    amount: {
        component: () => 'span',
    },
    pvp: {
        component: () => 'span',
    },
};

const entriesTableColumns = computed(() => {
    return [
        {
            label: t('entry.summary.quantity'),
            field: 'quantity',
            name: 'quantity',
            align: 'left',
        },
        {
            label: t('entry.summary.stickers'),
            field: 'stickers',
            name: 'stickers',
            align: 'left',
        },
        {
            label: t('entry.summary.package'),
            field: 'packagingFk',
            name: 'packagingFk',
            align: 'left',
        },
        {
            label: t('entry.summary.weight'),
            field: 'weight',
            name: 'weight',
            align: 'left',
        },
        {
            label: t('entry.summary.packing'),
            field: 'packing',
            name: 'packing',
            align: 'left',
        },
        {
            label: t('entry.summary.grouping'),
            field: 'grouping',
            name: 'grouping',
            align: 'left',
        },
        {
            label: t('entry.summary.buyingValue'),
            field: 'buyingValue',
            name: 'buyingValue',
            align: 'left',
            format: (value) => toCurrency(value),
        },
        {
            label: t('entry.summary.import'),
            name: 'amount',
            align: 'left',
            format: (_, row) => toCurrency(row.buyingValue * row.quantity),
        },
        {
            label: t('entry.summary.pvp'),
            name: 'pvp',
            align: 'left',
            format: (_, row) => toCurrency(row.price2) + ' / ' + toCurrency(row.price3),
        },
    ];
});

async function setEntryData(data) {
    if (data) entry.value = data;
    await fetchEntryBuys();
}

const fetchEntryBuys = async () => {
    try {
        const { data } = await axios.get(`Entries/${entry.value.id}/getBuys`);
        if (data) entryBuys.value = data;
    } catch (err) {
        console.error('Error fetching entry buys');
    }
};
</script>

<template>
    <CardSummary
        ref="summaryRef"
        :url="`Entries/${entityId}/getEntry`"
        @on-fetch="(data) => setEntryData(data)"
    >
        <template #header-left>
            <a class="header link" :href="entryUrl">
                <QIcon name="open_in_new" color="white" size="sm" />
            </a>
        </template>
        <template #header>
            <span>{{ entry.id }} - {{ entry.supplier.nickname }}</span>
        </template>

        <template #body>
            <QCard class="vn-one">
                <a class="header link" :href="entryUrl">
                    {{ t('globals.summary.basicData') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <VnRow>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.commission')"
                            :value="entry.commission"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.currency')"
                            :value="entry.currency.name"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.company')"
                            :value="entry.company.code"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.reference')"
                            :value="entry.reference"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.invoiceNumber')"
                            :value="entry.invoiceNumber"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.ordered')"
                            :value="entry.isOrdered"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.confirmed')"
                            :value="entry.isConfirmed"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.booked')"
                            :value="entry.isBooked"
                        />
                    </div>
                    <div class="col">
                        <VnLv :label="t('entry.summary.raid')" :value="entry.isRaid" />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.excludedFromAvailable')"
                            :value="entry.isExcludedFromAvailable"
                        />
                    </div>
                </VnRow>
            </QCard>
            <QCard class="vn-one">
                <a class="header link" :href="entryUrl">
                    {{ t('Travel data') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <VnRow>
                    <div class="col">
                        <VnLv :label="t('entry.summary.travelReference')">
                            <template #value>
                                <span class="link">
                                    {{ entry.travel.ref }}
                                    <TravelDescriptorProxy :id="entry.travel.id" />
                                </span>
                            </template>
                        </VnLv>
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.travelAgency')"
                            :value="entry.travel.agency.name"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.travelShipped')"
                            :value="toDate(entry.travel.shipped)"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.travelWarehouseOut')"
                            :value="entry.travel.warehouseOut.name"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.travelDelivered')"
                            :value="entry.travel.isDelivered"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.travelLanded')"
                            :value="toDate(entry.travel.landed)"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.travelWarehouseIn')"
                            :value="entry.travel.warehouseIn.name"
                        />
                    </div>
                    <div class="col">
                        <VnLv
                            :label="t('entry.summary.travelReceived')"
                            :value="entry.travel.isReceived"
                        />
                    </div>
                </VnRow>
            </QCard>
            <QCard class="vn-two" style="min-width: 100%">
                <a class="header">
                    {{ t('entry.summary.buys') }}
                </a>
                <QTable
                    :rows="entryBuys"
                    :columns="entriesTableColumns"
                    hide-bottom
                    row-key="index"
                    class="full-width q-mt-md"
                >
                    <template #body="{ cols, row, rowIndex }">
                        <QTr no-hover>
                            <QTd v-for="col in cols" :key="col.name">
                                <component
                                    :is="tableColumnComponents[col.name].component()"
                                >
                                    <template
                                        v-if="
                                            col.name !== 'observation' &&
                                            col.name !== 'isConfirmed'
                                        "
                                        >{{ col.value }}</template
                                    >
                                    <QTooltip v-if="col.toolTip">{{
                                        col.toolTip
                                    }}</QTooltip>
                                </component>
                            </QTd>
                        </QTr>
                        <QTr no-hover>
                            <QTd>
                                <span>{{ row.item.itemType.code }}</span>
                            </QTd>
                            <QTd>
                                <span>{{ row.item.id }}</span>
                            </QTd>
                            <QTd>
                                <span>{{ row.item.size }}</span>
                            </QTd>
                            <QTd>
                                <span>{{ toCurrency(row.item.minPrice) }}</span>
                            </QTd>
                            <QTd colspan="6">
                                <span>{{ row.item.concept }}</span>
                                <span v-if="row.item.subName" class="subName">
                                    {{ row.item.subName }}
                                </span>
                                <fetched-tags :item="row.item" :max-length="5" />
                            </QTd>
                        </QTr>
                        <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
                        <QTr
                            v-if="rowIndex !== entryBuys.length - 1"
                            class="separation-row"
                        >
                            <QTd colspan="10" style="height: 24px" />
                        </QTr>
                    </template>
                </QTable>
            </QCard>
        </template>
    </CardSummary>
</template>

<style lang="scss" scoped>
.separation-row {
    background-color: var(--vn-gray) !important;
}
</style>

<i18n>
es:
    Travel data: 'Datos envío'
</i18n>
