import QR from '../../utils/qrcode'
import Poster from '../../miniprogram_dist/poster/poster';

let app = getApp();
Page({
  data: {
    authorizeVisible: false,
    userInfo: {},
    qrImagePath: "",
    imageUrl: "",
  },
  onShareAppMessage() {},
  showAuth() {
    this.setData({
      authorizeVisible: true
    })
  },
  onLoad(options) {
    this.initData();
  },
  initData() {
    // 获取用户信息 小程序码
    this.queryMember().then((result) => {
      wx.showLoading({
        title: '二维码生成中···',
      });
      // 获取海报数据
      let posterData = this.getPosterConfig();
      // 绘制设置海报
      this.onCreatePoster(posterData);
    });
  },

  onPosterSuccess(e) {
    wx.hideLoading();
    const {
      detail
    } = e;
    console.log("detail:", detail)
    this.setData({
      imageUrl: detail
    })
  },
  onPosterFail(err) {
    wx.hideLoading();
    console.error(err);
  },

  /**
   * 异步生成海报
   */
  onCreatePoster(posterConfig) {
    console.log("posterConfig:", posterConfig);
    this.setData({
      posterConfig: posterConfig
    }, () => {
      Poster.create(true); // 入参：true为抹掉重新生成
    });
  },

  // 获取海报数据
  getPosterConfig() {
    let qrCodeWid = 312;
    let avatarSpace = 5;
    let avatarWidBlock = 300 * 0.3;
    let avatarWid = avatarWidBlock - (avatarSpace * 2);
    let qrTop = 268;
    // 合成图片需要的数据
    let {
      userInfo
    } = this.data;
    let blocks = [{
      x: (690 - avatarWidBlock) * .5,
      y: qrTop + (qrCodeWid * .5) - (avatarWidBlock * .5),
      width: avatarWidBlock,
      height: avatarWidBlock,
      backgroundColor: "#ffffff",
      borderRadius: 10,
      zIndex: 21,
    }]
    let images = [
      // 背景图
      {
        x: 0,
        y: 0,
        width: 690,
        height: 849,
        url: "../../image/my-qrcode/qr-bg.png",
      },
      // 二维码
      {
        x: (690 - qrCodeWid) * .5,
        y: qrTop,
        width: qrCodeWid,
        height: qrCodeWid,
        zIndex: 11,
        url: userInfo.memberUrl,
      },
      // 头像
      {
        x: (690 - avatarWid) * .5,
        y: qrTop + (qrCodeWid * .5),
        y: qrTop + ((qrCodeWid - avatarWidBlock) * .5) + avatarSpace,
        width: avatarWid,
        height: avatarWid,
        borderRadius: 12,
        zIndex: 22,
        url: userInfo.avatar,
      }
    ];
    let lines = [];
    let texts = [{
        x: 690 / 2,
        y: 626,
        width: 690,
        fontSize: 26,
        color: "#000000",
        textAlign: "center",
        zIndex: 11,
        text: userInfo.nickname,
      },
      // {
      //   x: 690 / 2,
      //   y: 732,
      //   width: 690,
      //   fontSize: 18,
      //   color: "#666666",
      //   textAlign: "center",
      //   zIndex: 11,
      //   text: userInfo.memberCode,
      // }
    ];

    let posterData = {
      width: 690,
      height: 849,
      debug: false,
      blocks: blocks,
      images: images,
      lines: lines,
      texts: texts,
    }
    return posterData;
  },

  /**
   * 获取会员信息
   */
  queryMember() {
    let _this = this;
    return new Promise((resolve, reject) => {
      app.post({
        url: app.api.member,
        data: {}
      }).then((result) => {
        let userInfo = result
        _this.setData({
          userInfo: userInfo,
          qrImagePath: userInfo.memberUrl,
        })
        resolve();
      })
    });
  },

  /**
   * 图片查看
   */
  onPreviewImageHandler(evt) {
    // let curItem = getBindtapData(evt);
    // let index = getBindtapData(evt, "index");
    // let current = curItem[index] || '';
    console.log("onPreviewImageHandler")
    let current = this.data.imageUrl;
    let urls = [current];
    wx.previewImage({
      current: current,
      urls: urls
    })
  },

  /**
   * 保存图片到本地
   */
  saveImageToPhotosAlbum() {
    let _this = this;
    if (!_this.data.imageUrl) {
      wx.showToast({
        title: "图片加载中,请重试",
        icon: "none"
      })
      return;
    }
    wx.setClipboardData({
      data: '「深士照明」50万电工奖\n分享二维码：邀请好友就获奖\n好友购买：再获10%返现奖金',
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: _this.data.imageUrl,
          success(res) {
            wx.showToast({
              title: '操作成功',
              icon: 'success'
            });
          },
          fail(err) {
            wx.getSetting({
              success: (res) => {
                if (!res.authSetting['scope.writePhotosAlbum']) {
                  // 未授权
                  wx.showModal({
                    title: '提示',
                    content: '小程序请求访问相册权限',
                    confirmText: '前往授权',
                    success(res) {
                      if (res.confirm) {
                        wx.openSetting({
                          success(res) {}
                        })
                      } else if (res.cancel) {}
                    }
                  })
                }
              }
            })
          }
        })
      }
    })




    // wx.saveImageToPhotosAlbum({
    //   filePath: _this.data.imageUrl,
    //   success(res) {
    //     wx.showToast({
    //       title: '保存成功',
    //       icon: 'success'
    //     });
    //   },
    //   fail(err) {
    //     wx.getSetting({
    //       success: (res) => {
    //         if (!res.authSetting['scope.writePhotosAlbum']) {
    //           // 未授权
    //           wx.showModal({
    //             title: '提示',
    //             content: '小程序请求访问相册权限',
    //             confirmText: '前往授权',
    //             success(res) {
    //               if (res.confirm) {
    //                 wx.openSetting({
    //                   success(res) {}
    //                 })
    //               } else if (res.cancel) {}
    //             }
    //           })
    //         }
    //       }
    //     })
    //   }
    // })
  },


  // 创建二维码
  createQrCode(content, canvasId, cavW, cavH) {
    //调用插件中的draw方法，绘制二维码图片
    QR.api.draw(content, canvasId, cavW, cavH);
    this.canvasToTempImage(canvasId);
  },
  //获取临时缓存图片路径，存入data中
  canvasToTempImage(canvasId) {
    let that = this;
    wx.canvasToTempFilePath({
      canvasId, // 这里canvasId即之前创建的canvas-id
      success: function (res) {
        let tempFilePath = res.tempFilePath;
        console.log(tempFilePath);
        that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
          qrImagePath: tempFilePath,
        });
      },
      fail: function (res) {
        console.log(res);
      }
    });
  },
  //适配不同屏幕大小的canvas
  setCanvasSize(sz) {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / sz; //不同屏幕下canvas的适配比例；设计稿是750宽
      var width = res.windowWidth / scale;
      var height = width; //canvas画布为正方形
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("获取设备信息失败" + e);
    }
    return size;
  },

  // 隐藏蒙层
  hideMask() {
    this.setData({
      authorizeVisible: false,
    })
  },
  // 子组件事件
  evtcomp(evt) {
    let {
      name,
      data
    } = evt.detail;
    switch (name) {

      // 隐藏弹窗
      case "_evt_hide_mask":
        this.hideMask();
        break;

      default:
        break;
    }
  },

})