<template>
  <div id="editor">
    <div v-loading="loadingPdf" class="pdfEle_wrap">
      <div id="pdfEle"></div>
    </div>
    <!-- 页码 -->
    <div class="pdf-render-pager">
      <div class="prev-next" @click="goPrevPdf">
        <i class="el-icon-arrow-left"></i>
      </div>
      <input
        v-model="curPage"
        type="text"
        title="输入页码后按enter即可跳至目标页"
        style="border: 1px solid #ccc; position: relative; z-index: 9999"
        @keyup.enter="handleChangePage"
      />
      <div class="middle">/</div>
      <div class="totalPage">{{ totalPage }}</div>
      <div class="prev-next" @click="goNextPdf">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
  </div>
</template>
<script>
import { loadPDF } from "@/utils/loadPdf.js"
export default {
  props: {
    pdfSrc: String,
  },
  data() {
    return {
      totalPage: 1,
      curPage: 1,
      loadingPdf: false,
      canvasH: 0,
      scrollEle: "", //元素画布
      clickFlag: true, //左右跳转
      timeout: null,
    }
  },
  mounted() {},
  methods: {
    loadPDF() {
      document.getElementById("pdfEle").innerHTML = ""
      this.canvasH = 0 //高度初始化为0 以此控制分页不显示
      this.curPage = 1 //页码重置为1
      this.loadingPdf = true
      if (process.env.NODE_ENV == "development") {
        loadPDF(
          // 特约讲师合作协议
          { el: "#pdfEle", fileSrc: "/ppt的pdf.pdf", scale: 1 },
          this.callBackPdf
        )
      } else {
        loadPDF(
          { el: "#pdfEle", fileSrc: this.pdfSrc, scale: 1 },
          this.callBackPdf
        )
      }
    },
    // 加载完成的回调 分页加载
    callBackPdf(item) {
      const { index, allPage } = item
      if (index !== allPage) {
        return
      }
      // console.log(allPage);
      this.totalPage = item.allPage
      this.scrollEle = document.querySelector(".pdfEle_wrap")
      // this.canvasH = item.canvas.height;
      setTimeout(() => {
        this.canvasH = item.div.offsetHeight
      }, 100)
      this.scrollEle.addEventListener("scroll", (e) => {
        if (this.timeout != null) {
          clearTimeout(this.timeout)
        }
        this.timeout = setTimeout(() => {
          if (Math.floor(this.scrollEle.scrollTop / this.canvasH) == 0) {
            this.curPage = 1
          }
          if (
            Math.floor(this.scrollEle.scrollTop / this.canvasH) > 0 &&
            Math.floor(this.scrollEle.scrollTop / this.canvasH) + 1 !=
              this.curPage
          ) {
            this.curPage =
              Math.floor(this.scrollEle.scrollTop / this.canvasH) + 1
          }
        }, 100)
        // this.curPage = Math.floor(this.scrollEle.scrollTop / this.canvasH) <= 0? 1: Math.floor(this.scrollEle.scrollTop / this.canvasH);
      })
      this.loadingPdf = false
    },
    goPrevPdf() {
      // 限制一下多次点击
      if (!this.clickFlag) {
        return false
      }
      this.clickFlag = false
      if (this.curPage > 1) {
        // --this.curPage;
        this.scrollPdfPage(parseInt(this.curPage) - 1)
        --this.curPage
      }
      setTimeout(() => {
        this.clickFlag = true
      }, 500)
    },
    goNextPdf() {
      // 限制一下多次点击
      if (!this.clickFlag) {
        return false
      }
      this.clickFlag = false
      if (this.curPage < this.totalPage) {
        // ++this.curPage;
        this.scrollPdfPage(parseInt(this.curPage) + 1)
        ++this.curPage
      }
      setTimeout(() => {
        this.clickFlag = true
      }, 500)
    },
    handleChangePage(e) {
      if (!/^\d+$/.test(e.target.value)) {
        this.curPage = 1
      } else {
        // this.curPage = parseInt(e.target.value) > 0 ? parseInt(e.target.value) : 1;
        if (parseInt(e.target.value) <= 0) {
          this.curPage = 1
        } else if (parseInt(e.target.value) > this.totalPage) {
          this.curPage = this.totalPage
        } else {
          this.curPage = parseInt(e.target.value)
        }
      }
      this.scrollPdfPage(this.curPage)
    },
    // pdf滚动
    scrollPdfPage(page) {
      console.log(this.scrollEle)
      this.scrollEle.scrollTo({
        top: this.canvasH * (page - 1),
        behavior: "smooth",
      })
    },
  },
}
</script>
<style lang="scss" scoped>
#editor {
  height: 600px;
}
.pdf-render-pager {
  width: 100%;
  color: #333;
  font-size: 12px;
  height: 50px;
  padding: 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  // box-shadow: 0 -1px 0px 0 rgba(149, 149, 149, 0.25);
  bottom: 0px;
  left: 0;
  z-index: 9999;
  input {
    width: 26px;
    border: none;
    border-bottom: 1px solid #e4e4e4;
    text-align: center;
    font-size: 14px;
  }
}
.pdfEle_wrap {
  width: 100%;
  height: 600px;
  padding: 20px 0;
  min-height: 50px;
  overflow-y: scroll;
  overflow-x: hidden;
  // text-align:center;
  position: relative;
  transition: all 0.3s;
  background: #e4e4e4;
  #pdfEle {
    height: 600px;
  }
}
.prev-next {
  cursor: pointer;
  width: 20px;
  height: 20px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.middle {
  margin: 0 8px;
}
</style>