<script setup>
import { ref, onMounted, watch } from "vue"
import { VPdfViewer } from "@vue-pdf-viewer/viewer"

const props = defineProps({
  // Beispiel: "FEDEO/26/filesbyid/11990345-8711-4e23-8851-c50f028fc915/RE25-1081.pdf"
  fileId: {
    type: String,
    required: true,
  },
  scale: {
    type: Number,
    default: 1.2,
  },
})

const pdfSrc = ref(null) // ObjectURL fürs Viewer
const { $api } = useNuxtApp()

async function loadPdf(id) {
  try {
    const arrayBuffer = await $api(`/api/files/download/${id}`, {
      method: "POST",
      responseType: "arrayBuffer", // wichtig für pdf.js
    })
    const blob = new Blob([arrayBuffer], { type: "application/pdf" })
    pdfSrc.value = URL.createObjectURL(blob)
  } catch (err) {
    console.error("Fehler beim Laden der PDF:", err)
  }
}

onMounted(() => loadPdf(props.fileId))
watch(() => props.fileId, (newPath) => {
  if (newPath) loadPdf(newPath)
})
</script>

<template>
  <div class="pdf-container">
    <VPdfViewer v-if="pdfSrc" :src="pdfSrc" style="height: 80vh; width: 100%;" />
    <div v-else>Lade PDF…</div>
  </div></template>

<style scoped>
.pdf-container {
  width: 100%;
  height: 100%;
}
</style>
