<template>
  <a-modal
    centered
    class="common-pdfView-modal"
    :footer="null"
    :maskClosable="false"
    v-model="isShow"
    :title="modalTit"
    :zIndex="1001"
    destroyOnClose
    @cancel="handleCommonCancel"
    width="1024px">
    <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 size="small" @click="setScalVal(0)"><a-icon type="minus" /> 缩小</a-button>
              <a-button size="small" @click="setScalVal(1)"><a-icon type="plus" /> 放大</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: Math.round(scalVal*100)+'%',height: '70vh',margin:'0 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: '100%'}"
            :src="getUrl('data:application/pdf;base64,' + item)"
            :page="page"
            :rotate="rotate"
            @progress="loadedRatio = $event"
            @error="error"
            @num-pages="numPages = $event"
            @link-clicked="page = $event"></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" type="primary" :loading="$store.state.app.printLoading" @click="handleCommonOk">
          {{ $store.state.app.printLoading?'打印中...':okText }}
        </a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
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 {
      scalVal: 0.9,
      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: []
    }
  },
  methods: {
    // 选择打印机
    changePrint (v) {
      this.printIndex = v
      this.$store.commit('SET_printDefNeedle', this.printIndex)
      this.$store.state.app.printTaskID = undefined
    },
    // 缩放
    setScalVal (t) {
      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
      }
    },
    getUrl (item) {
      const src = pdf.createLoadingTask({ url: item, CMapReaderFactory })
      return src
    },
    setData (data) {
      // console.log(data)
      this.pdfList = data
      this.src = data[0]
      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.9
    },
    // 下载
    handleDownload () {
      console.log(this.$refs.pdf[0].pdf)
    }
  },
  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 30px 0;
    }
    .common-main{
      background-color: #fff;
      .tools{
        padding: 10px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        background-color: #f8f8f8;
        > div{
          display: flex;
          align-items: center;
          >div{
            padding: 0 10px;
          }
        }
      }
    }
    .btn-box{
      text-align: center;
      margin-top: 20px;
    }
  }
</style>
