<template>
  <div class="center">
    <div>
      <el-button size="small" @click="prevPage">Previous</el-button>
      <el-button size="small" @click="nextPage">Next</el-button>
      &nbsp; &nbsp;
      <span>Page: {{ pageNum }} / <span id="page_count"></span></span>
    </div>
    <canvas id="the-canvas" />
  </div>
</template>

<script>
//   import  * as pdfjsLib from "/static/pdf/build/pdf.js";
// pdfjsLib.GlobalWorkerOptions.workerSrc = "/static/pdf/build/pdf.worker.js";

let pdfjsLib = window["/static/pdf/build/pdf"];
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.js";



// import * as pdfjs from "/static/pdf/build/pdf.js"
// import * as pdfjsWorker from '/static/pdf/build/pdf.worker.js';

// pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker

// let pdfjsLib = window["pdfjs-dist/build/pdf"];
// pdfjsLib.GlobalWorkerOptions.workerSrc = `http://${window.location.host}/static/pdfjs/build/pdf.worker.js`;
// pdfjsLib.disableWorker = true;

export default {
  name: "pdfPreview",
  props: {
    pdfUrl: {
      type: String,
    },
    scale: {
      type: Number,
      default: 1.5,
    },
  },
  data() {
    return {
      pdfDoc: null,
      pageNum: 1,
      pageRendering: false,
      pageNumPending: null,
      canvas: null,
      ctx: null,
    };
  },
  methods: {
    renderPage(num) {
      let _this = this;
      this.pageRendering = true;
      // Using promise to fetch the page
      return this.pdfDoc.getPage(num).then((page) => {
        let viewport = page.getViewport({ scale: _this.scale });
        _this.canvas.height = viewport.height;
        _this.canvas.width = viewport.width;

        // Render PDF page into canvas context
        let renderContext = {
          canvasContext: _this.ctx,
          viewport: viewport,
        };
        let renderTask = page.render(renderContext);

        // Wait for rendering to finish
        renderTask.promise.then(() => {
          _this.pageRendering = false;
          if (_this.pageNumPending !== null) {
            // New page rendering is pending
            this.renderPage(_this.pageNumPending);
            _this.pageNumPending = null;
          }
        });
      });
    },
    queueRenderPage(num) {
      if (this.pageRendering) {
        this.pageNumPending = num;
      } else {
        this.renderPage(num);
      }
    },
    prevPage() {
      if (this.pageNum <= 1) {
        return;
      }
      this.pageNum--;
      this.queueRenderPage(this.pageNum);
    },
    nextPage() {
      if (this.pageNum >= this.pdfDoc.numPages) {
        return;
      }
      this.pageNum++;
      this.queueRenderPage(this.pageNum);
    },
  },
  mounted() {
    this.canvas = document.getElementById("the-canvas");
    this.ctx = this.canvas.getContext("2d");

    pdfjsLib.getDocument(this.pdfUrl).promise.then((pdfDoc_) => {
      this.pdfDoc = pdfDoc_;
      document.getElementById("page_count").textContent = this.pdfDoc.numPages;
      this.renderPage(this.pageNum).then((res) => {
        this.$emit("renderPdf", {
          width: this.canvas.width,
          height: this.canvas.height,
        });
      });
    });

  },
};
</script>

<style scoped>
.elesign {
  position: relative;
  margin: 0 auto;

}
.canvas-container {
    position: absolute;
    top: 42px;
    left: 0;
  }
#ele-canvas {
  border: 1px solid #5ea6ef;
}
</style>
