<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
        url="Packagings/listPackaging"
        :filter="{
            fields: ['packagingFk', 'name'],
            order: ['name ASC'],
        }"
    />
    <div class="full-width flex justify-center">
        <QPage class="card-width q-pa-lg">
            <CrudModel
                ref="ticketPackagingsCrudRef"
                data-key="TicketPackagings"
                url="TicketPackagings"
                model="TicketPackagings"
                :filter="crudModelFilter"
                :data-required="crudModelRequiredData"
                :default-remove="false"
                auto-load
            >
                <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('basicData.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"
                                v-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>
        </QPage>
    </div>
</template>
