<script setup>
import { ref, onMounted } 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);

onMounted(() => {
    if (supplierContactRef.value) supplierContactRef.value.reload();
});
</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 }"
    >
        <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">
                        <div class="col">
                            <VnInput
                                :label="t('supplier.contacts.name')"
                                v-model="row.name"
                            />
                        </div>
                        <div class="col">
                            <VnInput
                                :label="t('supplier.contacts.phone')"
                                v-model="row.phone"
                            />
                        </div>
                        <div class="col">
                            <VnInput
                                :label="t('supplier.contacts.mobile')"
                                v-model="row.mobile"
                            />
                        </div>
                        <div class="col">
                            <VnInput
                                :label="t('supplier.contacts.email')"
                                v-model="row.email"
                            />
                        </div>
                    </VnRow>
                    <VnRow class="row q-gutter-md">
                        <div class="col">
                            <QInput
                                :label="t('supplier.contacts.observation')"
                                type="textarea"
                                v-model="row.observation"
                                fill-input
                                autogrow
                            />
                        </div>
                        <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>
                    <QIcon
                        name="add"
                        size="sm"
                        class="cursor-pointer"
                        color="primary"
                        @click="supplierContactRef.insert()"
                    >
                        <QTooltip>
                            {{ t('Add contact') }}
                        </QTooltip>
                    </QIcon>
                </VnRow>
            </QCard>
        </template>
    </CrudModel>
</template>

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

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