<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toDate, toPercentage } from 'src/filters';
import { useState } from 'src/composables/useState';
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
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';
import { getUrl } from 'src/composables/getUrl';

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

const route = useRoute();
const state = useState();
const { t } = useI18n();
const salixUrl = ref();
const entityId = computed(() => {
    return $props.id || route.params.id;
});

const filter = {
    include: [
        {
            relation: 'client',
            scope: {
                include: [
                    { relation: 'salesPersonUser' },
                    {
                        relation: 'claimsRatio',
                        scope: {
                            fields: ['claimingRate'],
                            limit: 1,
                        },
                    },
                ],
            },
        },
        {
            relation: 'claimState',
        },
        {
            relation: 'ticket',
            scope: {
                include: [
                    { relation: 'zone' },
                    {
                        relation: 'address',
                        scope: {
                            include: { relation: 'province' },
                        },
                    },
                ],
            },
        },
        {
            relation: 'worker',
            scope: {
                include: { relation: 'user' },
            },
        },
    ],
};

const STATE_COLOR = {
    pending: 'warning',
    managed: 'info',
    resolved: 'positive',
};
function stateColor(code) {
    return STATE_COLOR[code];
}
const data = ref(useCardDescription());
const setData = (entity) => {
    if (!entity) return;
    data.value = useCardDescription(entity.client.name, entity.id);
    state.set('ClaimDescriptor', entity);
};
onMounted(async () => {
    salixUrl.value = await getUrl('');
});
</script>

<template>
    <CardDescriptor
        ref="descriptor"
        :url="`Claims/${entityId}`"
        :filter="filter"
        module="Claim"
        :title="data.title"
        :subtitle="data.subtitle"
        @on-fetch="setData"
        data-key="claimData"
    >
        <template #menu="{ entity }">
            <ClaimDescriptorMenu :claim="entity" />
        </template>
        <template #body="{ entity }">
            <VnLv v-if="entity.claimState" :label="t('claim.card.state')">
                <template #value>
                    <QBadge
                        :color="stateColor(entity.claimState.code)"
                        text-color="black"
                        dense
                    >
                        {{ entity.claimState.description }}
                    </QBadge>
                </template>
            </VnLv>
            <VnLv :label="t('claim.card.created')" :value="toDate(entity.created)" />
            <VnLv :label="t('claim.card.commercial')">
                <template #value>
                    <VnUserLink
                        :name="entity.client?.salesPersonUser?.name"
                        :worker-id="entity.client?.salesPersonFk"
                    />
                </template>
            </VnLv>
            <VnLv
                v-if="entity.worker"
                :label="t('claim.card.assignedTo')"
                :value="entity.worker.user.name"
            >
                <template #value>
                    <VnUserLink
                        :name="entity.worker.user.name"
                        :worker-id="entity.worker.id"
                    />
                </template>
            </VnLv>
            <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
            <VnLv
                :label="t('claim.card.province')"
                :value="entity.ticket?.address?.province?.name"
            />
            <VnLv :label="t('claim.card.ticketId')">
                <template #value>
                    <span class="link">
                        {{ entity.ticketFk }}

                        <TicketDescriptorProxy :id="entity.ticketFk" />
                    </span>
                </template>
            </VnLv>
            <VnLv
                :label="t('claimRate')"
                :value="toPercentage(entity.client?.claimsRatio?.claimingRate)"
            />
        </template>
        <template #actions="{ entity }">
            <QCardActions>
                <QBtn
                    size="md"
                    icon="vn:client"
                    color="primary"
                    :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
                >
                    <QTooltip>{{ t('claim.card.customerSummary') }}</QTooltip>
                </QBtn>
                <QBtn
                    size="md"
                    icon="vn:ticket"
                    color="primary"
                    :to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
                >
                    <QTooltip>{{ t('claim.card.claimedTicket') }}</QTooltip>
                </QBtn>
                <QBtn
                    size="md"
                    icon="assignment"
                    color="primary"
                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
                >
                    <QTooltip>{{ t('claim.card.saleTracking') }}</QTooltip>
                </QBtn>
                <QBtn
                    size="md"
                    icon="visibility"
                    color="primary"
                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
                >
                    <QTooltip>{{ t('claim.card.ticketTracking') }}</QTooltip>
                </QBtn>
            </QCardActions>
        </template>
    </CardDescriptor>
</template>
<style scoped>
.q-item__label {
    margin-top: 0;
}
</style>
<i18n>
    en:
        claimRate: Claming rate
    es:
        claimRate: Ratio de reclamación
</i18n>