var api = require('../../../config/api.js');
import WeCropper from '../../../components/xz-cropper/xz-cropper.js'
const device = wx.getSystemInfoSync() // 获取设备信息
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
const height = width
Page({
  data: {
    cropperOpt: {
      id: 'cropper', // 用于手势操作的canvas组件标识符
      targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符
      pixelRatio: device.pixelRatio, // 传入设备像素比
      width, // 画布宽度
      height, // 画布高度
      scale: 2.5, // 最大缩放倍数
      zoom: 8, // 缩放系数
      cut: {
        x: (width - 200) / 2, // 裁剪框x轴起点
        y: (width - 200) / 2, // 裁剪框y轴期起点
        width: 200, // 裁剪框宽度
        height: 200 // 裁剪框高度
      },
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let that = this;
    const {
      cropperOpt
    } = this.data;

    let _src = JSON.parse(options.data).path;
    if (_src) {
      cropperOpt.src = _src;
      console.log(cropperOpt.src)
      this.cropper = new WeCropper(cropperOpt)
        .on('ready', (rtx) => {
          console.log(`wecropper is ready for work!`)
        }).on('beforeImageLoad', (ctx) => {
          console.log(`before picture loaded, i can do something`)
          console.log(`current canvas context:`, ctx)
          wx.showToast({
            title: '上传中',
            icon: 'loading',
            duration: 20000
          })
        })
        .on('imageLoad', (ctx) => {
          console.log(`picture loaded`)
          console.log(`current canvas context:`, ctx)
          wx.hideToast()
        })
        .on('beforeDraw', (ctx, instance) => {
          console.log(`before canvas draw,i can do something`)
          console.log(`current canvas context:`, ctx)
        });
    }
    console.log(_src)
  },
  /**
   * 点击完成的回调
   * 完成截图，回传图片到上一页
   */
  complete() {
    let that = this;
    this.cropper.getCropperImage((avatar) => {
      let _tempData = {
        // ?id=${wx.getStorageSync("userId")}&openid=${wx.getStorageSync("openid")}&operFlag=上传头像
        url: api.UploadPortrait,
        filePath: avatar,
        name: 'file',
        header: {
          'Content-Type': 'multipart/form-data',
          'X-Litemall-Token': wx.getStorageSync('token')
        }
      }
      that.uploadImg(_tempData);
    })
  },
  touchStart(e) {
    this.cropper.touchStart(e)
  },
  touchMove(e) {
    this.cropper.touchMove(e)
  },
  touchEnd(e) {
    this.cropper.touchEnd(e)
  },
  /**
   * 取消截图
   */
  cancel(event) {
    wx.navigateBack()
  },

  reset(event) {

  },
  /**
   * 上传头像
   */
  uploadImg(data) {
    let _this = this;
    wx.showLoading({
      title: '头像上传中！', //提示的内容,
      mask: true, //显示透明蒙层，防止触摸穿透,
      success: res => {}
    });
    console.log(data.filePath)
    wx.uploadFile({
      url: data.url,
      filePath: data.filePath,
      name: data.name,
      header: data.header,
      formData: {
        openid: wx.getStorageSync("openid"),
        operFlag: '上传头像'
      },
      success(res) {
        let _data = JSON.parse(res.data).data;
        console.log(_data)
        wx.setStorage({
          key: 'userData',
          data: JSON.stringify(_data)
        })
        // 将图片回传到上一页
        var pages = getCurrentPages();
        if (pages.length > 1) {
          wx.hideLoading();
          var prePage = pages[pages.length - 2];
          console.log(_data.avatar);
          prePage.setData({
            'messages.avatar': _data.avatar
          })
        }
        wx.navigateBack()
      },
      file(err) {
        wx.showToast({
          title: err.message,
          icon: 'none'
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    // app.globalData.editorMessageStorage = true;
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
    // app.globalData.editorMessageStorage = false;
  },

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

  },

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

  },

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

  },

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

  }
})