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

import CardDescriptor from 'components/ui/CardDescriptor.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import InvoiceOutDescriptorMenu from './InvoiceOutDescriptorMenu.vue';

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

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

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

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

const filter = {
    include: [
        {
            relation: 'company',
            scope: {
                fields: ['id', 'code'],
            },
        },
        {
            relation: 'client',
            scope: {
                fields: ['id', 'name', 'email'],
            },
        },
    ],
};

const descriptor = ref();

function ticketFilter(invoice) {
    return JSON.stringify({ refFk: invoice.ref });
}
const data = ref(useCardDescription());
const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.id));
</script>

<template>
    <CardDescriptor
        ref="descriptor"
        module="InvoiceOut"
        :url="`InvoiceOuts/${entityId}`"
        :filter="filter"
        :title="data.title"
        :subtitle="data.subtitle"
        @on-fetch="setData"
        data-key="invoiceOutData"
    >
        <template #menu="{ entity }">
            <InvoiceOutDescriptorMenu :invoice-out-data="entity" />
        </template>
        <template #body="{ entity }">
            <VnLv :label="t('invoiceOut.card.issued')" :value="toDate(entity.issued)" />
            <VnLv :label="t('globals.amount')" :value="toCurrency(entity.amount)" />
            <VnLv v-if="entity.client" :label="t('invoiceOut.card.client')">
                <template #value>
                    <span class="link">
                        {{ entity.client.name }}
                        <CustomerDescriptorProxy :id="entity.client.id" />
                    </span>
                </template>
            </VnLv>
            <VnLv
                v-if="entity.company"
                :label="t('invoiceOut.card.company')"
                :value="entity.company.code"
            />
        </template>
        <template #actions="{ entity }">
            <QCardActions>
                <QBtn
                    v-if="entity.client"
                    size="md"
                    icon="vn:client"
                    color="primary"
                    :to="{ name: 'CustomerCard', params: { id: entity.client.id } }"
                >
                    <QTooltip>{{ t('invoiceOut.card.customerCard') }}</QTooltip>
                </QBtn>
                <QBtn
                    size="md"
                    icon="vn:ticket"
                    color="primary"
                    :to="{
                        name: 'TicketList',
                        query: { q: ticketFilter(entity) },
                    }"
                >
                    <QTooltip>{{ t('invoiceOut.card.ticketList') }}</QTooltip>
                </QBtn>
            </QCardActions>
        </template>
    </CardDescriptor>
</template>
