<template>
    <div class="signatureBox">
      <div class="visaDetailTop">
        <!-- <p>
          <button class="btnBack" @click="backHome"></button>
          <img src="static/imagesWbe/leftIcon.png" style="height: 1.2em;margin-top: 0.2em;" @click="backHome"/>
        </p> -->
        <p>
          <img src="static/imagesWbe/daohanga.png" style="height: 1.2em;margin-top: 0.2em;"/>
          <img src="static/imagesWbe/shareB.png" style="height: 1.2em;margin-top: 0.2em;margin-left: 0.2em;"/>
        </p>
        <p class="visaTitle">电子签名</p>
      </div>
      <div class="canvasBox" ref="canvasHW">
        <canvas @touchstart='touchStart'
                @touchmove='touchMove'
                @touchend='touchEnd'
                ref="canvasF"
                @mousedown="mouseDown"
                @mousemove="mouseMove"
                @mouseup="mouseUp" id="canvas"></canvas>
        <div class="btnBox">
          <button @click="overwrite">重写</button>
          <button @click="saveSigna">提交签名</button>
        </div>
      </div>
    </div>
</template>

<script>
    let param = GetRequest()
    function GetRequest() {   
        var url = location.href;
        let newUrl = url.substring(url.indexOf("=")+1);
        return newUrl;   
    }
    export default {
        name: "signature",
      data(){
        return{
            ID:parseInt(param),
            points:[],
            canvasTxt:null,
            startX:0,
            startY:0,
            moveY:0,
            moveX:0,
            endY:0,
            endX:0,
            w:null,
            h:null,
            isDown:false,
        }
      },
      mounted(){
        let canvas=this.$refs.canvasF;
        canvas.height = this.$refs.canvasHW.offsetHeight/2;
        canvas.width =this.$refs.canvasHW.offsetWidth-10;
        this.canvasTxt=canvas.getContext("2d");
      },
      methods:{
        saveSigna(){
            let cav = document.getElementById('canvas')
            var imgUrl = cav.toDataURL();
            console.log(imgUrl)
        },
        backHome(){
          window.history.back();
        },
        //电脑设备事件
        mouseDown(ev){
          ev = ev || event;
          ev.preventDefault();
          console.log(ev);
          if(1){
            let obj={
              x:ev.offsetX,
              y:ev.offsetY
            };
            console.log(obj);
            this.startX=obj.x;
            this.startY=obj.y;
            this.canvasTxt.beginPath();
            this.canvasTxt.moveTo(this.startX, this.startY);
            this.canvasTxt.lineTo(obj.x, obj.y);
            this.canvasTxt.stroke();
            this.canvasTxt.closePath();
            this.points.push(obj);
            this.isDown=true;
          }
        },
        //移动设备事件
        touchStart(ev){
          ev = ev || event;
          ev.preventDefault();
          if(ev.touches.length == 1) {
            let obj={
              x:ev.targetTouches[0].clientX,
              y:ev.targetTouches[0].clientY-48
            };
            this.startX=obj.x;
            this.startY=obj.y;
            this.canvasTxt.beginPath();
            this.canvasTxt.moveTo(this.startX, this.startY);
            this.canvasTxt.lineTo(obj.x, obj.y);
            this.canvasTxt.stroke();
            this.canvasTxt.closePath();
            this.points.push(obj);
          }
        },
        //电脑设备事件
        mouseMove(ev){
          ev = ev || event;
          ev.preventDefault();
          if(this.isDown){
            let obj={
              x:ev.offsetX,
              y:ev.offsetY
            };
            this.moveY=obj.y;
            this.moveX=obj.x;
            this.canvasTxt.beginPath();
            this.canvasTxt.moveTo(this.startX, this.startY);
            this.canvasTxt.lineTo(obj.x, obj.y);
            this.canvasTxt.stroke();
            this.canvasTxt.closePath();
            this.startY=obj.y;
            this.startX=obj.x;
            this.points.push(obj);
          }
        },
        //移动设备事件
        touchMove(ev){
          ev = ev || event;
          ev.preventDefault();
          if(ev.touches.length == 1) {
            let obj={
              x:ev.targetTouches[0].clientX,
              y:ev.targetTouches[0].clientY-48
            };
            this.moveY=obj.y;
            this.moveX=obj.x;
            this.canvasTxt.beginPath();
            this.canvasTxt.moveTo(this.startX, this.startY);
            this.canvasTxt.lineTo(obj.x, obj.y);
            this.canvasTxt.stroke();
            this.canvasTxt.closePath();
            this.startY=obj.y;
            this.startX=obj.x;
            this.points.push(obj);
          }
        },
        //电脑设备事件
        mouseUp(ev){
          ev = ev || event;
          ev.preventDefault();
          if(1){
            let obj={
              x:ev.offsetX,
              y:ev.offsetY
            };
            this.canvasTxt.beginPath();
            this.canvasTxt.moveTo(this.startX, this.startY);
            this.canvasTxt.lineTo(obj.x, obj.y);
            this.canvasTxt.stroke();
            this.canvasTxt.closePath();
            this.points.push(obj);
            this.points.push({x:-1,y:-1});
            this.isDown=false;
          }
        },
        //移动设备事件
        touchEnd(ev){
          ev = ev || event;
          ev.preventDefault();
          console.log(ev);
          if(ev.touches.length == 1) {
            let obj={
              x:ev.targetTouches[0].clientX,
              y:ev.targetTouches[0].clientY-48
            };
            this.canvasTxt.beginPath();
            this.canvasTxt.moveTo(this.startX, this.startY);
            this.canvasTxt.lineTo(obj.x, obj.y);
            this.canvasTxt.stroke();
            this.canvasTxt.closePath();
            this.points.push(obj);
            this.points.push({x:-1,y:-1});
          }
        },
        //重写
        overwrite(){
          this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height);
          this.points=[];
        }
      }
    }
</script>

<style scoped>
  .signatureBox{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    z-index: 100;
    display: flex;
    flex-direction: column;
  }
  .visaDetailTop{
    /*position: absolute;*/
    /*top: 0px;*/
    /*left: 0px;*/
    width: 100%;
    /*overflow: hidden;*/
    padding: 5px;
    box-sizing: border-box;
    z-index: 2;
    border-bottom: 1px solid #e5e5e5;
  }
  .visaDetailTop p{
    margin: 0px;
    text-align: center;
    color: #000;
    font-size: 1em;
    position: relative;
  }
  p.visaTitle{
    width: 100%;
    position: absolute;
    top: 5px;
    left: 0px;
    text-align: center;
    font-size: 1.2em;
  }
  .btnBack{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: transparent;
    border-color: transparent;
    outline: none;
  }
  .btnDaoHang{
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 2.2em;
    width: 2em;
    z-index: 1;
    background: transparent;
    border-color: transparent;
    outline: none;
  }
  .visaDetailTop p span{
    color: #fff;
    font-size: 1.2em;
  }
  .visaDetailTop p:first-of-type{
    float: left;
  }
  .visaDetailTop p:nth-of-type(2){
    float: right;
  }
  .canvasBox{
    padding: 10px 5px;
    box-sizing: border-box;
    flex: 1;
  }
  canvas{
    border: 1px solid #71b900;
  }
  .btnBox{
    font-size: 1rem;
    height: 30px;
    padding: 5px;
    text-align: center;
    line-height: 30px;
  }
  .btnBox button:first-of-type{
    border: 1px solid #71b900;
    background: transparent;
    border-radius: 4px;
    padding: 5px 10px;
  }
  .btnBox button:last-of-type{
    border: 1px solid #71b900;
    background: #71b900;
    color: #fff;
    border-radius: 4px;
    padding: 5px 10px;
  }
  @media only screen and (min-width: 750px){
    .signatureBox{
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      min-height: 100%;
      box-sizing: border-box;
      overflow: visible;
    }
  }
</style>