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

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

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

const itemBarcodeRef = ref(null);

const insertRow = () => {
    itemBarcodeRef.value.insert();
    focusLastInput();
};

const focusLastInput = () => {
    nextTick(() => {
        const inputs = document.querySelectorAll('[focusable-input]');
        const lastInput = inputs[inputs.length - 1];
        if (lastInput) lastInput.focus();
    });
};
</script>
<template>
    <div class="full-width flex justify-center">
        <QPage class="card-width q-pa-lg">
            <CrudModel
                :data-required="{ itemFk: route.params.id }"
                :default-remove="false"
                :filter="{
                    fields: ['id', 'itemFk', 'code'],
                    where: { itemFk: route.params.id },
                }"
                data-key="ItemBarcodes"
                model="ItemBarcodes"
                ref="itemBarcodeRef"
                url="ItemBarcodes"
                auto-load
            >
                <template #body="{ rows }">
                    <QCard class="q-px-lg q-py-md">
                        <div
                            v-for="(row, index) in rows"
                            :key="index"
                            class="q-mb-md full-width row items-center no-wrap"
                        >
                            <VnInput
                                :label="t('Code')"
                                v-model="row.code"
                                class="full-width"
                                focusable-input
                            />
                            <QIcon
                                @click="itemBarcodeRef.remove([row])"
                                class="cursor-pointer q-ml-md"
                                color="primary"
                                name="delete"
                                size="sm"
                            >
                                <QTooltip class="text-no-wrap">
                                    {{ t('Remove barcode') }}
                                </QTooltip>
                            </QIcon>
                        </div>
                        <QBtn
                            @click="insertRow()"
                            class="cursor-pointer fill-icon-on-hover"
                            color="primary"
                            icon="add_circle"
                            shortcut="+"
                            flat
                        >
                            <QTooltip>
                                {{ t('Add barcode') }}
                            </QTooltip>
                        </QBtn>
                    </QCard>
                </template>
            </CrudModel>
        </QPage>
    </div>
</template>

<i18n>
es:
    Code: Código
    Remove barcode: Quitar código de barras
    Add barcode: Añadir código de barras
</i18n>
