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

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

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 _transfer = ref($props.transfer);

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 } });
};

defineExpose({ transferSales });
</script>

<template>
    <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>

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