<template>
  <div class="pdf-view" ref="refContainer">
    <div></div>
  </div>
</template>
<script setup>
import { Util } from "@/config/utils.js";
import * as pdfjs from "pdfjs-dist/build/pdf.js";
import * as pdfjsWorker from "pdfjs-dist/build/pdf.worker.js";
import * as pdfjsViewer from "pdfjs-dist/web/pdf_viewer.js";
import { watch } from "vue";
defineOptions({
  name: "PDFView",
});
const props = defineProps({
  url: {
    type: String,
    default: "",
  },
});
const refContainer = ref();
const loadPdf = async () => {
  pdfjs.GlobalWorkerOptions.workerSrc = Util.getPublicFile(
    "plugins/pdf/build/pdf.worker.js"
  );
  let pdfcontainer = refContainer.value;
  let pdfViewer = new pdfjsViewer.PDFViewer({
    container: pdfcontainer,
    renderer: {
      type: String,
      default: "canvas",
    },
    eventBus: new pdfjsViewer.EventBus(),
    textLayerMode:0
  });
  let loadingTask = await pdfjs.getDocument({
    cMapUrl: Util.getPublicFile("plugins/pdf/cmaps"),
    cMapPacked: true,
    url: props.url,
  });

  let pdf = await loadingTask.promise;
  pdfViewer.setDocument(pdf);
};
watch(
  () => props.url,
  (val) => {
    val && loadPdf();
  }
);
onMounted(() => {
  props.url && loadPdf();
});
</script>
<style lang="scss" scoped>
.pdf-view {
  width: 100%;
  max-height: 100%;
  overflow: auto;
  :deep(.page) {
    width: 100% !important;
    margin: 0 auto;
  }
}
</style>