<template>
  <div class="pdf" v-loading="loading">
    <pdf v-for="i in numPages" :key="i" :src="laoclUrl" :page="i"></pdf>
  </div>
</template>

<script>
/* eslint-disable */
import pdf from "vue-pdf"
export default {
  name: "index",
  props: {
    // 当前pdf的路径
    pdfUrl: {
      type: String,
      default: "",
    },
  },
  components: {
    pdf,
  },
  data() {
    return {
      loading: false,
      // 当前页数
      numPages: 1,
      // 预览路径
      laoclUrl: "",
    }
  },
  watch: {},
  computed: {},
  created() {
    this.laoclUrl = this.pdfUrl
  },
  mounted() {
    this.getNumPages()
  },
  methods: {
    getNumPages() {
      this.loading = true
      let loadingTask = pdf.createLoadingTask(this.laoclUrl)
      // 网上查询 都没有加promise执行的整页渲染 emmmm... 不知道他们怎么运行的
      loadingTask.promise
        .then((pdf) => {
          // this.laoclUrl = loadingTask
          this.numPages = pdf.numPages
          this.loading = false
        })
        .catch((err) => {
          console.error("pdf加载失败")
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
