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

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

const route = useRoute();
const { t } = useI18n();
const supplierContactRef = ref(null);

const insertRow = () => {
    supplierContactRef.value.insert();
    nextTick(() => {
        const inputs = document.querySelectorAll('[input-name-focusable]');
        const lastInput = inputs[inputs.length - 1];
        if (lastInput) lastInput.focus();
    });
};
</script>

<template>
    <CrudModel
        data-key="SupplierContact"
        url="SupplierContacts"
        model="SupplierContact"
        :filter="{
            where: { supplierFk: route.params.id },
        }"
        ref="supplierContactRef"
        :default-remove="false"
        :data-required="{ supplierFk: route.params.id }"
        auto-load
    >
        <template #body="{ rows }">
            <QCard class="q-pa-md">
                <QCardSection
                    v-for="(row, index) in rows"
                    :key="index"
                    class="border q-pa-md q-mb-md"
                >
                    <VnRow class="row q-gutter-md">
                        <VnInput
                            input-name-focusable
                            :label="t('supplier.contacts.name')"
                            v-model="row.name"
                        />
                        <VnInput
                            :label="t('supplier.contacts.phone')"
                            v-model="row.phone"
                        />
                        <VnInput
                            :label="t('supplier.contacts.mobile')"
                            v-model="row.mobile"
                        />
                        <VnInput
                            :label="t('supplier.contacts.email')"
                            v-model="row.email"
                        />
                    </VnRow>
                    <VnRow class="row q-gutter-md">
                        <QInput
                            :label="t('supplier.contacts.observation')"
                            type="textarea"
                            v-model="row.observation"
                            fill-input
                            autogrow
                        />
                        <div class="col-1 row justify-center items-center">
                            <QIcon
                                name="delete"
                                size="sm"
                                class="cursor-pointer"
                                color="primary"
                                @click="supplierContactRef.remove([row])"
                            >
                                <QTooltip>
                                    {{ t('Remove contact') }}
                                </QTooltip>
                            </QIcon>
                        </div>
                    </VnRow>
                </QCardSection>
                <VnRow>
                    <QBtn
                        flat
                        icon="add"
                        shortcut="+"
                        class="cursor-pointer"
                        color="primary"
                        @click="insertRow()"
                    >
                        <QTooltip>
                            {{ t('Add contact') }}
                        </QTooltip>
                    </QBtn>
                </VnRow>
            </QCard>
        </template>
    </CrudModel>
</template>

<style lang="scss" scoped>
.border {
    border-radius: 0px !important;
    border: 1px solid var(--vn-text-color) !important;
}
</style>

<i18n>
    es:
        Add contact: Añadir contacto
        Remove contact: Remover contacto
</i18n>
