<!--
@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="title"
        width="300px"
        custom-class="el-dialog__body-p0"
      >
        <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;padding-bottom: 10px"
        >
          <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">
      <p style="color:red;">
        注：如手机App签章失败，请确认使用获取电子签章时的手机号登陆，完成签章
      </p>
      <p>
        还未开通APP扫码服务？现在就
        <el-button type="text" @click="openServe">
          立即开通
        </el-button>
      </p>
      <img id="stampImage" style="display:none" width="151px" height="151px">
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
// PDF签章调用js文件
import StampModule from './stamp_module.js'
/* api*/
import {
  getQRCodeContent, // 获取【身份认证的二维码】
  getQRCencodeQrcode, // 生成二维码 getQRCencodeQrcode
  getSupplierQRCodeLoginInfo, // 获取二维码登录信息（认证信息）
  getSupplierSealImageListInfo, // 获取签章列表1
  // getSealImageListInfoRedis, // 获取签章列表2
  getSupplierSignatureQRCodeContent,
  getSupplierSignatureValueSealPDF // 签章合章
} from '@api/procurement/procurementOffer'
import {
  getSupplierQRCodeIsScaned // 获取扫码状态
} from '@api/common/user'
/* 公用方法*/
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 ''
      }
    },
    // 提交成功回调
    insertBack: {
      type: Function,
      default: function() {
      }
    }
  },
  data() {
    return {
      loading: false,
      height: 0,
      /* ===========================================签章选取部分===========================================*/
      signatureDialog: false, // 选择签章-弹框展示状态 布尔值
      signatureActive: '', // 选择签章索引
      signatureList: [], // 选择签章列表
      /* ===========================================二维码获取部分===========================================*/
      QRCodeDialog: false, // 二维码扫描-弹框展示状态 布尔值
      QRCodeUrl: '', // 二维码链接地址
      /* ===========================================二维码获取部分===========================================*/
      setIntervalQRCode: '', // 定时器-是否已扫码成功
      setIntervalLoginInfo: '', // 定时器-获取登陆信息
      setIntervalInChapter: '', // 定时器-合章是否成功
      tId: '', // Tid
      title: '', // 二维码弹框标题 身份认证二维码 签章合章二维码
      // 获取签章的二维码-签章信息
      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.$nextTick(() => {
          this.OnLoad()
        })
      }
    },
    // 监控二维码弹框状态 关闭的 取消按钮状态
    QRCodeDialog(val) {
      if (!val) {
        this.insertBack({ loading: false })
      }
    }
  },
  created() {
    if (this.pdfUrl) {
      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)
  },
  // vue被销毁是清空定时器 防止页面无限调用
  destroyed() {
    this.setClearInterva()
  },
  methods: {
    // 立即开通app扫码签-引导
    openServe() {
      window.open('http://manage.ebinterlink.com/smapp/sources/app.html', 'target')
    },
    /* ===========================================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)
        this.insertBack({ loading: false })
        // contentDocument.onremovestamp = function(event) {
        //   alert('stamp ' + event.detail.stampId + ' has been removed!')
        // }
      })
    },
    // 插入签章
    InsertStamp() {
      StampModule.insertStamp(this.signatureData.sealImage, this.imgDPI)
    },
    // 扫码签章
    signatureClick() {
      this.projectSigna()
    },
    // 提交签章
    GetStamps() {
      this.loading = true
      var stamps = StampModule.getStamps()
      if (stamps.length > 0) {
        this.signatureData.coordinatePage = stamps[0].page // 签章位置
        this.signatureData.coordinateTransverse = stamps[0].y // x轴
        this.signatureData.coordinateLongitudinal = stamps[0].x // y轴
        this.supplierSeal() // 签章合章
      } else {
        this.$alert('请先签章再提交。', '提示', {
          confirmButtonText: '确定',
          type: 'warning',
          showClose: false,
          callback: action => {
            this.projectSigna()
          }
        })
      }
    },
    // 清除签章
    ClearStamps() {
      this.$confirm('确定清除签章吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn'
      })
        .then(() => {
          StampModule.clearStamps()
        })
        .catch(() => { })
    },
    /* ===========================================VUEX-js方法所属部分===========================================*/
    // 选取章
    selectSignature(item, index) {
      if (item.sealImage) {
        StampModule.clearStamps()
        this.signatureData.sealBelong = item.sealBelong // 印章归属人类型
        this.signatureData.sealImageType = item.sealImageType // 印章归属人类型
        this.signatureData.sealImage = item.sealImage // 印章
        this.signatureActive = index // 选择签章索引
        this.signatureData.sealImage = item.sealImage // 选择签章图片
        StampModule.insertStamp(this.signatureData.sealImage, this.imgDPI)
        this.signatureDialog = false // 选择签章-弹框展示状态
        return
      }
      this.$message.warning('必须选择个人签名')
    },
    // 取消-关闭弹框
    cancel() {
      this.QRCodeDialog = false // 二维码扫描-弹框展示状态
      this.signatureDialog = false // 选择签章-弹框展示状态
    },
    /*
    * ==================================签章公共部分start=====================================================
    * */
    // 扫码签章-生成二维码(base64转换)
    encodeQrcode(data, _this, type) {
      getQRCencodeQrcode(data.base64Url).then(res => {
        this.QRCodeUrl = window.URL.createObjectURL(new Blob([res])) // 二维码链接地址
        if (type === 'seal') {
          // 盖章/合章
          this.title = '签章/合章二维码'
        } else {
          // 身份认证
          this.title = '身份认证'
        }
        this.QRCodeDialog = true // 二维码扫描-弹框展示状态
        this.getQRCodeIsScaned(data, _this, type)
      })
    },
    // 校验是否已扫描二维码
    getQRCodeIsScaned(data, _this, type) {
      // 使用定时器进行定时扫描
      _this.setIntervalQRCode = setInterval(function() {
        const QRCodeData = {
          QRCodeType: data.qRCodeType,
          TId: data.tId
        }
        getSupplierQRCodeIsScaned(QRCodeData).then(response => {
          if (response.data === '01') {
            clearInterval(_this.setIntervalQRCode)
            _this.cancel() // 取消-关闭弹框
            if (type === 'seal') {
              // 盖章/合章
              _this.getSupplierSignatureValueSealPDF(data, _this)
            } else {
              // 获取章
              _this.getQRCodeLoginInfo(data, _this)// 扫码-获取登陆信息
            }
          }
        })
      }, 2000)
    },
    /*
  * ==================================签章公共部分End=====================================================
  * */
    /*
    /*
    * ==================================扫码签章start=====================================================
    * */
    /*
  扫码签章-供应商印章印章
 */
    // 供应商扫码签章
    projectSigna() {
      // 获取签章图片列表
      // getSealImageListInfoRedis().then(resl => {
      //   if (resl.data.header.returnCode === '2') {
      //     this.supplierQuerySignature()
      //     return
      //   }
      //   if (resl.data.header.returnCode !== '2') {
      //     this.signatureList = resl.data.data // 签章列表
      //     this.signatureDialog = true // 选择签章-弹框展示状态
      //   }
      // })
      // 获取身份二维码
      this.supplierQuerySignature()
    },
    // 获取身份二维码
    supplierQuerySignature() {
      const _this = this
      // 获取【身份认证的二维码】
      getQRCodeContent().then(res => {
        const data = {
          base64Url: res.data.data.content, // 二维码地址
          qRCodeType: '06',
          tId: res.data.data.tid
        }
        this.tId = data.tId
        this.encodeQrcode(data, _this)
      })
    },
    // 扫码-获取登陆信息
    getQRCodeLoginInfo(data, _this) {
      clearInterval(_this.setIntervalLoginInfo)
      // 使用定时器进行定时扫描
      _this.setIntervalLoginInfo = setInterval(function() {
        const loginData = {
          ..._this.sinatureCheckSean,
          TId: data.tId
        }
        getSupplierQRCodeLoginInfo(loginData).then(res => {
          if (res.data === '0') {
            clearInterval(_this.setIntervalLoginInfo)
            _this.getSupplierSealImageListInfo(_this)// 扫码-获取签章图片
          }
        })
      }, 2000)
    },
    // 扫码-获取签章图片
    getSupplierSealImageListInfo(_this) {
      getSupplierSealImageListInfo().then(response => {
        _this.signatureList = response.data.data // 签章列表
        _this.signatureDialog = true // 选择签章-弹框展示状态
      })
    },
    /*
     * ==================================扫码签章End=====================================================
    * */
    /*
    * ==================================签章合章 start=====================================================
   * */
    /*
   扫码签章-供应商提交签章
 */
    supplierSeal() {
      const _this = this
      // 获取【签章二维码】
      const data = {
        ..._this.signatureData,
        TId: _this.tId
      }
      getSupplierSignatureQRCodeContent(data).then(res => {
        const data = {
          base64Url: res.data.data.content, // 二维码地址
          qRCodeType: '06',
          tId: res.data.data.tid
        }
        this.encodeQrcode(data, _this, 'seal')
      })
    },
    // 盖章/合章
    getSupplierSignatureValueSealPDF(data, _this) {
      // 使用定时器进行定时扫描
      _this.setIntervalInChapter = setInterval(function() {
        const sealData = {
          TId: data.tId,
          bizId: _this.signatureOtherData.fileId, // 签章文件的bizid 报价单和应答文件的bizid
          signatureType: _this.signatureOtherData.signatureType // 签章类型 应答文件的签章类型 报价单的签章类型
        }
        getSupplierSignatureValueSealPDF(sealData).then(res => {
          if (res.data) {
            clearInterval(_this.setIntervalInChapter)
            _this.setClearInterva()
            _this.$emit('reloadDriver', true) // 签章成功之后给父元素一个提示 刷新pdf
          }
        }).catch(() => {
          _this.insertBack({ loading: false }) // btnLoading
        })
      }, 2000)
    },
    /*
     *  ==================================签章合章 End=====================================================
   * */
    setClearInterva() {
      if (this.setIntervalInChapter) {
        clearInterval(this.setIntervalInChapter)
        this.setIntervalInChapter = ''
      }
      if (this.setIntervalLoginInfo) {
        clearInterval(this.setIntervalLoginInfo)
        this.setIntervalLoginInfo = ''
      }
      if (this.setIntervalQRCode) {
        clearInterval(this.setIntervalQRCode)
        this.setIntervalQRCode = ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .body {
    margin: 0;
    padding: 0;
    min-width: 800px;
  }

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

  .stampInfo {
    width: 20%;
    float: right;
    // line-height: 600px;
    height: 100%;
    p{
      padding: 10px 10px;
    }
  }
  /*签章列表*/
  .signatureList {
    overflow: auto;
    li {
      img {
        cursor: pointer;
        transform: scale(0.95, 0.95);
      }
    }
    /*选取签章索引样式*/
    .signatureActive {
      border: 1px solid red;
      img {
        transform: scale(1, 1);
      }
    }
  }
</style>
