<template>

  <div class="pdf-wrapper">

    <div class="pdf-container">

      <div class="page-btn" @click="handleClickPdfPrev">

        <img src="../../assets/images/prev.png" alt="">

      </div>

      <div class="pdf">

        <div class="cav" ref="cavWrapper">

          <canvas ref="cav" :id="id"></canvas>

        </div>

      </div>

      <div class="page-btn" @click="handleClickPdfNext">

        <img src="../../assets/images/next.png" alt="">

      </div>

    </div>

    <loading v-if="!alivable" :text="pdfTipText"></loading>

    <div class="pdf-footer">

      <p v-if="alivable">{{pageNumber}}&nbsp;/&nbsp;{{total}}</p>

      <p v-else>正在分页...</p>

    </div>

  </div>

</template>



<script>

  import loading from './loading'

  import PDFJS from 'pdfjs-dist'

  import workerSrc from 'pdfjs-dist/build/pdf.worker.entry'

  import { baseUrl } from "../../api/api";



  export default {

    name: 'pdfRead',

    components: {

      loading

    },

    props: {

      id: {

        type: [String, Number],

        default: 'read1'

      },

      bookUrl: {

        type: String

      }

    },

    data(){

      return {

        alivable: false,

        pdfTipText: 'PDF解析中...',

        pageTipText: '正在生产分页...',

        pageNumber: null,

        total: null,

        baseUrl

      }

    },

    mounted(){

      this._initPdf()

    },

    methods: {

      // 下一页

      handleClickPdfNext(){

        if (this.alivable) {

          this.pageNumber++

          this.pageNumber = this.pageNumber > this.total ? this.total : this.pageNumber

          this.renderPage(this.pageNumber)

        }

      },

      // 上一页

      handleClickPdfPrev(){

        if (this.alivable) {

          this.pageNumber--

          this.pageNumber = this.pageNumber < 1 ? 1 : this.pageNumber

          this.renderPage(this.pageNumber)

        }

      },

      // 初始化PDF

      _initPdf(){

        PDFJS.workerSrc = workerSrc

        PDFJS.getDocument(this.baseUrl + this.bookUrl).then(_pdfdoc => {

          this.alivable = true

          this.PDFDOC = _pdfdoc

          this.total = this.PDFDOC.numPages

          this.pageNumber = 1

          this.renderPage(this.pageNumber)

        }).catch(err => {

        })

      },

      renderPage (num) {

        if (this.alivable) {

          this.ctx = this.$refs.cav.getContext('2d')

          this.PDFDOC.getPage(num).then(page => {

            const viewport = page.getViewport(1)

            this.scale = this.$refs.cavWrapper.offsetHeight / viewport.height

            const size = page.getViewport(this.scale)

            this.$refs.cav.height = size.height

            this.$refs.cav.width = size.width

            const renderContext = {

              canvasContext: this.ctx,

              viewport: size

            }

            this.renderTask = page.render(renderContext)

          })

        }

      }

    }

  }

</script>