<template>
    <a-modal
      centered
      v-drag
      class="common-pdfView-modal"
      :footer="null"
      :maskClosable="false"
      v-model="isShow"
      :title="modalTit"
      :zIndex="1001"
      :destroyOnClose="true"
      @cancel="handleCommonCancel"
      width="1000px">
      <a-spin :spinning="spinning" tip="Loading...">
        <div class="common-main">
          <div id="canvas"></div>
          <div class="tools">
            <div>
              调整比例：{{ Math.round(scalVal*100) }}%
              <div>
                <a-button :disabled="scalLoading" style="margin-right: 10px;" size="small" @click="setScalVal(0)"><a-icon type="minus" /> 缩小</a-button>
                <a-button :disabled="scalLoading" size="small" @click="setScalVal(1)"><a-icon type="plus" /> 放大</a-button>
              </div>
            </div>
            <div>
              <div v-if="hasClipboard">
                <a-button :disabled="scalLoading" size="small" @click="handleCapture('export')"><a-icon type="export" /> 导出图片</a-button>
              </div>
            </div>
          </div>
          <vue-scroll :ops="ops" :style="{width: '100%',height: '70vh',margin:'0 auto',padding: '10px 0'}">
            <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
                v-for="i in numPages"
                :key="i"
                :src="src"
                :page="i"
                style="display: inline-block; width: 25%"
            ></pdf>
          </vue-scroll>
        </div>
        <div class="btn-box">
          <a-button size="large" style="margin-right: 25px;" @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
          <a-button size="large" style="margin-right: 25px;" type="default" @click="handleCapture(hasClipboard?'copy':'export')">
            {{ hasClipboard?'复制截图':'导出图片' }}
          </a-button>
          <a-button size="large" type="primary" :loading="$store.state.app.printLoading" @click="handleCommonOk">
            {{ $store.state.app.printLoading?'打印中...':okText }}
          </a-button>
        </div>
      </a-spin>
    </a-modal>
  </template>
  
  <script>
  import moment from 'moment'
  import pdf from 'vue-pdf-signature'
  import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'
  import { pdfPrint } from '@/libs/JGPrint'
  export default {
    components: {
      pdf
    },
    name: 'PdfViewModal',
    props: {
      openModal: { //  弹框显示状态
        type: Boolean,
        default: false
      },
      modalTit: { // 弹框标题
        type: String,
        default: '打印预览'
      },
      okText: { // 确定 按钮文字
        type: String,
        default: '打印'
      },
      cancelText: { // 取消 按钮文字
        type: String,
        default: '取消'
      },
      isCancel: { // 是否显示  取消 按钮
        type: Boolean,
        default: true
      },
      spinning: { // 加载中
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        scalLoading: false,
        pdfAllLoad: 0,
        scalVal: 0.75,
        isShow: this.openModal, //  是否打开弹框
        show: true,
        src: '',
        loadedRatio: 0,
        page: 1,
        numPages: undefined,
        rotate: 0,
        curpage: 1,
        total: 3,
        ops: {
          vuescroll: {},
          scrollPanel: {},
          rail: {
            keepShow: true
          },
          bar: {
            hoverStyle: true,
            onlyShowBarOnScroll: false, // 是否只有滚动的时候才显示滚动条
            background: '#9d9d9d', // 滚动条颜色
            opacity: 0.5, // 滚动条透明度
            size: '10px',
            'overflow-x': 'hidden'
          }
        },
        printIndex: undefined,
        printList: []
      }
    },
    computed: {
      hasClipboard () {
        return typeof ClipboardItem !== 'undefined'
      }
    },
    methods: {
      // 选择打印机
      changePrint (v) {
        this.printIndex = v
        this.$store.commit('SET_printDefNeedle', this.printIndex)
        this.$store.state.app.printTaskID = undefined
      },
      // 缩放
      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 (data) {
        // console.log(data)
        this.curpage = 1
        this.total = data.length
 
        const defPrint = this.$store.state.app.printDefNeedle
        this.printIndex = defPrint ? (defPrint == 'undefined' ? undefined : defPrint) : undefined
      },
      error: function (err) {
        console.log(err)
      },
      // 确定
      handleCommonOk () {
        const _this = this
        const hasPrint = this.printList.find(item => item.name == this.printIndex)
        // 已选择打印机
        if (hasPrint) {
           pdfPrint(_this.$store.state.app.pdfPrintList, 0)
        } else {
          this.$message.info('请选择打印机')
        }
        _this.$emit('ok')
      },
      // 取消
      handleCommonCancel () {
        this.isShow = false
        this.$store.commit('SET_pdfPrintList', [])
        this.$store.commit('SET_showPdfPrint', false)
        this.$emit('cancel')
        this.scalVal = 0.75
      },
      // 截图
      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: {
      //  父页面传过来的弹框状态
      openModal (newValue, oldValue) {
        this.isShow = newValue
      },
      //  重定义的弹框状态
      isShow (newValue, oldValue) {
        if (!newValue) {
          this.$emit('cancel')
        }else{
            this.setData()
        }
      }
    }
  }
  </script>
  
  <style lang="less">
    .common-pdfView-modal{
      .ant-modal-body{
        padding: 0 0 20px 0;
      }
      .common-main{
        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>
  