// pages/sign/sign.js

// 使用 wx.createContext 获取绘图上下文 context
var context = null;
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
// 获取系统信息
wx.getSystemInfo({
  success: function (res) {
    canvasw = res.windowWidth; // 设备宽度
    canvash = res.windowWidth*7/15;
  }
});

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const SelectorQuery = wx.createSelectorQuery()
    const canvasElement = SelectorQuery.select('#canvas')
    console.log(canvasElement.context(res => {
      context = res.context
    }))
    SelectorQuery.exec((res) => {
      console.log(res, 'xixixixixixi')
    })
    // context = canvasElement.getContext('2d')
    // context.beginPath()
    // context.setStrokeStyle('#000000')
    // context.setLineWidth(4)
    // context.setLineCap('round')
    // context.setLineJoin('round')
  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /**
   * 
   */
  canvasIdErrorCallback: function(e) {
    console.log(e.detail.errMsg)
  },
  canvasStart: function(event) {
    isButtonDown = true;
    arrz.push(0);
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
  },
  canvasMove: function(event) {
    if (isButtonDown) {
      arrz.push(1)
      arrx.push(event.changedTouches[0].x);
      arry.push(event.changedTouches[0].y);
    }
    for (let i = 0; i < arrx.length; i++) {
      if (arrz[i] == 0) {
        context.moveTo(arrx[i], arry[i])
      } else {
        context.lineTo(arrx[i],arry[i])
      }
    }
    context.clearRect(0, 0, canvasw, canvash);
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();

    context.draw(false);
  },
  canvasEnd: function(event) {
    isButtonDown = false
  },
  cleardraw: function() {
    // 清除画布
    arrx = []
    arry = []
    arrz = []
    context.clearRect(0, 0, canvasw, canvash)
    context.draw(true)
  },
  getimg: function() {
    if (arrx.length == 0) {
      wx.showModal({
        title: '提示',
        content: '签名内容不能为空!',
        showCancel: false
      });
      return false;
    }
    // 生成图片
    // wx.canvasToTempFilePath({
    //   canvasId: 'canvas',
    //   success: function(res) {
    //     console.log(res.tempFilePath)
    //   }
    // })
  }
})