/**
* @Author Sean
* @Date 2019/5/13
*/
<template>
  <transition name="slide-fade">
    <div ref="signModal" class="sign-modal" @click="hideModal">
      <div class="pane" @click.stop>
        <div class="layout">
          <div id="data" @click="confirmData()">确定</div>
          <div id="clear" @click="cleanData()">清除</div>
        </div>
        <div id="draw" class="draw">
          <div id="sig" class="sig">
            <canvas id="canvas"/>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>

export default {
  props: {
    info: Object,
  },
  data () {
    return {
      signaturePad: {},
      image_base64: '',
    }
  },
  created: function () {
    // console.log(this.timeInfo)
  },
  mounted: function () {
    this.changeSize()
  },
  activated: function () {
  },
  deactivated: function () {
  },
  methods: {
    hideModal () {
      this.$emit('closeModal')
    },
    cleanData () {
      let vm = this
      vm.signaturePad.clear()
    },
    // 确认签名
    confirmData () {
      let vm = this
      if (vm.signaturePad.isEmpty()) {
        hlsPopup.showLongCenter('未创建签名!')
      } else {
        vm.hideModal()
        var canvas = document.getElementById('canvas')
        var canvasData = canvas.toDataURL('image/png')
        vm.image_base64 = canvasData.split(',')[1]
        hlsPopup.showLoading('正在签名请稍等!')
        // 先创建账号
        var url = process.env.rootPath + '/app/sign/register'
        var param = {
          'idNo': vm.info.id_number,
          'name': vm.info.name,
        }
        vm.$post(url, param).then(function (res) {
          if (!res.success) {
            // 如果成功进行签名
            // success_atm = []
            var file_name = '测试e签宝' + '-盖章.pdf'
            vm.getSignPdf(vm.info.name, vm.info.id_number, vm.image_base64, '', '', '', file_name, '', 'BOTH')
          } else {
            hlsPopup.hideLoading()
            hlsPopup.showPopup('', '签名失败请返回重试', function () {
              // window.history.go(-1)
            })
          }
        })
      }
    },
    getSignPdf (name, id_no, imgData, table_name, table_pk_value, attachment_id, file_name, user_id, sign_type) {
      let vm = this
      // debugger;
      // 只签名客户"userPages":[{"page": "1", "x":505, "y":340},{"page": "2", "x":115, "y":410}]
      // 签名客户和公司"userPages":[{"page": "1", "x":510, "y":245},{"page": "4", "x":460, "y":135}],
      //             "selfPages":[{"page": "1", "x":200, "y":235},{"page": "4", "x":100, "y":135}],
      var userPages = []
      var selfPages = []
      if (sign_type === 'BOTH') {
        /* userPages = [{"page": "1", "x": 500, "y": 235}, {"page": "4", "x": 460, "y": 135}];
        selfPages = [{"page": "1", "x": 200, "y": 235}, {"page": "4", "x": 100, "y": 135}]; */
        // uat
        // userPages=[{"page": "1", "x": 510, "y": 245}, {"page": "4", "x": 445, "y": 135}];
        // selfPages=[{"page": "1", "x": 200, "y": 245}, {"page": "4", "x": 120, "y": 135}];
        userPages = [{'page': '1', 'x': 510, 'y': 250}, {'page': '4', 'x': 445, 'y': 165}]
        selfPages = [{'page': '1', 'x': 200, 'y': 250}, {'page': '4', 'x': 120, 'y': 165}]
      } else {
        userPages = [{'page': '1', 'x': 505, 'y': 205}, {'page': '2', 'x': 105, 'y': 230}]
      }
      var url = process.env.rootPath + '/app/sign/pdf'
      var param = {
        'idNo': id_no,
        'name': name,
        'userPages': userPages,
        'selfPages': selfPages,
        'attachmentInfo': {
          'downloadApiName': 'attment_view',
          'downloadSysName': 'HLS_APP',
          'attachmentId': 6,
          'uploadApiName': 'attachment_upload',
          'uploadSysName': 'HLS_APP',
          'userId': 1,
          'sourceType': 'HLS_DOC_FILE_TEMPLET',
          'pkValue': 42,
          'fileName': file_name,
        },
        'personArea': 0,
        'sealData': imgData,
      }
      vm.$post(url, param).then(function (res) {
        hlsPopup.hideLoading()
        if (res.success) {
          hlsPopup.showConfirm({
            title: '签名成功',
            content: '是否预览合同',
            onConfirm: function (index) {
              if (index === 1) {
                // 签名合同预览
                vm.PDF(parseInt(res.message))
              }
            },
          })
        } else {
          hlsPopup.hideLoading()
          hlsPopup.showLongCenter('签名失败请重试')
        /*  hlsPopup.showPopup('', '签名失败请返回重试', function () {
            // 调用删除
            // window.history.go(-1)
          }) */
        }
      })
    },

    changeSize () {
      let vm = this
      if (window.innerHeight > window.innerWidth) {
        $('#canvas').attr({'height': ((window.innerHeight / 2) - 100), 'width': window.innerWidth})
      } else {
        $('#canvas').attr({'height': (window.innerHeight - 100), 'width': window.innerWidth})
        $('html,body').animate({scrollTop: 0}, 'slow')
      }
      var canvasX = $('#canvas')[0]
      vm.signaturePad = new SignaturePad(canvasX, {
        dotSize: 0,
        velocityFilterWeight: 1,
        minWidth: 2.0,
        maxWidth: 5.2,
        penColor: '#FF0000',
        backgroundColor: 'rgba(0,0,0,0)',
      })
    },
    // pdf转图片预览
    PDF (attachment_id) {
      let vm = this
      hlsPopup.showLoading('正在预览请稍等!')
      var url = process.env.rootPath + '/app/pdf/png?sysName=HLS_APP&apiName=attment_view&attachment_id=' + attachment_id
      var param = {}
      vm.$post(url, param).then(function (res) {
        if (res.success) {
          var length = res.message
          // PDF装图片数组
          var pirtureList = []
          for (var i = 0; i < length; i++) {
            pirtureList.push({pic: process.env.file_url + 'esign/' + attachment_id + '/temp/' + 'temp_' + (i + 1) + '.png'})
          }
          hlsPopup.hideLoading()
          vm.alpviewimg(pirtureList)
        } else {
          hlsPopup.hideLoading()
          hlsPopup.showLongCenter('预览文件失败')
        }
      })
    },
    alpviewimg (pirtureList) {
      this.$router.push({
        name: 'EsignPicture',
        params: {
          pirtureList: pirtureList,
        },
      })
    },
  },
}
</script>

<style scoped lang="less" rel="stylesheet">
  /* //name="modal-fade"
   .modal-fade-enter, .modal-fade-leave-active { opacity: 0; } .modal-fade-enter-active, .modal-fade-leave-active { transition: opacity .5s ease }*/
  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */

  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }

  /*//bounce
  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }*/
  .sign-modal{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: fixed;
    z-index: 100;
    bottom: 0;
    .pane{
      background-color: #fff;
      position: absolute;
      width: 100%;
      height: 50%;
      bottom: 0;
      padding: 10px 15px;
      .layout{
        height: 20px;
        font-size: 16px;
        color:#1e82d2;
        line-height: 20px;
        display: flex;
        display: -webkit-flex;
        justify-content:space-between;
        -webkit-justify-content:space-between;
      }
      .draw {
        width: 100%;
        height: 95%;
        .sig{
          width: 100%;
          height: 100%;
          canvas{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

</style>
