const app = getApp();
const {
  util
} = app;
// 获取显示区域长宽
const device = wx.getSystemInfoSync()
// 中间操作区的宽高
const W = device.windowWidth;
const H = device.windowHeight - 40;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 当前操作的文本
    selectTxtIndex: -1,
    canvasW: W,
    canvasH: H,
    showHandwriting: true,
    addArrow: false,
    //画笔颜色
    color: ['#ff1d12', '#000000', '#ffffff', '#199bff', '#fbf606', '#15e214'],
    //画笔颜色默认值0
    currentColor: 0,
    //画笔大小默认值
    penWidth: 4,
    //画笔形状默认值 line arrow
    penStyle: 'line',
    pen: true,
    // 以经保存的绘画数据
    operateArray: [],
    // 临时的绘画数据
    interimArray: [],
    moveStartX: 0, //保存X坐标轴变量
    moveStartY: 0, //保存Y坐标轴变量
    startX: 0, //保存X坐标轴变量
    startY: 0, //保存Y坐标轴变量
    txtFinish: true,
    currentItem: 0,
    tempAction: 'save'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    let tempWork = wx.getStorageSync('tempWork');
    this.setData({
      markImg: tempWork.images
    })
    this.cxtImg = wx.createCanvasContext('baseImg', that);
    this.context = wx.createCanvasContext('handwriting', that);
    that.setData({
      W: W,
      H: H
    })
    let url = tempWork.images[0];
    this._loadIMG(url);
  },
  // 切换图片
  loadImg(e) {
    let type = e.currentTarget.dataset.type, index = this.data.currentItem, interimArray = this.data.interimArray;
    this.setData({
      tempAction: 'next',
      actionType: type,
      addTxt: false,
      txtFinish: true,
    })
    this.tempSave();
  },
  tempSave() {
    if (this.data.interimArray.length > 0) {
      this._saveCanvas(1);
    } else {
      if (this.data.actionType == 'next') {
        let currentItem = this.data.currentItem + 1;
        if (currentItem == this.data.markImg.length) {
          wx.showToast({
            title: '已经最后一页了',
            icon: 'none'
          })
        } else {
          this.setData({
            currentItem: currentItem
          })
          this._loadIMG(this.data.markImg[currentItem])
        }
      } else {
        if (this.data.currentItem == 0) {
          wx.showToast({
            title: '已经第一页了',
            icon: 'none'
          })
        } else {
          this.setData({
            currentItem: this.data.currentItem - 1
          })
          this._loadIMG(this.data.markImg[this.data.currentItem])
        }
      }

    }
  },
  clearDraw(){
    this.context.draw();
    this.setData({
      interimArray:[],
      operateArray:[]
    })
  },
  saveWork() {
    this.setData({
      tempAction: 'save',
      txtFinish:false,
      showHandwriting: true
    })
    this._saveCanvas(1)    
  },

  //手指触摸动作开始
  touchStart: function (e) {
    //得到触摸点的坐标
    this.startX = e.changedTouches[0].x;
    this.startY = e.changedTouches[0].y;
    //判断是线条还是箭头
    if (this.data.penStyle == 'line') {
      // 涂鸦画布
      this.context.save();
      this.context.beginPath();
      this.context.setStrokeStyle(this.data.color[this.data.currentColor])
      this.context.setLineWidth(this.data.penWidth)
      this.context.setLineCap('round') // 让线条圆润
      this.context.setLineJoin('round')
      // 放大画布
      this.cxtImg.save();
      this.cxtImg.beginPath();
      this.cxtImg.setStrokeStyle(this.data.color[this.data.currentColor])
      this.cxtImg.setLineWidth(this.data.penWidth * 2)
      this.cxtImg.setLineCap('round') // 让线条圆润
      this.cxtImg.setLineJoin('round')
    }
  },
  //手指触摸后移动
  touchMove: function (e) {

    let startX1 = e.changedTouches[0].x
    let startY1 = e.changedTouches[0].y
    //判断是线条还是箭头
    if (this.data.penStyle == 'line') {
      // 涂鸦画布
      this.context.moveTo(this.startX, this.startY)
      this.context.lineTo(startX1, startY1)
      this.context.stroke()
      this.context.draw(true)
      // 放大画布
      this.cxtImg.moveTo(this.startX * 2, this.startY * 2)
      this.cxtImg.lineTo(startX1 * 2, startY1 * 2)
      this.cxtImg.stroke()
      this.cxtImg.draw(true)
      this.startX = startX1;
      this.startY = startY1;
    } else if (this.data.penStyle == 'arrow') {
      let interimArrayLength = this.data.interimArray.length;
      if (interimArrayLength > 0) {
        //涂鸦画布
        this.context.save();
        this.context.beginPath();
        this.context.drawImage(this.data.interimArray[interimArrayLength - 1].src, 0, 0, this.data.canvasW, this.data.canvasH);
        // 放大画布
        this.cxtImg.save();
        this.cxtImg.beginPath();
        this.cxtImg.drawImage(this.data.interimArray[interimArrayLength - 1].src, 0, 0, 2 * this.data.canvasW, 2 * this.data.canvasH);
      }
      //涂鸦画布
      drawArrow(this.context, this.startX, this.startY, startX1, startY1, 30, 15, 2, this.data.color[this.data.currentColor]);
      // 放大画布
      drawArrow(this.cxtImg, this.startX * 2, this.startY * 2, startX1 * 2, startY1 * 2, 30, 30, 4, this.data.color[this.data.currentColor]);
    }
  },
  touchEnd() {
    this._saveCanvas(0)
  },
  //背景图片加载函数
  _loadIMG(url) {

    let that = this;

    wx.getImageInfo({
      src: url,
      success(res) {
        wx.hideLoading()
        //计算画布的大小
        if (res.width >= res.height) {
          that.setData({
            operateArray: [],
            interimArray: [],
            imgSrc: res.path,
            canvasW: W,
            canvasH: W * res.height / res.width
          })
        } else {
          that.setData({
            operateArray: [],
            interimArray: [],
            imgSrc: res.path,
            canvasW: parseInt(res.width * (H - 40) / res.height),
            canvasH: H - 40
          })
        }
        //清空画布

        that.context.clearRect(0, 0, 2 * that.data.canvasW, 2 * that.data.canvasH)
        that.cxtImg.clearRect(0, 0, 2 * that.data.canvasW, 2 * that.data.canvasH)
      },
      fail(err) {
        wx.hideLoading()
        util.showModal('提示', '图片加载失败' + err.errMsg, false)
      }
    })
  },
  // 选取钢笔涂鸦
  _penSelect: function (e) {
    this.data.penStyle = 'line'
    this.setData({
      addArrow: false,
      showHandwriting: true,
      showInput: false,
      txtFinish: true,
      addTxt: false
    });
  },
  // 撤销上一步绘画路径
  _lastCanvas() {
    this._revoke(0)
  },
  // restoreLast 0 撤销上一次临时绘画路径 1 撤销上一次绘画保存的画布
  _revoke(restoreLast = 1) {
    if (restoreLast == 0) {
      //清空画布
      this.cxtImg.clearRect(0, 0, this.data.canvasW * 2, this.data.canvasH * 2);
      this.context.clearRect(0, 0, this.data.canvasW, this.data.canvasH);
      this.data.interimArray.pop();
      if (this.data.interimArray.length > 0) {
        //绘制涂鸦
        this.context.save();
        this.context.beginPath();
        this.context.drawImage(this.data.interimArray[this.data.interimArray.length - 1].src, 0, 0, this.data.canvasW, this.data.canvasH);
        this.context.draw()
        //绘制涂鸦
        this.cxtImg.save();
        this.cxtImg.beginPath();
        this.cxtImg.drawImage(this.data.interimArray[this.data.interimArray.length - 1].src, 0, 0, 2 * this.data.canvasW, 2 * this.data.canvasH);
        this.cxtImg.draw()
      } else {
        this.context.draw()
        this.cxtImg.draw()
      }
      this.setData({
        interimArray: this.data.interimArray
      })
    } else {
      this.data.operateArray.pop();
      this.setData({
        operateArray: this.data.operateArray,
        interimArray: []
      })
    }
  },
  // restoreLast 0保存一次临时绘画路径 1保存整个画布
  _saveCanvas(restoreLast = 1) {
    let that = this;
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      destWidth: that.data.canvasW * 2,
      destHeight: that.data.canvasH * 2,
      canvasId: 'baseImg',
      success: function (res) {
        console.log(res)
        let imgItem = {
          itemType: 'image',
          src: res.tempFilePath
        }
        if (restoreLast == 0) {
          that.data.interimArray.push(imgItem)
          that.setData({
            interimArray: that.data.interimArray,
          })
        } else {
          console.log(that.data.interimArray.map(res => res.itemType == 'itemType'))
          that.data.operateArray.push(imgItem)
          // 添加文字，临时绘制完整画布
          if (that.data.addTxt) {
            that.setData({
              operateArray: that.data.operateArray
            })
            that._saveImg();
          } else {
            that.setData({
              interimArray: [],
              operateArray: that.data.operateArray
            })
            //清空画布
            that.cxtImg.clearRect(0, 0, that.data.canvasW * 2, that.data.canvasH * 2);
            that.context.clearRect(0, 0, that.data.canvasW, that.data.canvasH);
            that._saveImg();
          }



        }
      }
    })
  },
  _saveImg() {
    let that = this;
    if (that.data.operateArray.length > 0 || that.data.interimArray.length > 0) {
      //清空画布
      that.cxtImg.clearRect(0, 0, 2 * that.data.canvasW, 2 * that.data.canvasH)
      if (!!that.data.imgSrc) {
        //绘制底图
        that.cxtImg.save();
        that.cxtImg.beginPath();
        that.cxtImg.drawImage(that.data.imgSrc, 0, 0, 2 * that.data.canvasW, 2 * that.data.canvasH);
      } else {
        that.cxtImg.save();
        that.cxtImg.beginPath();
        that.cxtImg.setFillStyle(that.data.bgColor);
        that.cxtImg.fillRect(0, 0, 2 * that.data.canvasW, 2 * that.data.canvasH)
      }
      let operateArrayLength = that.data.operateArray.length;
      for (let i = 0; i < operateArrayLength; i++) {
        if (that.data.operateArray[i].itemType == 'text') {
          //计算每一行的字数
          let start = 0;
          let lineCount = that.data.operateArray[i].lineCount;
          let stringNum = parseInt(that.data.operateArray[i].content.length / that.data.operateArray[i].lineCount);
          //绘制文字
          for (let j = 0; j < lineCount; j++) {
            that.cxtImg.save();
            that.cxtImg.beginPath();
            that.cxtImg.setFontSize(that.data.operateArray[i].style.fontSize * 2)
            that.cxtImg.setTextAlign('center')
            that.cxtImg.setTextBaseline('bottom')
            that.cxtImg.setFillStyle(that.data.operateArray[i].style.color)
            that.cxtImg.fillText(that.data.operateArray[i].content.substring(start, start + stringNum), that.data.operateArray[i].style.left * 2 + this.data.operateArray[i].style.width, that.data.operateArray[i].style.top * 2 + that.data.operateArray[i].style.lineHeight * 2 * (j + 1));
            that.cxtImg.setFontSize(that.data.operateArray[i].style.fontSize);
            that.cxtImg.setFillStyle(that.data.operateArray[i].style.color);
            that.cxtImg.setTextBaseline('middle');
            start += stringNum + 1;
          }
        } else if (that.data.operateArray[i].itemType == 'image') {
          //绘制涂鸦
          that.cxtImg.save();
          that.cxtImg.beginPath();
          that.cxtImg.drawImage(that.data.operateArray[i].src, 0, 0, 2 * that.data.canvasW, 2 * that.data.canvasH);
        }
      }
      that.cxtImg.draw(false, function (res) {
        console.log(res)
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          destWidth: that.data.canvasW * 2,
          destHeight: that.data.canvasH * 2,
          fileType: 'jpg',
          canvasId: 'baseImg',
          quality: 0.6,
          success: function (res) {
            let url = 'https://banji.w.broing.cn/api/common/upload2';
            // let url = 'http://banji.lfxstudy.club/api/common/upload2';
            let headers = {
              "token": wx.getStorageSync("token"),
              'content-type': 'multipart/form-data'
            };
            console.log(that.data.addTxt)
            if (that.data.addTxt) {
              that.setData({
                imgSrc: res.tempFilePath,
                txtFinish: false,
                showHandwriting: false
              })
            } else {
              wx.showLoading({
                title: '图片处理中...'
              })
              wx.uploadFile({
                url: url,
                header: headers,
                filePath: res.tempFilePath,
                name: 'file',
                formData: {
                  file: '',
                  filetype: 'image'
                },
                success: function (res) {
                  let data = JSON.parse(res.data), tempWork = wx.getStorageSync('tempWork');
                  // that.data.markImg[that.data.currentItem] = 'http://banjiqijiu.w.broing.cn' + data.msg;

                  that.data.markImg[that.data.currentItem] = data.msg.url;
                  that.setData({
                    markImg: that.data.markImg,
                    txtFinish: true
                  })
                  tempWork.images = that.data.markImg;
                  wx.setStorageSync('tempWork', tempWork)
                  that._uploadWork();

                  // if (that.data.tempAction =='save'){
                  //   that._loadIMG(data.msg.url)
                  // }
                },
                fail: function (res) {
                  wx.showModal({
                    title: '提示',
                    content: "图片上传失败",
                    showCancel: false
                  })
                },
                complete() {
                }
              })
            }


          },
          fail(err) {
            wx.hideLoading()
            wx.showModal({
              title: '提示',
              content: '图片保存失败,请尝试重新保存:' + err.errMsg,

            })
          }
        })
      })
    } else {
      wx.hideLoading();
      wx.showModal({
        title: '提示',
        content: '你当前画布还未进行编辑，无法进行保存',
      })
    }
    //清空画布
    that.cxtImg.clearRect(0, 0, 2 * that.data.canvasW, 2 * that.data.canvasH)
  },
  // 添加文字
  _addText() {
    let textItem = {
      itemType: 'text',
      style: {
        width: 250,
        left: (this.data.canvasW - 250) / 2,
        top: (this.data.canvasH - 44) / 2,
        fontSize: this.data.fontSize,
        color: this.data.color[this.data.currentColor],
        lineHeight: this.data.fontSize + 10
      },
      lineCount: 1,
      content: ''
    }

    this.data.interimArray.push(textItem)

    this.setData({
      textItem: this.data.textItem,
      selectTxtIndex: this.data.selectTxtIndex + 1,
      interimArray: this.data.interimArray,
      addTxt: true,
      showHandwriting: false,
      txtFinish: false
    })
    // this.saveWork();
    this._saveCanvas(1)

  },

  _deletTxt(e) {
    console.log(e)
    let index = e.currentTarget.dataset.index;
    this.data.interimArray.splice(index, 1);
    this.setData({
      interimArray: this.data.interimArray,
    })
  },
  _textareaTouchStart(e) {
    let index = e.currentTarget.dataset.index;
    this.moveStartX = e.touches[0].pageX;
    this.moveStartY = e.touches[0].pageY;
    // 开启定时器判断用户是点击还是拖动
    this.openInputTimer = setTimeout(() => {
      this.setData({
        selectTxtIndex: index,
        showInput: true
      })
    }, 300)
  },
  _textareaTouchMove(e) {
    clearTimeout(this.openInputTimer)
    let index = e.currentTarget.dataset.index;
    //文字坐标
    let leftX = parseInt(this.data.interimArray[index].style.left + (e.touches[0].pageX - this.moveStartX));
    let leftY = parseInt(this.data.interimArray[index].style.top + (e.touches[0].pageY - this.moveStartY));
    //限制文字拖动范围
    // if (leftX < 0) {
    //   leftX = 0
    // }
    // if (leftY < 0) {
    //   leftY = 0
    // }
    // if (leftX > parseInt(W - this.data.textItem.style.width)) {
    //   leftX = parseInt(W - this.data.textItem.style.width)
    // }
    // if (leftY > parseInt(H - this.data.textItem.style.height)) {
    //   leftY = parseInt(H - this.data.textItem.style.height)
    // }

    // this.data.textItem.style.left = leftX;
    // this.data.textItem.style.top = leftY;
    // this.setData({
    //   textItem: this.data.textItem
    // })
    this.data.interimArray[index].style.left = leftX;
    this.data.interimArray[index].style.top = leftY;
    this.setData({
      interimArray: this.data.interimArray
    })
    //重新定位拖动起点
    this.moveStartX = e.touches[0].pageX;
    this.moveStartY = e.touches[0].pageY;
  },
  inputValue(e) {
    let index = e.currentTarget.dataset.index;
    this.data.interimArray[index].content = e.detail.value;
    this.setData({
      interimArray: this.data.interimArray
    })
  },
  _uploadWork() {
    let url = '/api/teacher/pigaiimage', params = {
      id: wx.getStorageSync('tempWork').id,
      pigai_images: this.data.markImg.join(',')
    }, that = this;
    app.post(url, params).then((res) => {

      if (that.data.tempAction == 'next') {
        if (this.data.actionType == 'next') {
          if (that.data.currentItem == that.data.markImg.length - 1) {
            wx.showToast({
              title: '最后一页了',
              icon: 'none'
            })
          } else {
            that.setData({
              currentItem: this.data.currentItem + 1
            })
            that.context.draw();
            that._loadIMG(that.data.markImg[that.data.currentItem])
          }
        } else {
          if (that.data.currentItem == 0) {
            wx.showToast({
              title: '已经第一页了',
              icon: 'none'
            })
          } else {
            that.setData({
              currentItem: this.data.currentItem - 1
            })
          }
        }
      }

      that.context.draw();
      that._loadIMG(that.data.markImg[that.data.currentItem])
      wx.showToast({
        title: '保存成功',
        icon: 'none'
      })
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})


/* 绘制箭头函数 */
// ctx：Canvas绘图环境
// fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组）
// toX, toY：终点坐标(也可以换成p2，只不过它是一个数组)
// theta：三角斜边一直线夹角
// headlen：三角斜边长度
// width：箭头线宽度
// color：箭头颜色
function drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {
  theta = typeof (theta) != 'undefined' ? theta : 30;
  headlen = typeof (theta) != 'undefined' ? headlen : 10;
  width = typeof (width) != 'undefined' ? width : 1;
  color = typeof (color) != 'color' ? color : '#000';
  let angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
    angle1 = (angle + theta) * Math.PI / 180, angle2 = (angle - theta) * Math.PI / 180,
    topX = headlen * Math.cos(angle1), topY = headlen * Math.sin(angle1),
    botX = headlen * Math.cos(angle2), botY = headlen * Math.sin(angle2); ctx.save();

  let arrowX = fromX - topX,
    arrowY = fromY - topY;
  ctx.save();
  ctx.beginPath();
  ctx.setStrokeStyle(color)
  ctx.setLineWidth(width)
  ctx.setLineJoin('miter')
  ctx.moveTo(arrowX, arrowY);
  ctx.moveTo(fromX, fromY);
  ctx.lineTo(toX, toY);

  arrowX = toX + topX;
  arrowY = toY + topY;
  ctx.setFillStyle(color)
  ctx.moveTo(arrowX, arrowY);
  ctx.lineTo(toX, toY);
  ctx.stroke();

  arrowX = toX + botX;
  arrowY = toY + botY;
  ctx.lineTo(arrowX, arrowY);
  ctx.fill();
  ctx.restore();
  ctx.draw();
}