// component/authorize/authorize.js
import utils from '../../utils/util.js'
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    maskHidden:true
    // isAuthorize: true,
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached() {
      // this.setData({
      //   context:wx.createCanvasContext('myCanvas',this)
      // })
      // setTimeout(()=>{
        // console.log('myCanvas',wx.createCanvasContext('myCanvas'))
      // },1000)
      // const query = this.createSelectorQuery()
      // console.log('query.select(#myCanvas)',query.select('#myCanvas'))
      // query.select('#myCanvas')
      // .fields({ node: true, size: true })
      // .exec((res) => {
      //   const canvas = res[0].node
      //   const context = canvas.getContext('2d')
      //   // const dpr = wx.getSystemInfoSync().pixelRatio
      //   // canvas.width = res[0].width * dpr
      //   // canvas.height = res[0].height * dpr
      //   // ctx.scale(dpr, dpr)
      //   canvas.width = 375
      //   canvas.height = 667
      //   this.setData({
      //     canvas,
      //     context
      //   })
      //   this.triggerEvent('createCanvas', {
      //     context,
      //     // context: wx.createCanvasContext('myCanvas'),
      //     canvas 
      //   })
      // })
     },
    // moved() { },
    // detached() { },
    // ready() {
      
    // }
  },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    // show() {
    //   utils.isAuthorize(this);
    // },
    // hide() {
    // },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //寻找切换断点
  findBreakPoint(text, width, context) {
    var min = 0;
    var max = text.length - 1;

    while (min <= max) {
        var middle = Math.floor((min + max) / 2);
        var middleWidth = context.measureText(text.substr(0, middle)).width;
        var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;
        if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
            return middle;
        }
        if (middleWidth < width) {
            min = middle + 1;
        } else {
            max = middle - 1;
        }
    }

    return -1;
  },

  breakLinesForCanvas(context,text, width, font) {
    var result = [];
    var breakPoint = 0;

    if (font) {
        
        context.setFontSize(font);
        // context.font = font+'px';
    }

    while ((breakPoint = this.findBreakPoint(text, width, context)) !== -1) {
        result.push(text.substr(0, breakPoint));
        text = text.substr(breakPoint);
    }

    if (text) {
        result.push(text);
    }

    return result;
  },

  // //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  // createNewImg () {
  //   let that = this;
  //   let context = wx.createCanvasContext('myCanvas',this);
  //   context.setFillStyle("#fff");
  //   context.fillRect(0, 0, 375, 667)
  //   // let path = "../../imgs/gobg.png";
  //   // //不知道是什么原因，手机环境能正常显示
  //   // context.drawImage(path, 0, 0, 375, 183);
  //   let avatarImg = this.data.avatarUrl;
  //   console.log(avatarImg,"avatarImg")
  //   // let path2 = "../../imgs/chengzhong.png";
  //   let goodsImg = this.data.goodsImg;
  //   let qrCodeImg = this.data.qrCodeImg;
  //   console.log('将生成好的图片保存到本地',avatarImg,goodsImg,qrCodeImg)
  //   // let path5 = "../../imgs/computer.png";
  //   // context.drawImage(path2, 126, 186, 120, 120);
  //   // context.save(); // 保存当前context的状态

  //   // let name = that.data.name;
  //   // //绘制名字
  //   // context.setFontSize(30);
  //   // context.setFillStyle('#333333');
  //   // context.setTextAlign('center');
  //   // context.fillText(name, 185, 160);
  //   // context.stroke();
  //   //绘制文字
  //   context.beginPath()
  //   context.setFontSize(16);
  //   context.setFillStyle('#333333');
  //   context.setTextAlign('left');
  //   context.fillText("我看上了这款商品", 140, 50);
  //   context.stroke();
  //   context.setFontSize(16);
  //   context.setFillStyle('#333333');
  //   context.setTextAlign('left');
  //   context.fillText("帮我看看咋样啊~~", 140, 85);
  //   context.stroke();
  //   context.closePath();
  //   //绘制商品
  //   context.drawImage(goodsImg, 48, 125, 280, 280);
  //   // 商品文字
  //   context.beginPath();
  //   context.setFontSize(16);
  //   context.setFillStyle('#333333');
  //   context.setTextAlign('left');
  //   var result = this.breakLinesForCanvas(context,
  //     '使用很寻常的二分查找，如果某一个位置之前的文字宽度小于等于设定的宽度，'.slice(0,40),
  //     170, '14px');
  //   var lineHeight = 25;
  //   result.forEach(function(line, index) {
  //       context.fillText(line, 50, lineHeight * index + 435);
  //       // context.fillText("商品描述", 50, 445);
  //   });
    
  //   context.stroke();
  //   context.setFontSize(32);
  //   context.setFillStyle('#f23232');
  //   context.setTextAlign('left');
  //   context.fillText("￥1999.00", 45, 505);
  //   context.stroke();
  //   context.closePath();

  //   // 绘制分割线
  //   context.beginPath()
  //   context.strokeStyle='#ddd'
  //   context.moveTo(10, 520)
  //   context.lineTo(365, 520)
  //   context.stroke()
  //   context.closePath();
  //   //绘制code码
  //   // context.setFontSize(40);
  //   // context.setFillStyle('#ffe200');
  //   // context.setTextAlign('center');
  //   // context.fillText(that.data.code, 185, 435);
  //   // context.stroke();
  //   //绘制左下角文字背景图
  //   context.drawImage(qrCodeImg, 20, 530, 120, 120);

  //   //绘制右下角扫码提示语
  //   // context.drawImage(path5, 248, 578, 90, 25);
  //   context.setFontSize(16);
  //   context.setFillStyle('#333');
  //   context.setTextAlign('left');
  //   context.fillText("长按识别小程序码 即可查看~",150, 600);
    
    
  //   context.stroke();
  //   //绘制头像
  //   context.arc(80, 60, 40, 0, 2 * Math.PI) //画出圆
  //   context.strokeStyle = "#ffe200";
  //   context.clip(); //裁剪上面的圆形
  //   context.drawImage(avatarImg, 40, 20, 80, 80); // 在刚刚裁剪的园上画图
  //   context.draw();
  //   //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
  //   setTimeout(()=> {
  //     wx.canvasToTempFilePath({
  //       canvasId: 'myCanvas',
  //       success: (res)=> {
  //         let tempFilePath = res.tempFilePath;
  //         console.log('createPoster 生成海报图6',res.tempFilePath);
  //         this.setData({
  //           imagePath: tempFilePath,
  //           canvasHidden:true
  //         });
  //       },
  //       fail: function (res) {
  //         console.log(res);
  //       }
  //     },this);
  //   }, 500);
  // },

  // 生成图片海报
  createPoster(childComp){
    // console.log(this===childComp)
    
    // this.setData({
    //   maskHidden: false
    // });
    wx.canvasToTempFilePath({
      canvasId:'myCanvas',
      success: (res)=> {
        let tempFilePath = res.tempFilePath;
        console.log('createPoster 生成海报图',res.tempFilePath);
        this.setData({
          imagePath: tempFilePath,
          // maskHidden: false
          // canvasHidden:true
        });
        // this.data.context.draw();
        // this.data.context.clearRect(0, 0, 375, 667);
      },
      fail: function (res) {
        console.log(res);
        wx.showToast({
          title: '生成失败，请重试！',
        })
      },
      complete:()=>{
        wx.hideToast();
      }
    },this);
  },
    //点击保存到相册
    saveLocal: utils.debounce( async function(){
      if (!this.data.imagePath) {
        return;
      }
      wx.showLoading({
        title: '保存中...',
      })
      let isAuthorizeSave = await this.isAuthorizeSave();
      if (!isAuthorizeSave) {
        wx.hideLoading();
        wx.showModal({
          title:'提示',
          content:'您还未授权保存到相册，请在接下来打开的设置页面开启相册授权！',
          success (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              wx.openSetting({
                success (res) {
                  console.log(res.authSetting)
                  // res.authSetting = {
                  //   "scope.userInfo": true,
                  //   "scope.userLocation": true
                  // }
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
        return;
        
      }
      // this.getUploadImg();
      // this.triggerEvent('saveToLocal');
      console.log('保存图片中',this.data.imagePath);
      // wx.showLoading({
      //   title: '保存中...',
      // })
      var that = this;
      wx.saveImageToPhotosAlbum({
        filePath: this.data.imagePath,
        success:(res)=> {
          this.uploadImg();
          
          wx.showModal({
            content: '图片已保存到相册，赶紧在朋友圈晒一下吧~',
            showCancel: false,
            confirmText: '好的',
            confirmColor: '#333',
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定');
                /* 该隐藏的隐藏 */
                that.setData({
                  maskHidden: true
                })
              }
            },
            fail: async(res)=>{
              // console.log(11111)
              // wx.hideLoading();
            },
            complete:res=>{
              wx.hideLoading();
            }
          })
        }
      })
      
    },200),
    //点击生成
    formSubmit (e) {
      var that = this;
      // this.setData({
      //   maskHidden: true,
      //   context:wx.createCanvasContext('myCanvas',this)
      // });
      // this.setData({
      //   context:wx.createCanvasContext('myCanvas',this)
      // })
      wx.showToast({
        title: '生成中...',
        icon: 'loading',
        duration: 5000
      });
      // that.createNewImg();
      let context = wx.createCanvasContext('myCanvas',this);
      console.log('canvas....',context)
      // context.draw(true);
      // context.clearRect(0, 0, 375, 667);
      this.triggerEvent('createPoster', {
        // context: this.data.context ,
        // canvas: this.data.canvas 
        context,
      })
      
      this.setData({
        maskHidden: false
      });
        // setTimeout(()=>{
        //   wx.hideToast();
        //   this.setData({
        //     maskHidden: false
        //   });
        // },500)
      // setTimeout(()=> {
      //   // this.setData({
      //   //   context:wx.createCanvasContext('myCanvas',this)
      //   // })
        
        
      // }, 200)
    },

    hideMask(){
      // console.log('kkkkkk')
      this.setData({
        maskHidden: true
      })
      wx.hideLoading();
    },

    async isAuthorizeSave(){
     let [err,res] = await utils.to(wx.pro.getSetting());
     if (err) {
       return false;
     }
     console.log('getSetting',res);
      // if (res.authSetting['scope.writePhotosAlbum']) {
      //   return true;
      // }
      // if (res.authSetting['scope.writePhotosAlbum']===true) {
      //   return true;
      // }
      if (res.authSetting['scope.writePhotosAlbum']===false) {
        return false;
      }
      return true;
    },

    openSetting(){

      wx.pro.openSetting({
        success (res) {
          console.log(res.authSetting)
          // res.authSetting = {
          //   "scope.userInfo": true,
          //   "scope.userLocation": true
          // }
        }
      })
    },

    uploadImg(){
      wx.uploadFile({
        url: utils.getUrl('/shopping/poster/uploadPosterForMe.do'),
        // url: app.globalData.reqBase + '/shopping/confirm.do?m=uploadAttachment&doccode='+ doccode +'&rowid='+rowid,
        formData: {
          'FromUserId': app.globalData.FromUserId 
        },
        filePath: this.data.imagePath,
        name: 'data',
        success: res=> {
          console.log(res)
          // let data = JSON.parse(res.data);
          // console.log(data);
          if(!utils.requestError(res)){
            return false;
          }
        },
        fail: function (errmsg) {
          console.log('uploadImage fail, errMsg is', errmsg)
          utils.requestFail(errmsg,'/shopping/poster/uploadPosterForMe.do?FromUserId=');
        }
      })
    },
    getUploadImg(){
      wx.request({
        url: utils.getUrl('/shopping/poster/getPosterForMeList.do'),
        header: {
          "Cookie": "JSESSIONID=" + wx.getStorageSync('sessionID')
        },
        data: {
          FromUserId: app.globalData.FromUserId,
        },
        success: (res)=> {
          wx.hideLoading();
          if(!utils.requestError(res)){
            return false;
          }
          console.log(res)
        },
        fail: function(errmsg) {
          utils.requestFail(errmsg,'/shopping/poster/getPosterForMeList.do');
        }
      })
    }
    
  }
})