<template>
  <div class="pdf">
    <div class="show">
      <div v-for="i in numPages" :key="i" class="p-pdf">
        <pdf :src="pdfUrl" :page="i" class="pdfbox"></pdf>
        <span>{{i}}</span>
        <!-- <div class="line"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  name: "vue_pdf_preview",
  props: {
    // 当前pdf路径
    pdfUrl: {
      type: String,
      default:
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
    },
    ppage: {
      type: Number,
      default: 1,
    },
  },
  components: {
    pdf,
  },
  data() {
    return {
      // 总页数
      pageTotalNum: 1,
      // 当前页数
      pageNum: 1,
      // 加载进度
      loadedRatio: 0,
      // 页面加载完成
      curPageNum: 0,
      // 放大系数 默认百分百
      scale: 69,
      // 旋转角度 ‘90’的倍数才有效
      pageRotate: 0,
      // 单击内部链接时触发 (目前我没有遇到使用场景)
      page: 0,
      loading: null,
      numPages: 0,
    };
  },
  watch: {
    ppage(val) {
      this.loading.close();
      this.pageNum = val;
    },
    pageTotalNum(val) {
      if (val) {
        this.loading.close();
      }
      this.$emit("getPageTotal", val);
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.loading = this.$loading.service({
      background: "rgba(255, 255, 255, 0.7)",
      target: document.querySelector(".pdf"),
    });
    // this.pageNum = this.ppage;
    // var a = document.getElementsByClassName("pdf")[0].offsetWidth;
    // let _this = this;
    // this.$refs.pdf.$el.style.width =
    //   document.getElementsByClassName("pdf")[0].offsetHeight * 1.77 + "px";
    // window.addEventListener("resize", () => {
    //   this.$refs.pdf.$el.style.width =
    //     document.getElementsByClassName("pdf")[0].offsetHeight * 1.77 + "px";
    // });
    this.reportPreview();
  },
  methods: {
    //下载PDF
    fileDownload(data, fileName) {
      let blob = new Blob([data], {
        //type类型后端返回来的数据中会有，根据自己实际进行修改
        type: "application/pdf;charset-UTF-8",
      });
      let filename = fileName || "pdf.pdf";
      if (typeof window.navigator.msSaveBlob !== "undefined") {
        window.navigator.msSaveBlob(blob, filename);
      } else {
        var blobURL = window.URL.createObjectURL(blob);
        // 创建隐藏<a>标签进行下载
        var tempLink = document.createElement("a");
        tempLink.style.display = "none";
        tempLink.href = blobURL;
        tempLink.setAttribute("download", filename);
        if (typeof tempLink.download === "undefined") {
          tempLink.setAttribute("target", "_blank");
        }
        document.body.appendChild(tempLink);
        tempLink.click();
        document.body.removeChild(tempLink);
        window.URL.revokeObjectURL(blobURL);
      }
    },

    //放大
    scaleD() {
      this.scale += 5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },

    //缩小
    scaleX() {
      // scale 是百分百展示 不建议缩放
      if (this.scale == 100) {
        return;
      }
      this.scale += -5;
      console.log(parseInt(this.scale) + "%");
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    // 切换上一页
    prePage() {
      var p = this.pageNum;
      p = p > 1 ? p - 1 : this.pageTotalNum;
      this.pageNum = p;
      this.getPage(p);
    },
    // 切换下一页
    nextPage() {
      var p = this.pageNum;
      p = p < this.pageTotalNum ? p + 1 : 1;
      this.pageNum = p;
      this.getPage(p);
    },
    // 顺时针选中角度
    clock() {
      this.pageRotate += 90;
    },
    // 逆时针旋转角度
    counterClock() {
      this.pageRotate -= 90;
    },
    // pdf 有密码 则需要输入秘密
    password(updatePassword, reason) {
      updatePassword(prompt('password is "test"'));
      console.log("...reason...");
      console.log(reason);
      console.log("...reason...");
    },
    // 页面加载成功  当前页数
    pageLoaded(e) {
      this.$emit("current", e);
      this.curPageNum = e;
    },
    // 异常监听
    pdfError(error) {
      console.error(error);
    },
    // 打印所有
    pdfPrintAll() {
      this.$refs.pdf.print();
    },
    // 打印 第一页和第二页
    pdfPrint() {
      // 第一个参数 文档打印的分辨率
      // 第二个参数 文档打印的页数
      this.$refs.pdf.print(100, [1, 2]);
    },
    // 获取当前页面pdf的文字信息内容
    logContent() {
      this.$refs.pdf.pdf.forEachPage(function (page) {
        return page.getTextContent().then(function (content) {
          let text = content.items.map((item) => item.str);
          let allStr = content.items.reduce(
            (initVal, item) => (initVal += item.str),
            ""
          );
          console.log(allStr); // 内容字符串
          console.log(text); // 内容数组
        });
      });
    },
    async reportPreview() {
      this.src = pdf.createLoadingTask(this.pdfUrl);
      this.src.promise.then((pdf) => {
        this.numPages = pdf.numPages;
        this.loading.close();
      });
    },
  },
};
</script>

<style scoped>
.pdf {
  height: 100%;
  position: relative;
  box-sizing: border-box;
}
.pdf .show {
  overflow: auto;
  margin: auto;
  width: 100%;
  /* height: calc(100%); */
  max-height: 100%;
  /* min-height: 100%; */
  display: flex;
  flex-wrap: wrap;
}

.pdf .show .p-pdf {
  width: calc(100% / 5 - 60px);
  /* overflow: hidden; */
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 50px;
  margin: 25px;
  position: relative;
}
.pdf .show .p-pdf .line {
  position: absolute;
  width: 50px;
  right: -50px;
  background: rgb(255, 186, 96);
  height: 2px;
}

.pdf .show .p-pdf span {
  width: 100%;
  text-align: center;
  color: #fff;
}

.pdf .show .p-pdf span + span {
  margin-top: 10px;
}
.pdfbox {
  border: 3px solid #000;
  box-sizing: border-box;
  border-radius: 4px;
  overflow: hidden;
}
.pdf .pdf_footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0;
  width: 100%;
  height: 75px;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.pdf .pdf_footer .info {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
/* .pdf .pdf_footer .info div {
  width: 30%;
} */
.pdf .pdf_footer .operate {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.pdf .pdf_footer .operate div {
  text-align: center;
  font-size: 15px;
}
.pdf .pdf_footer .operate .btn {
  cursor: pointer;
  margin: 5px 10px;
  width: 100px;
  border-radius: 10px;
  padding: 5px;
  color: #fff;
  background-color: #066ebe;
}

.pdf::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.pdf::-webkit-scrollbar {
  border-radius: 10px;
  background-color: #b8bdc9;
}

/*定义滑块 内阴影+圆角*/
.pdf::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
  background-color: #2c5ab3;
}
</style>
