<script setup>
import { ref } 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 customerContactsRef = ref(null);
</script>
<template>
    <div class="full-width flex justify-center">
        <QPage class="card-width q-pa-lg">
            <CrudModel
                :data-required="{ clientFk: route.params.id }"
                :default-remove="false"
                :filter="{
                    fields: ['id', 'name', 'phone', 'clientFk'],
                    where: { clientFk: route.params.id },
                }"
                data-key="CustomerContacts"
                model="CustomerContacts"
                ref="customerContactsRef"
                url="ClientContacts"
                auto-load
            >
                <template #body="{ rows }">
                    <QCard class="q-pl-lg q-py-md">
                        <VnRow
                            v-for="(row, index) in rows"
                            :key="index"
                            class="row q-gutter-md q-mb-md"
                        >
                            <div class="col">
                                <VnInput :label="t('Name')" v-model="row.name" />
                            </div>
                            <div class="col">
                                <VnInput :label="t('Phone')" v-model="row.phone" />
                            </div>
                            <div class="col-1 row justify-center items-center">
                                <QIcon
                                    @click="customerContactsRef.remove([row])"
                                    class="cursor-pointer"
                                    color="primary"
                                    name="delete"
                                    size="sm"
                                >
                                    <QTooltip>
                                        {{ t('Remove contact') }}
                                    </QTooltip>
                                </QIcon>
                            </div>
                        </VnRow>
                        <VnRow>
                            <QBtn
                                @click="customerContactsRef.insert()"
                                class="cursor-pointer"
                                color="primary"
                                flat
                                icon="add"
                                shortcut="+"
                            >
                                <QTooltip>
                                    {{ t('Add contact') }}
                                </QTooltip>
                            </QBtn>
                        </VnRow>
                    </QCard>
                </template>
            </CrudModel>
        </QPage>
    </div>
</template>

<i18n>
es:
    Name: Nombre
    Phone: Teléfono
    Remove contact: Quitar contacto
    Add contact: Añadir contacto
</i18n>
