<script setup>
import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { toCurrency, toDate } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { getUrl } from 'src/composables/getUrl';

onMounted(async () => {
    fetch();
    salixUrl.value = await getUrl('');
    invoiceOutUrl.value = salixUrl.value + `invoiceOut/${entityId.value}/`;
});

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

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

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

const salixUrl = ref();
const invoiceOutUrl = ref();
const tickets = ref(null);

function fetch() {
    axios.get(`InvoiceOuts/${entityId.value}/getTickets`).then(({ data }) => {
        tickets.value = data;
    });
}

const taxColumns = ref([
    {
        name: 'item',
        label: 'invoiceOut.summary.type',
        field: (row) => row.name,
        sortable: true,
    },
    {
        name: 'landed',
        label: 'invoiceOut.summary.taxableBase',
        field: (row) => row.taxableBase,
        format: (value) => toCurrency(value),
        sortable: true,
    },
    {
        name: 'quantity',
        label: 'invoiceOut.summary.rate',
        field: (row) => row.rate,
        sortable: true,
    },
    {
        name: 'invoiceOuted',
        label: 'invoiceOut.summary.fee',
        field: (row) => row.vat,
        sortable: true,
    },
]);

const ticketsColumns = ref([
    {
        name: 'item',
        label: 'invoiceOut.summary.ticketId',
        field: (row) => row.id,
        sortable: true,
    },
    {
        name: 'quantity',
        label: 'invoiceOut.summary.nickname',
        field: (row) => row.nickname,
        sortable: true,
    },
    {
        name: 'landed',
        label: 'invoiceOut.summary.shipped',
        field: (row) => row.shipped,
        format: (value) => toDate(value),
        sortable: true,
    },
    {
        name: 'landed',
        label: 'invoiceOut.summary.totalWithVat',
        field: (row) => row.totalWithVat,
        format: (value) => toCurrency(value),
        sortable: true,
    },
]);
</script>

<template>
    <CardSummary ref="summary" :url="`InvoiceOuts/${entityId}/summary`">
        <template #header="{ entity: { invoiceOut } }">
            <div>{{ invoiceOut.ref }} - {{ invoiceOut.client?.socialName }}</div>
        </template>
        <template #body="{ entity: { invoiceOut } }">
            <QCard class="vn-one">
                <div class="header">
                    {{ t('invoiceOut.pageTitles.basicData') }}
                </div>
                <VnLv
                    :label="t('invoiceOut.summary.issued')"
                    :value="toDate(invoiceOut.issued)"
                />
                <VnLv
                    :label="t('invoiceOut.summary.dued')"
                    :value="toDate(invoiceOut.dued)"
                />
                <VnLv
                    :label="t('invoiceOut.summary.created')"
                    :value="toDate(invoiceOut.created)"
                />
                <VnLv
                    :label="t('invoiceOut.summary.booked')"
                    :value="toDate(invoiceOut.booked)"
                />
                <VnLv
                    :label="t('invoiceOut.summary.company')"
                    :value="invoiceOut.company.code"
                />
            </QCard>
            <QCard class="vn-three">
                <div class="header">
                    {{ t('invoiceOut.summary.taxBreakdown') }}
                </div>
                <QTable :columns="taxColumns" :rows="invoiceOut.taxesBreakdown" flat>
                    <template #header="props">
                        <QTr :props="props">
                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
                                {{ t(col.label) }}
                            </QTh>
                        </QTr>
                    </template>
                </QTable>
            </QCard>
            <QCard class="vn-three">
                <div class="header">
                    {{ t('invoiceOut.summary.tickets') }}
                </div>
                <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
                    <template #header="props">
                        <QTr :props="props">
                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
                                {{ t(col.label) }}
                            </QTh>
                        </QTr>
                    </template>
                </QTable>
            </QCard>
        </template>
    </CardSummary>
</template>
