<script setup>
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import VnInput from 'src/components/common/VnInput.vue';
import TicketTransferForm from './TicketTransferForm.vue';

import { toDateFormat } from 'src/filters/date.js';
const emit = defineEmits(['ticketTransferred']);

const $props = defineProps({
    mana: {
        type: Number,
        default: null,
    },
    newPrice: {
        type: Number,
        default: 0,
    },
    transfer: {
        type: Object,
        default: () => {},
    },
    ticket: {
        type: [Array, Object],
        default: () => {},
    },
});

onMounted(() => (_transfer.value = $props.transfer));
const { t } = useI18n();
const transferFormRef = ref(null);
const _transfer = ref();
const transferLinesColumns = computed(() => [
    {
        label: t('ticketList.id'),
        name: 'itemFk',
        field: 'itemFk',
        align: 'left',
    },
    {
        label: t('basicData.item'),
        name: 'item',
        field: 'concept',
        align: 'left',
    },
    {
        label: t('basicData.quantity'),
        name: 'quantity',
        field: 'quantity',
        align: 'left',
    },
]);

const destinationTicketColumns = computed(() => [
    {
        label: t('ticketList.id'),
        name: 'id',
        field: 'id',
        align: 'left',
    },
    {
        label: t('ticketList.shipped'),
        name: 'item',
        field: 'shipped',
        align: 'left',
        format: (val) => toDateFormat(val),
    },
    {
        label: t('basicData.agency'),
        name: 'agency',
        field: 'agencyName',
        align: 'left',
    },
    {
        label: t('basicData.address'),
        name: 'address',
        field: 'address',
        align: 'left',
    },
]);

const handleRowClick = (row) => {
    const ticketId = row.id;
    if (transferFormRef.value) {
        transferFormRef.value.transferSales(ticketId);
    }
};
</script>

<template>
    <QTable
        :rows="transfer.sales"
        :columns="transferLinesColumns"
        :title="t('Sales to transfer')"
        row-key="id"
        :pagination="{ rowsPerPage: 0 }"
        class="full-width q-mt-md"
        :no-data-label="t('globals.noResults')"
    >
        <template #body-cell-quantity="{ row }">
            <QTd @click.stop>
                <VnInput
                    v-model.number="row.quantity"
                    :clearable="false"
                    style="max-width: 60px"
                />
            </QTd>
        </template>
    </QTable>
    <QSeparator vertical spaced />
    <QTable
        v-if="transfer.lastActiveTickets"
        :rows="transfer.lastActiveTickets"
        :columns="destinationTicketColumns"
        :title="t('Destination ticket')"
        row-key="id"
        class="full-width q-mt-md"
        @row-click="(_, row) => handleRowClick(row)"
        :no-data-label="t('globals.noResults')"
        :pagination="{ rowsPerPage: 0 }"
    >
        <template #body-cell-address="{ row }">
            <QTd @click.stop>
                <span>
                    {{ row.nickname }}
                    {{ row.name }}
                    {{ row.street }}
                    {{ row.postalCode }}
                    {{ row.city }}
                </span>
                <QTooltip>
                    {{ row.nickname }}
                    {{ row.name }}
                    {{ row.street }}
                    {{ row.postalCode }}
                    {{ row.city }}
                </QTooltip>
            </QTd>
        </template>

        <template #no-data>
            <TicketTransferForm ref="transferFormRef" v-bind="$props" />
        </template>
        <template #bottom>
            <TicketTransferForm ref="transferFormRef" v-bind="$props" />
        </template>
    </QTable>
</template>
<style lang="scss">
.q-table__bottom.row.items-center.q-table__bottom--nodata {
    border-top: none;
}
</style>
<i18n>
es:
    Sales to transfer: Líneas a transferir
    Destination ticket: Ticket destinatario
</i18n>
