// pages/promisesign/promisesign.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isDrawed: false,
  },

  //决定是否绘制的最小像素距离
  TOUCH_TOLERANCE: 4,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.init()
  },

  init: function () {
    wx.createSelectorQuery().in(this)
      .select('.sign-canvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        //Canvas 对象
        const canvas = res[0].node
        //渲染上下文
        const ctx = canvas.getContext('2d')

        //Canvas画布的实际绘制高度
        this.width = res[0].width
        this.height = res[0].height

        //初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = this.width * dpr
        canvas.height = this.height * dpr
        ctx.scale(dpr, dpr)

        this.canvas = canvas
        this.ctx = ctx
      })
  },
  touchStart(e) {
    if (this.canvas && e.touches.length > 0) {
      var t = e.touches[0];
      this.ctx.moveTo(t.x, t.y)
      this.tempX = t.x
      this.tempY = t.y
    }
  },
  touchMove(e) {
    if (this.canvas && e.touches.length > 0) {
      var t = e.touches[0];
      var dx = Math.abs(t.x - this.tempX)
      var dy = Math.abs(t.y - this.tempY)
      if (dx >= this.TOUCH_TOLERANCE || dy >= this.TOUCH_TOLERANCE) {
        this.ctx.lineTo(t.x, t.y)
        this.ctx.stroke()
        this.tempX = t.x
        this.tempY = t.y
      }
    }
  },
  touchEnd(e) {
    if (this.canvas && e.touches.length > 0) {
      var t = e.touches[0];
      this.ctx.lineTo(t.x, t.y)
      this.ctx.stroke()
    }
    this.setData({
      isDrawed: true
    })
  },

  onCancel() {
    wx.navigateBack({
      success: (res) => {},
      fail: (res) => {},
      complete: (res) => {},
    })
  },
  onSubmit() {
    if (!this.data.isDrawed) {
      wx.showToast({
        title: '请先在签名区域签名',
        duration: 2000,
        icon: 'none',
        mask: true,
      })
      return
    }
    wx.showLoading({
      title: '签名图片处理中',
      mask: true,
      success: (res) => {},
      fail: (res) => {},
      complete: (res) => {},
    })
    setTimeout(() => {
      wx.hideLoading()
    }, 10000);
    var that = this
    this.rotate(function (rotateCanvas){
      wx.canvasToTempFilePath({
        canvas: rotateCanvas,
        success(res) {
          let imgPath = res.tempFilePath
          wx.setStorage({
            data: imgPath,
            key: 'signPath',
            success(){
              console.log('sign-success:' + imgPath);
              wx.hideLoading({
                success: (res) => {
                  wx.showToast({
                    title: '签名生成成功',
                    duration: 1500,
                    icon: 'success',
                  })
                  that.getOpenerEventChannel().emit('onSignSuccess', imgPath)
                  wx.navigateBack()
                },
              })
            }
          })
        },
        fail(err) {
          console.log(err)
          wx.hideLoading({
            success: (res) => {
              wx.showToast({
                title: '签名图片导出异常，请重试',
                duration: 1500,
                icon: 'error',
              })
            },
          })
        },
      })
    })
  },
  //旋转图片，生成新canvas实例
  rotate(cb) {
    const that = this;
    wx.createSelectorQuery().select('#handWriting2')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const rotateCanvas = res[0].node;
        const rotateCtx = rotateCanvas.getContext('2d');
        //this.ctxW-->所绘制canvas的width
        //this.ctxH -->所绘制canvas的height
        rotateCanvas.width = that.canvas.height;
        rotateCanvas.height = that.canvas.width;
        wx.canvasToTempFilePath({
          canvas: that.canvas,
          success(res) {
            that.tempFilePath = res.tempFilePath;
            const img = rotateCanvas.createImage();
            img.src = res.tempFilePath;
            img.onload = function () {
              rotateCtx.translate(rotateCanvas.width / 2, rotateCanvas.height / 2);
              rotateCtx.rotate(270 * Math.PI / 180);
              rotateCtx.drawImage(img, -rotateCanvas.height / 2, -rotateCanvas.width / 2);
              // rotateCtx.scale(that.pixelRatio, that.pixelRatio);
              cb(rotateCanvas);
            };
          },
          fail(err) {
            console.log(err)
            wx.hideLoading({
              success: (res) => {
                wx.showToast({
                  title: '签名图片处理异常，请重试',
                  duration: 1500,
                  icon: 'error',
                })
              },
            })
          }
        })
      })
  }
})