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

import VnInput from 'src/components/common/VnInput.vue';

import { toDateFormat } from 'src/filters/date.js';
import axios from 'axios';

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

const emit = defineEmits(['refreshData']);

const router = useRouter();
const { t } = useI18n();
const QPopupProxyRef = ref(null);

const _transfer = ref(null);

const transferLinesColumns = computed(() => [
    {
        label: t('ticketSale.id'),
        name: 'itemFk',
        field: 'itemFk',
        align: 'left',
    },
    {
        label: t('ticketSale.item'),
        name: 'item',
        field: 'concept',
        align: 'left',
    },
    {
        label: t('ticketSale.quantity'),
        name: 'quantity',
        field: 'quantity',
        align: 'left',
    },
]);

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

const transferSales = async (ticketId) => {
    const params = {
        ticketId: ticketId,
        sales: $props.transfer.sales,
    };

    const { data } = await axios.post(
        `tickets/${$props.ticket.id}/transferSales`,
        params
    );

    if (data && data.id === $props.ticket.id) emit('refreshData');
    else router.push({ name: 'TicketSale', params: { id: data.id } });
};

onMounted(() => (_transfer.value = $props.transfer));
</script>

<template>
    <QPopupProxy ref="QPopupProxyRef">
        <QCard class="q-px-md" style="display: flex">
            <QTable
                v-if="transfer.sales"
                :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"
                            @keyup.enter="changeQuantity(row)"
                            @blur="changeQuantity(row)"
                            @focus="edit.oldQuantity = row.quantity"
                            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"
                :pagination="{ rowsPerPage: 0 }"
                class="full-width q-mt-md"
                :no-data-label="t('globals.noResults')"
            >
                <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 #bottom>
                    <QForm class="q-mt-lg full-width">
                        <VnInput
                            v-model.number="_transfer.ticketId"
                            :label="t('Transfer to ticket')"
                            :clearable="false"
                        >
                            <template #append>
                                <QBtn
                                    icon="keyboard_arrow_right"
                                    color="primary"
                                    @click="transferSales(_transfer.ticketId)"
                                    style="width: 30px"
                                />
                            </template>
                        </VnInput>
                        <QBtn
                            :label="t('New ticket')"
                            color="primary"
                            class="full-width q-my-lg"
                            @click="transferSales()"
                        />
                    </QForm>
                </template>
            </QTable>
        </QCard>
    </QPopupProxy>
</template>

<i18n>
es:
    Sales to transfer: Líneas a transferir
    Destination ticket: Ticket destinatario
    Transfer to ticket: Transferir a ticket
    New ticket: Nuevo ticket
</i18n>
