<script setup>
import { ref, computed, capitalize } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useArrayData } from 'src/composables/useArrayData';
import CrudModel from 'src/components/CrudModel.vue';
import FetchData from 'src/components/FetchData.vue';
import VnSelect from 'src/components/common/VnSelect.vue';

const route = useRoute();
const { t } = useI18n();

const arrayData = useArrayData();
const invoiceIn = computed(() => arrayData.store.data);
const invoiceInCorrectionRef = ref();
const filter = {
    include: { relation: 'invoiceIn' },
    where: { correctingFk: route.params.id },
};
const columns = computed(() => [
    {
        name: 'origin',
        label: t('Original invoice'),
        field: (row) => row.correctedFk,
        sortable: true,
        tabIndex: 1,
        align: 'left',
        style: 'padding-bottom: 20px',
    },
    {
        name: 'type',
        label: capitalize(t('globals.type')),
        field: (row) => row.cplusRectificationTypeFk,
        options: cplusRectificationTypes.value,
        model: 'cplusRectificationTypeFk',
        optionValue: 'id',
        optionLabel: 'description',
        sortable: true,
        tabIndex: 1,
        align: 'left',
    },
    {
        name: 'class',
        label: capitalize(t('globals.class')),
        field: (row) => row.siiTypeInvoiceInFk,
        options: siiTypeInvoiceIns.value,
        model: 'siiTypeInvoiceInFk',
        optionValue: 'id',
        optionLabel: 'code',
        sortable: true,
        tabIndex: 1,
        align: 'left',
    },
    {
        name: 'reason',
        label: capitalize(t('globals.reason')),
        field: (row) => row.invoiceCorrectionTypeFk,
        options: invoiceCorrectionTypes.value,
        model: 'invoiceCorrectionTypeFk',
        optionValue: 'id',
        optionLabel: 'description',
        sortable: true,
        tabIndex: 1,
        align: 'left',
    },
]);
const cplusRectificationTypes = ref([]);
const siiTypeInvoiceIns = ref([]);
const invoiceCorrectionTypes = ref([]);

const requiredFieldRule = (val) => val || t('globals.requiredField');
</script>
<template>
    <FetchData
        url="CplusRectificationTypes"
        @on-fetch="(data) => (cplusRectificationTypes = data)"
        auto-load
    />
    <FetchData
        url="SiiTypeInvoiceIns"
        :where="{ code: { like: 'R%' } }"
        @on-fetch="(data) => (siiTypeInvoiceIns = data)"
        auto-load
    />
    <FetchData
        url="InvoiceCorrectionTypes"
        @on-fetch="(data) => (invoiceCorrectionTypes = data)"
        auto-load
    />
    <CrudModel
        ref="invoiceInCorrectionRef"
        v-if="invoiceIn"
        data-key="InvoiceInCorrection"
        url="InvoiceInCorrections"
        :filter="filter"
        auto-load
        primary-key="correctingFk"
        :default-remove="false"
    >
        <template #body="{ rows }">
            <QTable
                :columns="columns"
                :rows="rows"
                row-key="$index"
                :grid="$q.screen.lt.sm"
                :pagination="{ rowsPerPage: 0 }"
            >
                <template #body-cell-type="{ row, col }">
                    <QTd>
                        <VnSelect
                            class="q-pb-md"
                            v-model="row[col.model]"
                            :options="col.options"
                            :option-value="col.optionValue"
                            :option-label="col.optionLabel"
                            :disable="row.invoiceIn.isBooked"
                            :filter-options="['description']"
                        >
                            <template #option="{ opt, itemProps }">
                                <QItem v-bind="itemProps">
                                    <QItemSection>
                                        <QItemLabel>{{ opt.description }}</QItemLabel>
                                    </QItemSection>
                                </QItem>
                            </template>
                        </VnSelect>
                    </QTd>
                </template>
                <template #body-cell-class="{ row, col }">
                    <QTd>
                        <VnSelect
                            class="q-pb-md"
                            v-model="row[col.model]"
                            :options="col.options"
                            :option-value="col.optionValue"
                            :option-label="col.optionLabel"
                            :rules="[requiredFieldRule]"
                            :filter-options="['code', 'description']"
                            :disable="row.invoiceIn.isBooked"
                        >
                            <template #option="{ opt, itemProps }">
                                <QItem v-bind="itemProps">
                                    <QItemSection>
                                        <QItemLabel
                                            >{{ opt.code }} -
                                            {{ opt.description }}</QItemLabel
                                        >
                                    </QItemSection>
                                </QItem>
                            </template>
                        </VnSelect>
                    </QTd>
                </template>
                <template #body-cell-reason="{ row, col }">
                    <QTd>
                        <VnSelect
                            class="q-pb-md"
                            v-model="row[col.model]"
                            :options="col.options"
                            :option-value="col.optionValue"
                            :option-label="col.optionLabel"
                            :rules="[requiredFieldRule]"
                            :disable="row.invoiceIn.isBooked"
                        />
                    </QTd>
                </template>
            </QTable>
        </template>
    </CrudModel>
</template>
<i18n>
es:
    Original invoice: Factura origen
</i18n>
