hereconnect/src/views/ReadQRCodeView.vue

<template>
  <div class="flex flex-col min-h-screen">
    <!-- Основной контент -->
    <main class="flex-grow flex items-center justify-center py-6 px-4 md:px-6">
      <section class="max-w-lg w-full">
        <p class="text-gray-600 mb-4 text-center">
          Выберите сообщение из списка или напишите своё:
        </p>

        <!-- Предустановленные сообщения -->
        <div v-if="presetMessages.length" class="mb-6">
          <div class="flex flex-col gap-3">
            <Button
              v-for="(message, index) in presetMessages"
              :key="index"
              class="p-button-outlined w-full text-left"
              :disabled="loading"
              @click="sendPresetMessage(message)"
            >
              {{ message }}
            </Button>
          </div>
        </div>

        <!-- Текстовое поле ввода с кнопкой -->
        <form @submit.prevent="sendCustomMessage" class="flex gap-2 items-center">
          <InputText
            id="customMessage"
            v-model="customMessage"
            class="flex-1"
            placeholder="Напишите сообщение"
            :disabled="loading"
          />
          <Button
            type="submit"
            icon="pi pi-send"
            class="p-button-md"
            :disabled="!customMessage.trim() || loading"
          />
        </form>

        <p v-if="success" class="text-green-500 mt-4 text-center">Сообщение отправлено!</p>
        <p v-if="error" class="text-red-500 mt-4 text-center">Ошибка: {{ error }}</p>
      </section>
    </main>

    <!-- Футер -->
    <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">
      <p>
        Нужен такой же?
        <a href="/create" class="underline">Создайте свой QR‑код</a>.
      </p>
      <p class="mt-1">
        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/support" class="underline"
          >поддержке</a
        >.
      </p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getQrCodeDocument } from '@/api/qrCode'
import { type QRCodeDocument } from '@/types/DBDocumentTypes'

const { qr_code_uri } = defineProps<{ qr_code_uri: QRCodeDocument['uri'] }>()

// Локальные состояния
const presetMessages = ref<string[]>([])
const customMessage = ref('')
const success = ref(false)
const error = ref<string | null>(null)
const loading = ref(false)

// Функция для отправки сообщения
async function sendMessage(message: string) {
  try {
    loading.value = true
    console.log({
      qr_code_uri,
      message: message.trim(),
    })

    success.value = true
    error.value = null
    customMessage.value = ''
  } catch {
    success.value = false
    error.value = 'Ошибка отправки сообщения'
  } finally {
    loading.value = false
  }
}

// Функция для отправки предустановленного сообщения
async function sendPresetMessage(message: string) {
  await sendMessage(message)
}

// Функция для отправки пользовательского сообщения
async function sendCustomMessage() {
  await sendMessage(customMessage.value)
}

// Загрузка данных QR‑кода
onMounted(async () => {
  try {
    const qrCodeDoc = await getQrCodeDocument(qr_code_uri)
    presetMessages.value = qrCodeDoc!.predefinedMessage || []
  } catch (err) {
    console.error(err)
    error.value = 'Ошибка загрузки данных QR‑кода'
  }
})
</script>