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

import CrudModel from 'components/CrudModel.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import FetchData from 'components/FetchData.vue';
import TicketCreateServiceType from './TicketCreateServiceType.vue';
import VnInput from 'src/components/common/VnInput.vue';

import { useArrayData } from 'src/composables/useArrayData';
import useNotify from 'src/composables/useNotify.js';
import axios from 'axios';

const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const ticketServiceTypeFetchRef = ref(null);
const ticketServiceCrudRef = ref(null);
const ticketServiceOptions = ref([]);
const arrayData = useArrayData('TicketNotes');
const { store } = arrayData;
const { notify } = useNotify();

const selected = ref([]);
const defaultTaxClass = ref(null);

const crudModelFilter = computed(() => ({
    where: { ticketFk: route.params.id },
}));

const crudModelRequiredData = computed(() => ({
    ticketFk: route.params.id,
    taxClassFk: defaultTaxClass.value?.id,
}));

watch(
    () => route.params.id,
    async () => {
        store.filter = crudModelFilter.value;
        await ticketServiceCrudRef.value.reload();
    }
);

onMounted(async () => await getDefaultTaxClass());

const createRefund = async () => {
    try {
        if (!selected.value.length) return;

        const params = {
            servicesIds: selected.value.map((s) => +s.ticketFk),
            withWarehouse: false,
            negative: true,
        };
        const { data } = await axios.post('Sales/clone', params);
        const [refundTicket] = data;
        notify(
            t('service.createRefundSuccess', {
                ticketId: refundTicket.id,
            }),
            'positive'
        );
        router.push({ name: 'TicketSale', params: { id: refundTicket.id } });
    } catch (error) {
        console.error(error);
    }
};

const getDefaultTaxClass = async () => {
    try {
        let filter = {
            where: { code: 'G' },
        };
        const { data } = await axios.get('TaxClasses/findOne', {
            params: { filter: JSON.stringify(filter) },
        });
        defaultTaxClass.value = data;
    } catch (error) {
        console.error(error);
    }
};

const columns = computed(() => [
    {
        name: 'description',
        label: t('service.description'),
        field: (row) => row.ticketServiceTypeFk,
        sortable: true,
        align: 'left',
    },
    {
        name: 'quantity',
        label: t('service.quantity'),
        field: (row) => row.quantity,
        sortable: true,
        align: 'left',
    },
    {
        name: 'price',
        label: t('service.price'),
        field: (row) => row.price,
        sortable: true,
        align: 'left',
    },
]);
</script>

<template>
    <FetchData
        ref="ticketServiceTypeFetchRef"
        @on-fetch="(data) => (ticketServiceOptions = data)"
        auto-load
        url="TicketServiceTypes"
    />
    <CrudModel
        ref="ticketServiceCrudRef"
        data-key="TicketService"
        url="TicketServices"
        model="TicketService"
        :filter="crudModelFilter"
        :data-required="crudModelRequiredData"
        auto-load
        v-model:selected="selected"
    >
        <template #moreBeforeActions>
            <QBtn
                color="primary"
                :label="t('service.pay')"
                :disabled="!selected.length"
                @click.stop="createRefund()"
            />
        </template>
        <template #body="{ rows }">
            <QTable
                :columns="columns"
                :rows="rows"
                row-key="$index"
                selection="multiple"
                v-model:selected="selected"
                table-header-class="text-left"
            >
                <template #body-cell-description="{ row, col }">
                    <QTd auto-width>
                        <VnSelectDialog
                            :label="col.label"
                            v-model="row.ticketServiceTypeFk"
                            :options="ticketServiceOptions"
                            option-label="name"
                            option-value="id"
                            hide-selected
                        >
                            <template #form>
                                <TicketCreateServiceType
                                    @on-data-saved="ticketServiceTypeFetchRef.fetch()"
                                />
                            </template>
                        </VnSelectDialog>
                    </QTd>
                </template>
                <template #body-cell-quantity="{ row, col }">
                    <QTd auto-width>
                        <VnInput
                            :label="col.label"
                            v-model.number="row.quantity"
                            type="number"
                            min="0"
                            :info="t('service.quantityInfo')"
                        />
                    </QTd>
                </template>
                <template #body-cell-price="{ row, col }">
                    <QTd auto-width>
                        <VnInput
                            :label="col.label"
                            v-model.number="row.price"
                            type="number"
                            min="0"
                        />
                    </QTd>
                </template>
            </QTable>
        </template>
    </CrudModel>
    <QPageSticky position="bottom-right" :offset="[25, 25]">
        <QBtn
            fab
            color="primary"
            icon="add"
            @click="ticketServiceCrudRef.insert()"
            shortcut="+"
        />
    </QPageSticky>
</template>
