hereconnect/src/components/create/CreateMessagesSection.vue

<template>
  <section>
    <h2 class="text-xl font-semibold mb-4">Сообщения для отправки</h2>
    <p class="text-gray-600 mb-4">
      После считывания QR‑кода можно будет выбрать одно из этих сообщений или написать своё.
    </p>
    <p class="text-sm text-gray-500 mb-6">Вы сможете изменить эти сообщения позже.</p>

    <!-- Список сообщений -->
    <div class="flex flex-col gap-2 mb-4">
      <div v-for="(message, index) in messages" :key="index" class="flex gap-2" ref="messagesRef">
        <InputText v-model="messages[index]" class="flex-1" placeholder="Введите сообщение" />
        <Button
          icon="pi pi-trash"
          class="p-button-danger p-button-text"
          @click="removeMessage(index)"
          title="Удалить сообщение"
        />
      </div>
    </div>

    <!-- Кнопка добавления сообщения -->
    <Button
      label="Добавить сообщение"
      icon="pi pi-plus"
      class="p-button-sm p-button-outlined mb-4"
      @click="addMessage"
    />
  </section>
</template>

<script setup lang="ts">
import { watch, nextTick, useTemplateRef } from 'vue'
import { type QRCodeDocument } from '@/types/DBDocumentTypes'

// Пропсы
const props = defineProps<{ placement: QRCodeDocument['placement'] }>()
const messagesRef = useTemplateRef<HTMLDivElement[]>('messagesRef')

// Предустановленные сообщения по типу размещения
const defaultMessages = {
  car: [
    'Ваш автомобиль мешает',
    'Выключите свет',
    'Спустило колесо',
    'Подойдите к вашей машине',
    'Эвакуатор',
  ],
  pet: ['Нашёлся ваш питомец'],
  door: ['Я рядом с дверью'],
  store: ['Подойдите к кассе', 'Вопрос по товару', 'Помощь с покупкой'],
  restaurant_table: [
    'Позовите официанта',
    'Принести меню',
    'Принести счёт',
    'Пожаловаться на обслуживание',
  ],
  other: [],
}

// Локальное хранилище сообщений
const messages = defineModel<Exclude<QRCodeDocument['predefinedMessage'], undefined>>({
  required: true,
})

// Следим за типом размещения и устанавливаем предустановленные сообщения при его смене
watch(
  () => props.placement,
  (newPlacement, previousPlacement) => {
    let prevDefaultMessages: QRCodeDocument['predefinedMessage'] = []
    if (previousPlacement && previousPlacement in defaultMessages) {
      prevDefaultMessages = defaultMessages[previousPlacement]
    }
    const isMessagesDefault = JSON.stringify(messages.value) === JSON.stringify(prevDefaultMessages)
    if (isMessagesDefault) {
      messages.value = [...(defaultMessages[newPlacement] || [])]
    }
  },
  { immediate: true },
)

// Функции для управления сообщениями
function addMessage() {
  messages.value.push('')
  nextTick(() => {
    const lastMessageRef = messagesRef.value![messagesRef.value!.length - 1]
    lastMessageRef?.querySelector('input')?.focus() // Фокусируемся на последнем поле
  })
}

function removeMessage(index: number) {
  messages.value.splice(index, 1)
}
</script>