<template>
  <a-modal
    centered
    v-drag-modal
    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>
            选择打印机：
            <div>
              <a-select size="small" style="width:200px;" v-model="printIndex" @change="changePrint" placeholder="选择打印机">
                <a-select-option v-for="item in printList" :key="'print-'+item.value" :value="item.name">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </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
            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>
        </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, getPrintList, hasExitTaskByName } 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,
      pdfList: [],
      src: '',
      loadedRatio: 0,
      page: 1,
      numPages: 0,
      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.pdfList = data
      this.curpage = 1
      this.total = data.length
      // 获取打印机列表
      this.printList = getPrintList()
      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) {
        hasExitTaskByName(function () {
          pdfPrint(_this.$store.state.app.pdfPrintList, 0)
        })
      } else {
        this.$message.info('请选择打印机')
      }
      _this.$emit('ok')
    },
    // 取消
    handleCommonCancel () {
      this.isShow = false
      this.pdfList = []
      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')
      }
    }
  }
}
</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>
