<template>
  <div style="border: 1px solid #cccccc">
    <div v-if="resultImg == ''">
      <vue-esign ref="esign" :width="width" :height="height" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
      <div style="text-align: right">
        <button @click="handleReset" style="margin-right: 2px">清空</button>
        <button @click="handleGenerate">确定</button>
      </div>
    </div>
    <div>
      <img v-if="resultImg" :src="resultImg" alt="" />
    </div>
  </div>
</template>

<script>
  import vueEsign from 'vue-esign'
  export default {
    name: "esign",
    components:{
      vueEsign
    },
    props:{
      width:{
        type:Number
      },
      height:{
        type:Number
      },
      resultImg:{
        type:String,
        default:""
      }
    },
    data () {
      return {
        lineWidth: 3,
        lineColor: '#000000',
        bgColor: '',
        isCrop: false,
      }
    },
    methods: {
      handleReset () {
        this.$refs['esign'].reset() //清空画布
      },
      handleGenerate () {
        this.$refs['esign'].generate().then(res => {
            this.$emit('update:resultImg',res);
            this.$emit('aaa');
            //this.resultImg = res // 得到了签字生成的base64图片
        }).catch(err => { //  没有签名，点击生成图片时调用
            this.$message({
              message: err + ' 未签名！',
              type: 'warning'
            })
        })
      }
    }
  }
</script>

<style scoped>

</style>