<!--
@description: pdf查看 全局使用
@author: 肖文龙/苏志刚
@date：  2020-2-6 15:12:17/2020 08-22 9:30
-->
<template>
  <div>
    <div class="clearfix">
      <!--二维码-弹框-->
      <el-dialog
        :visible.sync="QRCodeDialog"
        :before-close="cancel"
        append-to-body
        title="二维码扫描"
        width="300px"
      >
        <div style="display:flex;justify-content: center;">
          <img :src="QRCodeUrl" draggable="false" alt="">
        </div>
      </el-dialog>
      <!--扫码签章选取-弹框-->
      <el-dialog
        :visible.sync="signatureDialog"
        :close-on-click-modal="false"
        title="扫码签章"
        append-to-body
        width="700px"
      >
        <ul
          class="signatureList"
          style="display:flex;paddping: 10px 15px;"
        >
          <li
            v-for="(item, index) in signatureList"
            :key="index"
            :class="signatureActive === index ? 'signatureActive' : ''"
            style="margin-left:20px;"
            @click="selectSignature(item, index)"
          >
            <img
              :src="'data:image/png;base64,' + item.sealImage"
              draggable="false"
              alt=""
            >
          </li>
        </ul>
        <span slot="footer" class="dialog-footer">
          <el-button @click="signatureConfirm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <iframe
      id="pdfviewer"
      :height="height"
      :src="pdfDomainURL+pdfUrl"
      frameborder="0"
      class="iframe"
      name="pdfviewer"
    />
    <div id="stampInfo" class="stampInfo">
      <el-button
        type="primary"
        style="margin: 10px 0"
        @click="signatureClick"
      >
        扫码签章
      </el-button>
      <br>
      <img id="stampImage" width="151px" height="151px">
      <br>
      <br>
      <br>
      <el-button type="primary" @click="InsertStamp">
        插入签章
      </el-button>
      <br>
      <br>
      <br>
      <el-button :loading="loading" type="primary" @click="GetStamps">
        提交签章
      </el-button>
      <br>
      <br>
      <br>
      <el-button type="danger" @click="ClearStamps">
        清除签章
      </el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
// PDF签章调用js文件
import StampModule from './stamp_module.js'
/* api*/
import {
  getSealImageListInfo,
  getUserQRCodeContent,
  encodeQrcode,
  getQRCodeIsScaned,
  judgeBindingScanCodeToken,
  getSignatureQRCodeContent,
  getSignatureValueSealPDF,
  endProtProjectProcedureSignature,
  endEvalExpertSignatureReportStatus // 评委专家完成签章更正【签章人数、签章状态】
} from '@api/procurement/procurementEvaluation'
import {
  getQRCodeContent, // 获取【身份认证的二维码】
  getQRCencodeQrcode, // 生成二维码 getQRCencodeQrcode
  getSupplierQRCodeLoginInfo, // 获取二维码登录信息（认证信息）
  getSupplierSealImageListInfo, // 获取签章列表1
  getSealImageListInfoRedis, // 获取签章列表2
  getSupplierSignatureQRCodeContent,
  getSupplierSignatureValueSealPDF // 签章合章
} from '@api/procurement/procurementOffer'
import {
  getSupplierQRCodeIsScaned // 获取扫码状态
} from '@api/common/user'
/* 公用方法*/
import { randomData } from '@assets/js/utils' // 常用方法
export default {
  name: 'Pdf',
  inject: ['reload'], // 刷新
  props: {
    // pdf地址
    pdfUrl: {
      type: String,
      default: ''
    },
    // 项目基本细腻
    getTenderBase: {
      type: Object,
      default: function() {
        return {}
      }
    },
    /* 签章类型 project项目签章 evaluation评标
    project 项目 evaluation 评标
    * */
    signatureTyoe: {
      type: String,
      default: 'evaluation'
    },
    // pdf附件业务主键id
    signatureOtherData: {
      type: Object,
      default: function() {
        return {
          fileId: '',
          signatureType: ''
        }
      }
    },
    // 报表详情表主键ID
    reportDetailId: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      loading: false,
      height: 0,
      /* ===========================================签章选取部分===========================================*/
      signatureDialog: false, // 选择签章-弹框展示状态 布尔值
      signatureActive: '', // 选择签章索引
      signatureList: [], // 选择签章列表
      /* ===========================================二维码获取部分===========================================*/
      QRCodeDialog: false, // 二维码扫描-弹框展示状态 布尔值
      QRCodeUrl: '', // 二维码链接地址
      // 获取签章的二维码-签章信息
      signatureData: {
        sealBelong: '', // 印章归属人类型01 个人02 机构
        sealImageType: '', // 印章归属人类型00 个人签名01 公章02 合同章03 财务章
        src: '', // 需要盖章的文件图片路径
        coordinatePage: '', // 签章位置页码
        coordinateLongitudinal: '', // 签章纵坐标
        coordinateTransverse: '', // 签章横坐标
        sealImage: '' // 印章
      },
      //  Base64 编码的 PNG 数据
      imgDPI: 96, // 印章图片的 DPI
      imgData: '',
      pdfDomainURL: '/static/procurement/TrustSignPDF.js/web/viewer.html?file=', // 地址
      // 检查二维码参数
      formData: {
        src: '', // 需要盖章的文件图片路径
        sealImage: '', // 印章
        coordinatePage: '', // 签章位置页码
        coordinateLongitudinal: '', // 签章纵坐标
        coordinateTransverse: '', // 签章横坐标
        signFieldName: '', // 签章位置名称
        tid: ''
      },
      // 供应商签章是否扫描参数
      supplieSinatureIsScaned: {
        TId: '',
        QRCodeType: ''
      },
      // 供应商签章登录认证参数
      sinatureCheckSean: {
        TId: '',
        indentifyId: '',
        system: '',
        terminalType: '',
        toolType: '',
        version: ''
      }
    }
  },
  computed: {
    /* contextPath 配置环境路径*/
    ...mapGetters(['contextPath'])
  },
  watch: {
    pdfUrl(val) {
      if (val) {
        var decodeSrc = this.pdfUrl.split('3D')[1].split('%2F').join('/') // 需要盖章的文件图片路径
        this.signatureData.src = this.$Base64.encode('3dms' + decodeSrc) // base64加密
        this.OnLoad()// 初始化-pdfUrl展示
      }
    }
  },
  created() {
    var decodeSrc = this.pdfUrl.split('3D')[1].split('%2F').join('/') // 需要盖章的文件图片路径
    this.signatureData.src = this.$Base64.encode('3dms' + decodeSrc) // base64加密
    this.pdfDomainURL = this.contextPath + this.pdfDomainURL// 配置环境路径
    // 获取公告内容pdf
    this.height = document.body.clientHeight - 56 - 70 - 50
    window.onresize = () => {
      this.height = document.body.clientHeight - 56 - 70 - 50
    }
  },
  mounted() {
    // 初始化-pdfUrl展示
    setTimeout(() => {
      this.OnLoad()
    }, 4000)
  },
  methods: {
    /* ===========================================pdf签章===========================================*/
    // 初始化-pdfUrl展示
    OnLoad() {
      this.$nextTick(() => {
        document.getElementById('stampImage').src = 'data:image/png;base64,' + this.imgData
        var contentDocument = document.getElementById('pdfviewer').contentDocument
        var PDFViewerApplication = parent.frames['pdfviewer'].PDFViewerApplication
        StampModule.initialize(contentDocument, PDFViewerApplication)
        // contentDocument.onremovestamp = function(event) {
        //   alert('stamp ' + event.detail.stampId + ' has been removed!')
        // }
      })
    },
    // 插入签章
    InsertStamp() {
      StampModule.insertStamp(this.signatureData.sealImage, this.imgDPI)
    },
    // 提交签章
    GetStamps() {
      this.loading = true
      var stamps = StampModule.getStamps()
      this.signatureData.coordinatePage = stamps[0].page // 签章位置
      this.signatureData.coordinateTransverse = stamps[0].y // x轴
      this.signatureData.coordinateLongitudinal = stamps[0].x // y轴
      this.inChapter() // 签章合章
    },
    // 清除签章
    ClearStamps() {
      this.$confirm('确定清除签章吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn'
      })
        .then(() => {
          StampModule.clearStamps()
        })
        .catch(() => { })
    },
    /* ===========================================VUEX-js方法所属部分===========================================*/
    /* 扫码签章-获取印章
    signatureTyoe project 项目签章  evaluation 评标签章
     */
    signatureClick() {
      if (this.signatureTyoe === 'project') {
        // 供应上扫码签章
        this.projectSigna()
        return
      }
      // 评标扫码签章
      this.evaluationSigna()
    },
    // 选取章
    selectSignature(item, index) {
      this.signatureData.sealBelong = item.sealBelong // 印章归属人类型
      this.signatureData.sealImageType = item.sealImageType // 印章归属人类型
      this.signatureData.sealImage = item.sealImage // 印章
      this.signatureActive = index // 选择签章索引
      this.signatureData.sealImage = item.sealImage // 选择签章图片
    },
    /* 确定选中签章*/
    signatureConfirm() {
      if (this.signatureData.sealImage) {
        document.getElementById('stampImage').src =
          'data:image/png;base64,' + this.signatureData.sealImage
        // this.triggerPlaceSignature(this.signatureData.sealImage)// 确定选中签章-插件中的方法
        this.signatureDialog = false // 选择签章-弹框展示状态
        return
      }
      this.$message.warning('必须选择个人签名')
    },
    // 取消-关闭弹框
    cancel() {
      this.QRCodeDialog = false // 二维码扫描-弹框展示状态
      this.signatureDialog = false // 选择签章-弹框展示状态
    },
    /* 签章-合章
    signatureTyoe project 项目签章  evaluation 评标签章
     */
    inChapter() {
      if (this.signatureTyoe === 'project') {
        // 调用项目签章合章方法
        this.chapterProject()
        return
      }
      // 调用评标签章合章方法
      this.chapterEvaluation()
    },
    /*
    * ==================================扫码签章start=====================================================
    * */
    // 评标扫码签章
    evaluationSigna() {
      //  获取印章图片列表
      getSealImageListInfo().then(res => {
        if (res.data.code === '1' || res.data.code === '2') {
          //  获取用户身份的二维码
          var dat = 11 // 身份二维码固定值
          getUserQRCodeContent(dat).then(rest => {
            const listData = rest.data.data.content
            this.formData.tid = rest.data.data.tid
            //  生成二维码
            encodeQrcode(listData).then(resc => {
              this.QRCodeUrl = window.URL.createObjectURL(new Blob([resc])) // 二维码链接地址
              this.QRCodeDialog = true // 二维码扫描-弹框展示状态
              // this.cancel()// 取消-关闭弹框
              const str = setInterval(() => {
                //  检查二维码是否已扫描
                getQRCodeIsScaned(this.formData).then(resy => {
                  if (resy.data.code === '0' && resy.data.data === '01') {
                    window.clearInterval(str)
                    this.cancel() // 取消-关闭弹框
                    const recdev = setInterval(() => {
                      //  是否绑定扫码APP,获取用户信息，否（用户登录首次推送
                      judgeBindingScanCodeToken(this.formData.tid).then(
                        resode => {
                          if (resode.data.code === '0') {
                            window.clearInterval(recdev)
                            this.signatureClick()
                          }
                          if (resode.data.code === '1') {
                            window.clearInterval(recdev)
                            alert(resode.data.information)
                          }
                        }
                      )
                    }, 2000)
                  }
                })
              }, 2000)
            })
          })
          return
        }
        if (res.data.code === '0') {
          this.signatureList = res.data.data // 签章列表
          this.signatureDialog = true // 选择签章-弹框展示状态
          return
        }
      })
    },
    // 评委专家完成签章更正【签章人数、签章状态】
    // 供应商扫码签章
    projectSigna() {
      // 获取签章图片列表
      getSealImageListInfoRedis().then(resl => {
        if (resl.data.header.returnCode === '2') {
          // 获取【身份认证的二维码】
          getQRCodeContent().then(res => {
            // 获取二维码地址
            const listData = res.data.data.content
            this.supplieSinatureIsScaned.TId = res.data.data.tid
            this.supplieSinatureIsScaned.QRCodeType = '06'
            this.sinatureCheckSean.TId = res.data.data.tid
            // 生成二维码
            getQRCencodeQrcode(listData).then(res => {
              this.QRCodeUrl = window.URL.createObjectURL(new Blob([res])) // 二维码链接地址
              this.QRCodeDialog = true // 二维码扫描-弹框展示状态
              const str = setInterval(() => {
                // 检查二维码是否已扫描
                getSupplierQRCodeIsScaned(this.supplieSinatureIsScaned).then(resy => {
                  if (resy.data === '01') {
                    window.clearInterval(str)
                    this.cancel() // 取消-关闭弹框
                    const recdev = setInterval(() => {
                      //  是否绑定扫码APP,获取用户信息，否（用户登录首次推送
                      getSupplierQRCodeLoginInfo(this.sinatureCheckSean).then(
                        resode => {
                          if (resode.data === '0') {
                            window.clearInterval(recdev)
                            getSupplierSealImageListInfo().then(signatureLis => {
                              this.signatureList = signatureLis.data.data // 签章列表
                              this.signatureDialog = true // 选择签章-弹框展示状态
                            })
                          }
                        }
                      )
                    }, 2000)
                  }
                })
              }, 2000)
            })
          })
          return
        }
        if (resl.data.header.returnCode !== '2') {
          this.signatureList = resl.data.data // 签章列表
          this.signatureDialog = true // 选择签章-弹框展示状态
        }
      })
    },
    /*
     * ==================================扫码签章End=====================================================
    * */
    /*
    * ==================================签章合章 start=====================================================
   * */
    // 评标的签章>合章
    chapterEvaluation() {
      /* 获取签章的二维码*/
      this.signatureData.signFieldName = randomData() // 签章位置名称-随机数
      getSignatureQRCodeContent(this.signatureData).then(rest => {
        const listData = rest.data.data.content
        // 检查二维码参数
        this.formData = { ...this.signatureData }
        this.formData.tid = rest.data.data.tid
        //  生成二维码
        encodeQrcode(listData).then(resc => {
          this.QRCodeUrl = window.URL.createObjectURL(new Blob([resc])) // 二维码链接地址
          this.QRCodeDialog = true // 二维码扫描-弹框展示状态
          //  检查二维码是否已扫描
          const str = setInterval(() => {
            getQRCodeIsScaned(this.formData).then(resy => {
              if (resy.data.code === '0' && resy.data.data === '01') {
                window.clearInterval(str) // 检查二维码是否已扫描-清除定时器
                const strc = setInterval(() => {
                  getSignatureValueSealPDF(this.formData).then(rescde => {
                    if (rescde.data.code === '0') {
                      this.loading = false
                      window.clearInterval(strc) // 清除定时器
                      this.cancel() // 取消-关闭弹框
                      // 提交签章请求
                      this.submitSignature()
                    }
                  }).catch(() => {
                    this.loading = false
                  })
                }, 2000)
              }
            }).catch(() => {
              this.loading = false
            })
          }, 2000)
        }).catch(() => {
          this.loading = false
        })
      }).catch(() => {
        this.loading = false
      })
    },
    // 评委专家完成签章更正【签章人数、签章状态】
    updateSignatureStatus() {
      endEvalExpertSignatureReportStatus(this.reportDetailId).then(res => {
      }).catch(() => {
        this.loading = false
      })
    },
    // 评标提交签章请求
    submitSignature() {
      // 提交签章
      const data = {
        evalExpertId: this.getTenderBase.evalExpertId,
        driverId: this.getTenderBase.driverId
      }
      endProtProjectProcedureSignature(data)
        .then(res => {
          // 评委专家完成签章更正【签章人数、签章状态】
          this.updateSignatureStatus()
          this.$emit('reloadDriver')
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 供应商 签章》合章
    chapterProject() {
      /* 获取签章的二维码*/
      const data = {
        ...this.signatureData,
        TId: this.sinatureCheckSean.TId
      }
      getSupplierSignatureQRCodeContent(data).then(res => {
        // 获取二维码地址
        const listData = res.data.data.content
        // 检查二维码参数
        this.formData = { ...this.signatureData }
        this.formData.TId = res.data.data.tid
        // this.formData.offerId = this.signatureOtherData.offerId // 供应商当前轮次的报价id
        //  this.formData.signatureType = this.signatureOtherData.signatureType // 供应商的签章类型
        this.supplieSinatureIsScaned.TId = res.data.data.tid
        this.supplieSinatureIsScaned.QRCodeType = '06'
        const data = {
          TId: this.formData.TId, // tid
          bizId: this.signatureOtherData.fileId, // 签章文件的bizid 报价单和应答文件的bizid
          signatureType: this.signatureOtherData.signatureType // 签章类型 应答文件的签章类型 报价单的签章类型
        }
        // 生成二维码
        getQRCencodeQrcode(listData).then(res => {
          this.QRCodeUrl = window.URL.createObjectURL(new Blob([res])) // 二维码链接地址
          this.QRCodeDialog = true // 二维码扫描-弹框展示状态
          const str = setInterval(() => {
            //  检查二维码是否已扫描
            getSupplierQRCodeIsScaned(this.supplieSinatureIsScaned).then(resy => {
              if (resy.data === '01') {
                window.clearInterval(str) // 清楚定时器
                this.cancel() // 取消-关闭弹框
                const recdev = setInterval(() => {
                  //  是否绑定扫码APP,获取用户信息，否（用户登录首次推送）
                  getSupplierSignatureValueSealPDF(data).then(
                    resode => {
                      if (resode.data) {
                        window.clearInterval(recdev) // 清楚定时器
                        this.$emit('reloadDriver', true) // 签章成功之后给父元素一个提示 刷新pdf
                      }
                    }
                  )
                }, 2000)
              }
            })
          }, 2000)
        })
      })
    }
    /*
     *  ==================================签章合章 End=====================================================
   * */
  }
}
</script>
<style lang="less" scoped>
  .body {
    margin: 0;
    padding: 0;
    min-width: 800px;
  }

  .iframe {
    float: left;
    width: 80%;
  }

  .stampInfo {
    align: right;
    text-align: center;
    top: 10px;
    height: 100%;
  }
  /*签章列表*/
  .signatureList {
    li {
      img {
        cursor: pointer;
        transform: scale(0.95, 0.95);
      }
    }
    /*选取签章索引样式*/
    .signatureActive {
      border: 1px solid red;
      img {
        transform: scale(1, 1);
      }
    }
  }
</style>
