<template>
<div class="pdf">
  <div class="pdf-tab">
    <div class="top-pdf">
      <div
        class="bnt-pdf"
        @click.stop="prePage">上一页</div>
      <div
        class="bnt-pdf"
        @click.stop="nextPage">下一页</div>
    </div>
    <pdf
      ref="pdf"
      class="bottom-pdf"
      :src="pdfUrl"
      :page="pageNum"
      :rotate="pageRotate"
      @password="password"
      @progress="loadedRatio = $event"
      @page-loaded="pageLoaded($event)"
      @num-pages="pageTotalNum=$event"
      @error="pdfError($event)"
      @link-clicked="page = $event">
    </pdf>
<!--    <div
      class="btn-def"
      @click.stop="clock">顺时针</div>
    <div
      class="btn-def"
      @click.stop="counterClock">逆时针</div> -->
<!--    <div
      class="btn-def"
      @click.stop="pdfPrintAll">全部打印</div>
    <div
      class="btn-def"
      @click.stop="pdfPrint">部分打印</div>
    </div>
    <div>{{pageNum}}/{{pageTotalNum}}</div>
    <div>进度：{{loadedRatio}}</div>
    <div>页面加载成功: {{curPageNum}}</div> -->
  </div>
</div>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'

export default {
  name: 'Pdf',
  components: {
    pdf
  },
  props: {
    url: {
      type: String,
      default: 'https://doc.app.ftmainchain.com/uploadfile/docs/FT--1624443348214-15284873.pdf'
    }
  },
  data () {
    return {
      // pdfUrl: 'https://doc.app.ftmainchain.com/uploadfile/docs/FT--1624443348214-15284873.pdf',
      pdfUrl: null,
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0
    }
  },
  mounted: function () {
  },
  created: function () {
    // this.pdfUrl = pdf.createLoadingTask({
    //   url: 'https://doc.app.ftmainchain.com/uploadfile/docs/FT--1624443348214-15284873.pdf',
    //   cMapUrl: '../../../../static/cmaps/',
    //   cMapPacked: true
    // })
    this.pdfUrl = pdf.createLoadingTask({
      // url: 'https://doc.app.ftmainchain.com/uploadfile/docs/FT--1624443348214-15284873.pdf',
      url: this.url,
      CMapReaderFactory
    })
  },
  methods: {
    prePage () {
      var p = this.pageNum
      p = p > 1 ? p - 1 : this.pageTotalNum
      this.pageNum = p
    },
    nextPage () {
      console.log('nextpage')
      var p = this.pageNum
      p = p < this.pageTotalNum ? p + 1 : 1
      this.pageNum = p
    },
    clock () {
      this.pageRotate += 90
    },
    counterClock () {
      this.pageRotate -= 90
    },
    password (updatePassword, reason) {
      updatePassword(prompt('password is "123456"'))
      console.log('...reason...')
      console.log(reason)
      console.log('...reason...')
    },
    pageLoaded (e) {
      this.curPageNum = e
    },
    pdfError (error) {
      console.error(error)
    },
    pdfPrintAll () {
      this.$refs.pdf.print()
    },
    pdfPrint () {
      this.$refs.pdf.print(100, [1, 2])
    }
  }
}
</script>

<style>
/*  /deep/.bottom-pdf{
    height: 300px;
  } */
/*  .top-pdf{
    height: 300px;
  } */
 /* /deep/ canvas{
    width: 50%;
  } */
  .top-pdf{
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .bottom-pdf{
    margin: 0 auto;
  }
  .bnt-pdf:hover{
    cursor: pointer;
    opacity: 0.7;
  }
  .bnt-pdf{
    border: 1px solid #666666;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
  }
 .bottom-pdf{
    width: 50%;
  }
  .annotationLayer{
    transform: scale(1) !important;
  }
</style>