<style scoped>
  .SignName .CanvasDiv {
    width: 100%;
    height: calc(100% - 8rem);
    padding-top: 20px;
  }

  .SignName .CanvasDiv #canvas {
    width: 100%;
    height: 100%;
  }

  .SignName .dash {
    padding: 10px;
    box-sizing: border-box;
    border: 1px dashed #ccc;
    width: 95%;
    height: 98%;
    margin: 0 auto;
    overflow: hidden;
  }

  .SignName .bg {
    display: inline-block;
    width: 25px;
    height: 25px;
  }

  .SignName .bg1 {
    background-image: url('../assets/img/dzht/bg1.png');
    background-size: 132px;
    background-position: -1px -2px;
  }

  .SignName .bg2 {
    background-image: url('../assets/img/dzht/bg1.png');
    background-size: 132px;
    background-position: 28px -2px;
  }

  .SignName .bottom .el-col>div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .SignName .signTc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    text-align: center;
  }

  .SignName .signTc .closeTc {
    position: relative;
    display: inline-block;
    width: 60%;
    height: 70px;
    line-height: 70px;
    color: #fff;
    border: 1px solid #fff;
    margin: 0 auto;
    top: 50%;
    font-size: 2rem;
  }

</style>

<template>
  <div class="SignName">
    <div class="CliSignDiv" style="height:100%;z-index:100;background:#fff;">
      <div class="CanvasDiv">
        <div class="dash">
          <div id="canvas" style="position:relative;top:0;">
          </div>
        </div>
      </div>
      <div class="bottom" style="text-align:center;height:80px;line-height:80px">
        <el-row>
          <el-col :span="12">
            <div style="width:100%;" @click="handelClearEl()">
              <span style="font-size:3rem;color:rgb(36, 173, 229)" class="iconfont icon-zhongzhi1"></span>
              <span style="font-size:2rem">重置签名</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div style="width:100%;" @click="handelSaveEl()">
              <span style="font-size:3rem;color:rgb(36, 173, 229)" class="iconfont icon-wancheng1"></span>
              <span style="font-size:2rem">完成签名</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
  import tripBusOrderVue from './busManagement/tripBusOrder.vue';
  let canvas = document.createElement("canvas");
  let cxt = canvas.getContext("2d");
  export default {
    data() {
      return {
        linewidth: 5, //线条粗细，选填
        color: "black", //线条颜色，选填
        background: "#fff", //线条背景，选填
        isSignature: false, //判断是否签名
        SignInfo: "", //绘制的签名信息
        msg: {
          Id: 0, //出境合同主键编号
          TCID: 0, //团期编号
          orderID: 0, //订单编号
          guestId: 0, //旅客编号
          ProtocolId: 0, //保密协议编号
          TypeStr: "", //跳转页面地址
        },
      }
    },
    created() {

    },
    mounted() {
      if (this.$route.query && this.$route.query.TCID) {
        this.msg.TCID = this.$route.query.TCID;
      }
      if (this.$route.query && this.$route.query.orderID) {
        this.msg.orderID = this.$route.query.orderID;
      }
      if (this.$route.query && this.$route.query.guestId) {
        this.msg.guestId = this.$route.query.guestId;
      }
      if (this.$route.query && this.$route.query.ProtocolId) {
        this.msg.ProtocolId = this.$route.query.ProtocolId;
      }
      if (this.$route.query && this.$route.query.Id) {
        this.msg.Id = this.$route.query.Id;
      }
      if (this.$route.query && this.$route.query.TypeStr) {
        this.msg.TypeStr = this.$route.query.TypeStr;
      }
      this.getCanvas();
      document.getElementsByTagName('body')[0].style = "overscroll-behavior-y: contain;"
    },
    beforeDestroy() {
      document.getElementsByTagName('body')[0].style = ""
    },
    methods: {
      getCanvas() {
        var that = this;
        let el = document.getElementById("canvas");
        el.appendChild(canvas);
        canvas.width = el.clientWidth;
        canvas.height = el.clientHeight;
        cxt.fillStyle = this.background; //填充绘图的背景颜色
        cxt.fillRect(0, 0, canvas.width, canvas.height); //绘制“已填色”的矩形
        cxt.strokeStyle = this.color; //笔触的颜色
        cxt.lineCap = "round"; //线条末端线帽的样式
        let linewidth = this.linewidth;
        //开始绘制
        canvas.addEventListener(
          "touchstart",
          function (e) {
            cxt.beginPath();
            cxt.lineWidth = linewidth; //当前线条的宽度，以像素计
            cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
          }.bind(this),
          false
        );
        //绘制中
        canvas.addEventListener(
          "touchmove",
          function (e) {
            cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
            cxt.stroke();
            that.isSignature = true;
          }.bind(this),
          false
        );
        //结束绘制
        canvas.addEventListener(
          "touchend",
          function () {
            cxt.closePath();
          }.bind(this),
          false
        );
        //开始绘制
        canvas.addEventListener(
          "mousedown",
          function (e) {
            this.isMouseDown = tripBusOrderVue
            cxt.beginPath();
            cxt.lineWidth = linewidth; //当前线条的宽度，以像素计
            cxt.moveTo(e.pageX - 20, e.pageY - 20);
          }.bind(this),
          false
        );
        //绘制中
        canvas.addEventListener(
          "mousemove",
          function (e) {
            if (this.isMouseDown) {
              cxt.lineTo(e.pageX - 20, e.pageY - 20);
              cxt.stroke();
              that.isSignature = true;
            }
          }.bind(this),
          false
        );
        //结束绘制
        canvas.addEventListener(
          "mouseup",
          function () {
            this.isMouseDown = false
            cxt.closePath();
          }.bind(this),
          false
        );
      },
      handelClearEl() {
        cxt.clearRect(0, 0, canvas.width, canvas.height);
        this.isSignature = false;
      },
      handelSaveEl() {
        var imageData = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < imageData.data.length; i += 4) {
          // 当该像素是白色的，则设置成透明
          if (imageData.data[i] == 255) {
            imageData.data[i] = 0;
            imageData.data[i + 1] = 0;
            imageData.data[i + 2] = 0;
            imageData.data[i + 3] = 0;
          }
        }
        canvas.getContext("2d").putImageData(imageData, 0, 0);
        let imgBase64 = canvas.toDataURL();
        this.SignInfo = imgBase64;
        this.SaveMsg();
      },
      //提交数据
      SaveMsg() {
        if (!this.isSignature) {
          this.Error("请绘制签名信息");
          return;
        }
        //出境合同
        if (this.msg.TypeStr == 'clientConfirm') {
          var postMsg = {
            Id: this.msg.Id,
            companySignature: this.SignInfo
          }
          this.apipost("travelcontract_post_UpdateCompanySignatureService", postMsg, res => {
            if (res.data.resultCode === 1) {
              this.Success(res.data.message);
              var path = "clientConfirm";
              this.$router.push({
                name: path,
                query: {
                  TCID: this.msg.TCID,
                  orderID: this.msg.orderID,
                  guestId: this.msg.guestId,
                  str:"",//不弹窗
                }
              })
            } else {
              this.Error(res.data.message);
            }
          }, null);
        }
        //保密协议
        else if (this.msg.TypeStr == 'clientProtocol') {
          var clientProtocolMsg = {
            ProtocolId: this.msg.ProtocolId,
            GuestSignature: this.SignInfo
          }
          this.apipost("travelcontract_post_UpdateGuestSignature", clientProtocolMsg, res => {
            if (res.data.resultCode === 1) {
              this.Success(res.data.message);
              this.$router.push({
                name: 'clientProtocol',
                query: {
                  TCID: this.msg.TCID,
                  OrderId: this.msg.orderID,
                  GuestId: this.msg.guestId,
                  ProtocolId:this.msg.ProtocolId,
                }
              })
            } else {
              this.Error(res.data.message);
            }
          }, null);
        }
      },
    }
  }
</script>