<template>
  <div class="common-pdfView-modal">
	  <div>
	    <div id="canvas"></div>
	    <div class="tools">
	      <div>
	        调整比例：{{ Math.round(scalVal*100) }}%
	        <div>
	          <u-button :disabled="scalLoading" style="margin-right: 10px;" size="mini" @click="setScalVal(0)"><a-icon type="minus" /> 缩小</u-button>
	          <u-button :disabled="scalLoading" size="mini" @click="setScalVal(1)"><a-icon type="plus" /> 放大</u-button>
	        </div>
	      </div>
	      <div>
	        <div v-if="hasClipboard">
	          <u-button :disabled="scalLoading" size="mini" @click="handleCapture('export')"><a-icon type="export" /> 导出图片</u-button>
	        </div>
	      </div>
	      <div>
	      </div>
	    </div>
	    <div :style="{width: '100%',height: '70vh',margin:'0 auto',padding: '10px 0',overflow:'auto'}">
	      <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
	      <pdf
	        ref="pdf"
	        v-for="(item,index) in pdfList"
	        :key="'pdf-'+index"
	        :style="{width: Math.round(scalVal*100)+'%',margin:'0 auto'}"
	        :src="getUrl('data:application/pdf;base64,' + item)"
	        :page="page"
	        :rotate="rotate"
	        @error="error"
	      ></pdf>
	    </div>
	  </div>
	  <div class="btn-box">
	    <u-button size="large" style="margin-right: 25px;" @click="handleCommonCancel">取消</u-button>
	    <u-button size="large" style="margin-right: 25px;" type="default" @click="handleCapture(hasClipboard?'copy':'export')">
	      {{ hasClipboard?'复制截图':'导出图片' }}
	    </u-button>
	  </div>
  </div>
</template>

<script>
import moment from 'moment'
import pdf from 'vue-pdf-signature'
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'
export default {
  components: {
    pdf
  },
  name: 'PdfView',
  data () {
    return {
      scalLoading: false,
      pdfAllLoad: 0,
      scalVal: 0.75,
      show: true,
      pdfList: [],
      src: '',
      loadedRatio: 0,
      page: 1,
      numPages: 0,
      rotate: 0,
      curpage: 1,
      total: 3,
    }
  },
  computed: {
    hasClipboard () {
      return typeof ClipboardItem !== 'undefined'
    }
  },
  onload(opts){
	  this.setData()
  },
  methods: {
    // 缩放
    setScalVal (t) {
      if (!this.scalLoading) {
        this.scalLoading = true
        this.scalVal = this.scalVal + (t ? 0.05 : -0.05)
        if (this.scalVal > 1) {
          this.scalVal = 1
        }
        if (this.scalVal < 0.5) {
          this.scalVal = 0.5
        }
        setTimeout(() => {
          this.scalLoading = false
        }, 1000)
      }
    },
    getUrl (item) {
      const src = pdf.createLoadingTask({ url: item, CMapReaderFactory })
      return src
    },
    setData () {
		this.pdfList = this.$store.state.vuex_tempData
		this.curpage = 1
		this.total = data.length
    },
    error: function (err) {
      console.log(err)
    },
    // 取消
    handleCommonCancel () {
      this.pdfList = []
	  uni.navigateBack()
    },
    // 截图
    handleCapture (type) {
      if (this.scalLoading) { return }
      const pdf = this.$refs.pdf
      const len = pdf.length
      const imgsList = []
      const canvas = document.createElement('canvas')
      let maxHeight = 0
      const maxWidth = pdf[0].$refs.canvas.width
      for (let i = 0; i < len; i++) {
        const imgs = pdf[i].$refs.canvas
        maxHeight = maxHeight + imgs.height
        imgsList.push(imgs)
      }
      // 设置画布宽度和高度
      canvas.width = maxWidth
      canvas.height = maxHeight
      const ctx = canvas.getContext('2d')
      // 开始合并
      let y = 0
      imgsList.map(item => {
        ctx.drawImage(item, 0, y, item.width, item.height)
        y = y + item.height
      })
      const base64Str = canvas.toDataURL('image/png')
      // 复制图片
      if (type == 'copy') {
        this.copyImgBtn(base64Str)
      }
      // 下载图片
      if (type == 'export') {
        const fileName = moment().format('YYYYMMDDHHmmss')
        this.downloadFile(fileName, base64Str)
      }
      // 清除画布
      ctx.clearRect(0, 0, maxWidth, maxHeight)
    },
    downloadFile (fileName, base64Data) {
      const aLink = document.createElement('a')
      const blob = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')
      const evt = document.createEvent('HTMLEvents')
      // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      evt.initEvent('click', true, true)
      aLink.download = fileName
      aLink.href = URL.createObjectURL(blob)
      aLink.click()
    },
    // 将照片复制到剪贴版
    copyImgBtn (base64Data) {
      const blobInput = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')
      if (navigator.clipboard) {
        const clipboardItemInput = new ClipboardItem({ 'image/png': blobInput })
        navigator.clipboard.write([clipboardItemInput])
        this.$message.success('截图成功，可以右键去粘贴图片！')
      } else {
        const image = nativeImageElectron.createFromDataURL(base64Data)
        clipboardElectron.writeImage(image)
        this.$message.success('截图成功，可以右键去粘贴图片！')
      }
    },
    convertBase64ToBlob (base64, type) {
      var bytes = window.atob(base64)
      var ab = new ArrayBuffer(bytes.length)
      var ua = new Uint8Array(ab)
      for (var i = 0; i < bytes.length; i++) {
        ua[i] = bytes.charCodeAt(i)
      }
      return new Blob([ab], { type: type })
    }
  },
  watch: {
  }
}
</script>

<style lang="less">
  .common-pdfView-modal{
    background-color: #666;
    .tools{
      padding: 10px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      background-color: #f8f8f8;
      justify-content: space-between;
      > div{
        display: flex;
        align-items: center;
        >div{
          padding: 0 10px;
        }
      }
    }
    .btn-box{
      text-align: center;
      margin-top: 20px;
    }
  }
</style>
