<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toCurrency } from 'src/filters';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import useCardDescription from 'src/composables/useCardDescription';
import VnUserLink from 'src/components/ui/VnUserLink.vue';

const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
    summary: {
        type: Object,
        default: null,
    },
});
const route = useRoute();
const { t } = useI18n();
const entityId = computed(() => {
    return $props.id || route.params.id;
});

const data = ref(useCardDescription());
const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
</script>

<template>
    <CardDescriptor
        module="Customer"
        :url="`Clients/${entityId}/getCard`"
        :title="data.title"
        :subtitle="data.subtitle"
        @on-fetch="setData"
        :summary="$props.summary"
        data-key="customerData"
    >
        <template #body="{ entity }">
            <VnLv :label="t('customer.card.payMethod')" :value="entity.payMethod.name" />

            <VnLv :label="t('customer.card.credit')" :value="toCurrency(entity.credit)" />
            <VnLv
                :label="t('customer.card.securedCredit')"
                :value="toCurrency(entity.creditInsurance)"
            />

            <VnLv :label="t('customer.card.debt')" :value="toCurrency(entity.debt)" />
            <VnLv v-if="entity.salesPersonUser" :label="t('customer.card.salesPerson')">
                <template #value>
                    <VnUserLink
                        :name="entity.salesPersonUser?.name"
                        :worker-id="entity.salesPersonFk"
                    />
                </template>
            </VnLv>
            <VnLv
                :label="t('customer.card.businessTypeFk')"
                :value="entity.businessTypeFk"
            />
        </template>
        <template #icons="{ entity }">
            <QCardActions>
                <QIcon
                    v-if="entity.isActive == false"
                    name="vn:disabled"
                    size="xs"
                    color="primary"
                >
                    <QTooltip>{{ t('customer.card.isDisabled') }}</QTooltip>
                </QIcon>
                <QIcon
                    v-if="entity.isFreezed == true"
                    name="vn:frozen"
                    size="xs"
                    color="primary"
                >
                    <QTooltip>{{ t('customer.card.isFrozen') }}</QTooltip>
                </QIcon>
                <QIcon
                    v-if="entity.debt > entity.credit"
                    name="vn:risk"
                    size="xs"
                    color="primary"
                >
                    <QTooltip>{{ t('customer.card.hasDebt') }}</QTooltip>
                </QIcon>
                <QIcon
                    v-if="entity.isTaxDataChecked == false"
                    name="vn:no036"
                    size="xs"
                    color="primary"
                >
                    <QTooltip>{{ t('customer.card.notChecked') }}</QTooltip>
                </QIcon>
            </QCardActions>
        </template>
        <template #actions="{ entity }">
            <QCardActions>
                <QBtn
                    :to="{
                        name: 'TicketList',
                        query: { params: JSON.stringify({ clientFk: entity.id }) },
                    }"
                    size="md"
                    icon="vn:ticket"
                    color="primary"
                >
                    <QTooltip>{{ t('ticketList') }}</QTooltip>
                </QBtn>
                <QBtn
                    :to="{
                        name: 'InvoiceOutList',
                        query: { params: JSON.stringify({ clientFk: entity.id }) },
                    }"
                    size="md"
                    icon="vn:invoice-out"
                    color="primary"
                >
                    <QTooltip>{{ t('invoiceOutList') }}</QTooltip>
                </QBtn>
            </QCardActions>
        </template>
    </CardDescriptor>
</template>
<i18n>
{
    "en": {
        "ticketList": "Customer ticket list",
        "invoiceOutList": "Customer invoice out list"
    },
    "es": {
        "ticketList": "Listado de tickets del cliente",
        "invoiceOutList": "Listado de facturas del cliente"
    }
}
</i18n>
