import utils from "../../utils/utils";
// painting-2.js
Component({
    properties: {
        showPaint:{
            type: Boolean,
            value:false,
            observer(newval) {
              this.setData({
                showPaint: newval
              });
            },
          },
          paintFrom:{
            type: String,
            value:'',
            observer(newval) {
              this.setData({
                paintFrom: newval
              });
            },
          },
          paintSrc:{
            type: String,
            value:'',
            observer(newval) {
              this.setData({
                paintSrc: newval
              },()=>{
                  this.initData();
                
              });
             
            },
          }
          
    },

      ready(){
          let that = this;
            // 获取设备信息，canvas高度用
            wx.getSystemInfo({
              success: function(res) {
                console.log(res);
                that.setData({
                  canvasWidth: res.windowWidth,
                  canvasHeight: res.windowHeight-50,
                  windowHeight: res.windowHeight
                })
              },
            })
            // 选照片
            //this.chooseImg();
      },
  /**
   * 页面的初始数据
   */
  data: {
    showPaint:false,
    paintFrom:'',
    hasChoosedImg: false,
    canvasWidth: 0,
    showBars: false,
    canvasHeight: 0, // canvas的完整高度
    canvasHeightLen: 0, // canvas的临时高度（用在操作栏影响画布高度时）
    windowHeight: 0, // 屏幕高度
    prevPosition: [0, 0], // 手指触摸的所在位置
    background: '', // 背景图片，即导入的图片
    colors: ["#FFFFFF", "#000000", "#ff0000", "#ffff00", "#00CC00", "#99CCFF", "#0000ff", "#ff00ff"],
    selectColor:"#99CCFF",
    btnInfo: [
      {
        type: 'width',
        background: 'url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-1.png"); background-size: 30px 30px;'
      },
      {
        type: 'color',
        background: 'url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-2.png") white no-repeat; background-size: 24px 24px;background-position: 3px 3px;'
      },
      {
        type: 'clear',
        background: 'url("http://img0.imgtn.bdimg.com/it/u=1358545290,3102156418&fm=26&gp=0.jpg") white no-repeat; background-size: 20px 20px;background-position: 5px 5px;'
      },
      {
        type: 'save',
        background: 'url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-6.png") white no-repeat; background-size: 20px 20px;background-position: 5px 5px;'
      }
    ],
    width: false, // 是否开启宽度调整栏
    color: false, // 是否开启颜色调整栏
    r: 33,
    g: 33,
    b: 33,
    selectSize:8,
    clear: false, // 是否开启清空栏
    eraser: false, // 是否开启橡皮擦
    saving: false, // 是否在保存状态
    scope: false, // 是否有保存图片的权限
  },
  methods:{
      initData(){
          let that=this;
          that.setData({
            hasChoosedImg: true,
          })
          wx.getImageInfo({
            src: this.data.paintSrc,
            success: function (res) {
              // 获取图片信息，主要为宽高，选择合适的自适应方式（将最大边完整显示）
              console.log(res)
              let [height, width] = [that.data.canvasWidth / res.width * res.height, that.data.canvasWidth];
              if (height > that.data.windowHeight - 50) {
                height = that.data.windowHeight - 50;
                width = height / res.height * res.width;
              }
              that.setData({
                canvasHeight: height,
                canvasWidth: width,
                background: res.path
              });
            }
          })
      },
    hideTuya(){
        this.setData({
            showPaint:false,
        })
    },
    chooseBi(){
        this.setData({
            width: false, // 是否开启宽度调整栏
           color: false, 
          clear: false, // 是否开启清空栏
          eraser: false, // 是否开启橡皮擦
          saving: false,
          showBars: false
        })
    },
    // save(e){
    //     saveImg(this, 2);
    //     this.triggerEvent('confirmUpload')
    //   },
      tapBtn: function (e) {
        utils.tapBtn(e, this, 2,this.data.paintFrom);
        this.hideBarsHandler()
      },
      showBarsHandler(e) {
        //this.tapBtn(e)
        this.setData({
          showBars: !this.data.showBars,
          clear:false,
          //eraser:false

        })
      },
     
      sizeHandler(e) {
        const size = e.detail.value;
        this.setData({
          selectSize: size
        })
      },
      hideBarsHandler() {
        this.setData({
          showBars: false
        })
      },
      colorChange(e) {
        this.tapBtn(e);
        const color = e.currentTarget.dataset.color;
        this.setData({
          selectColor: color
        })
      },
      addImg: function (e) {
        this.chooseImg();
      },
    
      chooseImg() {
        let that = this;
        wx.chooseImage({
        count:1,
          success: function (res) {
            that.setData({
              hasChoosedImg: true,
            })
            wx.getImageInfo({
              src: res.tempFilePaths[0],
              success: function (res) {
                // 获取图片信息，主要为宽高，选择合适的自适应方式（将最大边完整显示）
                let [height, width] = [that.data.canvasWidth / res.width * res.height, that.data.canvasWidth];
                if (height > that.data.windowHeight - 50) {
                  height = that.data.windowHeight - 50;
                  width = height / res.height * res.width;
                }
                that.setData({
                  canvasHeight: height,
                  canvasWidth: width,
                  background: res.path
                });
              }
            })
          },
          fail: function (res) {
            console.log(res);
          }
        })
      },
    
      touchStart: function (e) {
        // 开始画图，隐藏所有的操作栏
        this.setData({
          prevPosition: [e.touches[0].x, e.touches[0].y],
          width: false,
          color: false,
          canvasHeightLen: 0
        })
      },
    
      touchMove: function (e) {
        // 触摸移动，绘制中。。。
        let ctx = wx.createCanvasContext('myCanvas',this);
    
        if (this.data.eraser) {
          ctx.clearRect(e.touches[0].x, e.touches[0].y, this.data.selectSize,this.data.selectSize);
          ctx.draw(true);
        } else {
          ctx.setStrokeStyle(this.data.selectColor);
          ctx.setLineWidth(this.data.selectSize);
          ctx.setLineCap('round');
          ctx.setLineJoin('round');
          ctx.moveTo(this.data.prevPosition[0], this.data.prevPosition[1]);
          ctx.lineTo(e.touches[0].x, e.touches[0].y);
          ctx.stroke();
          ctx.draw(true);
        }
    
        this.setData({
          prevPosition: [e.touches[0].x, e.touches[0].y]
        })
        
      },
    
      clearCanvas: function (e) {
        this.tapBtn(e)
        let ctx = wx.createCanvasContext('myCanvas',this);
        ctx.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
        ctx.draw();
        this.setData({
          clear: false,
          canvasHeightLen: 0
        });
        this.chooseBi();
      },
    
      chooseEraser: function () {
        this.setData({
          eraser: true,
          clear: false,
          canvasHeightLen: 0,
          showBars: false
        })
      },
    
      changeColor: function (e) {
        utils.changeColor(e, this);
        this.hideBarsHandler()
      },
    
      changeWidth: function (e) {
        utils.changeWidth(e, this, (this.data.canvasHeightLen + this.data.w - e.detail.value), 2);
      },
      
  },
  
})