<template>
  <div class="electronic-signature-wrapper">
    <Button size="small" type="primary" ghost @click="getSign('usb')">u-key</Button>&nbsp;&nbsp;
    <Button size="small" type="primary" ghost @click="getSign('writingPad')">手写板</Button>
    <div class="img-wrapper">
      <img :src="imgData" alt="">
    </div>
  </div>
</template>

<script>
import { getValueListString } from '../utils'
import { positionSignSync, OnceStartSign } from '../BJCAWebsign'

export default {
  props: {
    bill: {},
  },
  data() {
    return {
      imgData: null,
      operateTime: null,
      valueString: null,
      signatureValue: null,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.imgData = null
      this.operateTime = null
      this.valueString = null
    },
    getSign(type) {
      try {
        this.operateTime = Date.now()
        this.valueString = getValueListString(this.bill)
        const signData = type === 'writingPad' ? OnceStartSign() : null
        const {
          imgData,
          signatureData: signatureValue,
        } = positionSignSync(this.operateTime, this.valueString, signData)
        this.signatureValue = signatureValue
        this.imgData = 'data:image/gif;base64,' + imgData
        this.$emit('on-sign', { signatureValue: this.signatureValue, operateTime: this.operateTime, imgData })
      } catch (error) {
        this.$Message.error(error.message)
        console.error(error)
      }
    }
  }
}
</script>

<style lang="less">
.electronic-signature-wrapper {
  .img-wrapper {
    width: 250px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
    }
  }
}
</style>