<script setup>
import { useI18n } from 'vue-i18n';
import { toDate, toPercentage } from 'filters/index';
import VnTable from 'src/components/VnTable/VnTable.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';

const { t } = useI18n();

const $props = defineProps({
    id: {
        type: [Number, String],
        required: true,
    },
});

const columns = [
    {
        name: 'itemFk',
        label: t('Id item'),
        columnFilter: false,
        align: 'left',
    },
    {
        name: 'ticketFk',
        label: t('Ticket'),
        columnFilter: false,
        align: 'left',
    },
    {
        name: 'claimDestinationFk',
        label: t('Destination'),
        columnFilter: false,
        align: 'left',
    },
    {
        name: 'landed',
        label: t('Landed'),
        format: (row) => toDate(row.landed),
        align: 'left',
    },
    {
        name: 'quantity',
        label: t('Quantity'),
        align: 'left',
    },
    {
        name: 'concept',
        label: t('Description'),
        align: 'left',
    },
    {
        name: 'price',
        label: t('Price'),
        align: 'left',
    },
    {
        name: 'discount',
        label: t('Discount'),
        format: ({ discount }) => toPercentage(discount / 100),
        align: 'left',
    },
    {
        name: 'total',
        label: t('Total'),
        align: 'left',
    },
];
</script>
<template>
    <VnTable
        data-key="ClaimEndsTable"
        url="ClaimEnds/filter"
        :right-search="false"
        :column-search="false"
        :disable-option="{ card: true, table: true }"
        search-url="actions"
        :filter="{ where: { claimFk: $props.id } }"
        :columns="columns"
        :limit="0"
        :without-header="true"
        auto-load
    >
        <template #column-itemFk="{ row }">
            <span class="link">
                {{ row.itemFk }}
                <ItemDescriptorProxy :id="row.itemFk" />
            </span>
        </template>
        <template #column-ticketFk="{ row }">
            <span class="link">
                {{ row.ticketFk }}
                <TicketDescriptorProxy :id="row.ticketFk" />
            </span>
        </template>
    </VnTable>
</template>
