<template>
  <div class="custom-stamp-wrap" :id="'stamp_'+formTemplateDocid" @mousedown.stop.prevent="move">
    <img :src="'/obpm/uploads/signs/' + signData.img" />
    <div class="btn-wrap">
      <span @click="confirmSignature">纭� 瀹�</span>
      <span @click="cancel(false)">鍙� 娑�</span>
    </div>
  </div>
</template>
<script>
  
export default {
  name: "form-stamp",
  props: [
    "openParams",
    "signData",
    "formTemplateDocid"
  ],

  mounted(){

  },

  data: function() {
    return {
      positionX:0,
      positionY:0,
    }
  },

  methods: {
    confirmSignature(){
      let signData = this.signData
      let x = this.positionX
      let y = this.positionY
      x = x < 5 ? 5 : x
      y = y < 65 ? 65 : y
      let obj = {
        left: x,
        top: y,
        img: "/uploads/signs/" + signData.img,
        userId: this.$store.state.userId,
        id: ''//signData.id,
      }
      this.$emit("event", obj)
    },
    cancel(val) {
      this.$emit("update:visible", val)
    },

    move(e){
      let id = "stamp_" + this.formTemplateDocid
      let odiv = document.getElementById(id) //e.target;  //鑾峰彇鐩爣鍏冪礌
      //绠楀嚭榧犳爣鐩稿鍏冪礌鐨勪綅缃�
      let disX = e.clientX - odiv.offsetLeft
      let disY = e.clientY - odiv.offsetTop
      document.onmousemove = (e)=>{       //榧犳爣鎸変笅骞剁Щ鍔ㄧ殑浜嬩欢
        //鐢ㄩ紶鏍囩殑浣嶇疆鍑忓幓榧犳爣鐩稿鍏冪礌鐨勪綅缃紝寰楀埌鍏冪礌鐨勪綅缃�
        let left = e.clientX - disX
        let top = e.clientY - disY
        
        //缁戝畾鍏冪礌浣嶇疆鍒皃ositionX鍜宲ositionY涓婇潰
        this.positionX = left
        this.positionY = top
        
        //绉诲姩褰撳墠鍏冪礌
        odiv.style.left = left + 'px';
        odiv.style.top = top + 'px';
      };
      document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
      };
    },
  }
}

</script>