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

import CrudModel from 'components/CrudModel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';

import { useArrayData } from 'src/composables/useArrayData';
import VnRow from 'src/components/ui/VnRow.vue';

const route = useRoute();
const { t } = useI18n();
const ticketPackagingsCrudRef = ref(null);
const listPackagingsOptions = ref([]);
const arrayData = useArrayData('TicketPackagings');
const { store } = arrayData;

const crudModelFilter = reactive({
    fields: ['id', 'ticketFk', 'packagingFk', 'quantity', 'created'],
    where: { ticketFk: route.params.id },
});

const crudModelRequiredData = computed(() => ({
    packagingFk: null,
    quantity: 0,
    created: Date.vnNew(),
    ticketFk: route.params.id,
}));

const handleInputQuantityClear = (row) => {
    if (row.quantity === null || row.quantity === undefined) row.quantity = 0;
};

watch(
    () => route.params.id,
    async () => {
        crudModelFilter.where.ticketFk = route.params.id;
        store.filter = crudModelFilter;
        await ticketPackagingsCrudRef.value.reload();
    }
);
</script>

<template>
    <FetchData
        @on-fetch="(data) => (listPackagingsOptions = data)"
        auto-load
        :filter="{ fields: ['packagingFk', 'name'], order: 'name ASC', limit: 30 }"
        url="Packagings/listPackaging"
    />
    <div class="flex justify-center">
        <CrudModel
            ref="ticketPackagingsCrudRef"
            data-key="TicketPackagings"
            url="TicketPackagings"
            model="TicketPackagings"
            :filter="crudModelFilter"
            :data-required="crudModelRequiredData"
            :default-remove="false"
            auto-load
            style="max-width: 800px"
        >
            <template #body="{ rows, validate }">
                <QCard class="q-px-lg q-py-md">
                    <div
                        v-for="(row, index) in rows"
                        :key="index"
                        class="q-mb-md row items-center q-gutter-x-md"
                    >
                        <VnSelect
                            :label="t('package.package')"
                            :options="listPackagingsOptions"
                            hide-selected
                            option-label="name"
                            option-value="packagingFk"
                            v-model="row.packagingFk"
                        >
                            <template #option="scope">
                                <QItem v-bind="scope.itemProps">
                                    <QItemSection>
                                        <QItemLabel>
                                            {{ scope.opt?.name }}
                                        </QItemLabel>
                                        <QItemLabel caption>
                                            #{{ scope.opt?.itemFk }}
                                        </QItemLabel>
                                    </QItemSection>
                                </QItem>
                            </template>
                        </VnSelect>
                        <VnInput
                            :label="t('package.quantity')"
                            v-model.number="row.quantity"
                            class="col"
                            type="number"
                            min="1"
                            :required="true"
                            @update:model-value="handleInputQuantityClear(row)"
                            :rules="validate('TicketPackaging.quantity')"
                        />
                        <VnInputDate :label="t('package.added')" v-model="row.created" />
                        <QIcon
                            name="delete"
                            size="sm"
                            class="cursor-pointer"
                            color="primary"
                            @click="ticketPackagingsCrudRef.remove([row])"
                        >
                            <QTooltip>
                                {{ t('package.removePackage') }}
                            </QTooltip>
                        </QIcon>
                    </div>
                    <VnRow>
                        <QBtn
                            icon="add_circle"
                            shortcut="+"
                            flat
                            class="fill-icon-on-hover q-ml-md"
                            color="primary"
                            @click="ticketPackagingsCrudRef.insert()"
                        >
                            <QTooltip>
                                {{ t('package.addPackage') }}
                            </QTooltip>
                        </QBtn>
                    </VnRow>
                </QCard>
            </template>
        </CrudModel>
    </div>
</template>
