// pages/member/rankingListSecond/rankingListSecond.js
var app = getApp();
let myCanvasWidth = null;
let myCanvasHeight = null;
let unit = "";
let iconFrom = {};
Page({
  /**
   * 页面的初始数据
   */
  data: {
    loadingImg: true,
    card_id: "",
    cardData: {
      card_statistics: {},
    },
    cardDataInfo: {
      card_statistics: {},
    },
    area_name: "",
    role_name: {},
    drawing: [],
    savebtnText: "保存名片图片",
    // 画图
    avatar: "",
    // 本地存储的数据
    card_mobile: "/image/card_img_b.png",
    card_wechat: "/image/card_img_c.png",
    area_nameIcon: "/image/card_img_d.png",
    visit: "/image/card_img_a.png",
    canvasWidth: "",
    canvasHeight: "",
    showBtn: false,
    ithumb: "",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      card_id: options.card_id,
    });
    if (options.mid) {
      app._setMid(options.mid);
    }

    wx.getSystemInfo({
      success: (res) => {
        unit = res.windowWidth / 375;
        myCanvasWidth = 343 * unit;
        myCanvasHeight = 510 * unit;
        this.setData({
          canvasWidth: myCanvasWidth,
          canvasHeight: myCanvasHeight,
        });
      },
    });

    wx.showLoading({
      title: "绘图中",
    });

    if (options.from === "share") {
      this.setData({
        from_sta: 1,
      });
      this.getCardDate();
    } else {
      this.startDraw();
    }
  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.showShareMenu({
      withShareTicket: false,
      menus: ["shareAppMessage", "shareTimeline"],
    });
  },

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

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

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

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

  /**
   * 用户点击右上角分享
   */
  onShareTimeline() {
    var value = wx.getStorageSync("yz_uid");
    var mid = "";
    if (value) {
      mid = value;
    }
    return {
      query: `card_id=${this.data.card_id}&mid=${mid}&from=share`,
    };
  },
  onShareAppMessage: function () {
    var value = wx.getStorageSync("yz_uid");
    var mid = "";
    if (value) {
      mid = value;
    }
    return {
      path: "/packageB/member/business_card/CardVisit/CardVisit?card_id=" + this.data.card_id + "&mid=" + mid + "&from=share",
    };
  },

  startDraw() {
    wx.getStorage({
      key: "iconFrom",
      success: (res) => {
        this.setData({
          visit: res.data.visit,
          card_mobile: res.data.card_mobile,
          card_wechat: res.data.card_wechat,
          area_nameIcon: res.data.area_nameIcon,
          "cardData.card_avatar": res.data.card_avatar,
          "cardData.background": res.data.background,
          "cardData.min_code": res.data.min_code,
        });
        wx.getStorage({
          key: "info",
          success: (res) => {
            this.setData({
              "cardData.card_name": res.data.card_name,
              "cardData.card_mobile": res.data.card_mobile,
              "cardData.card_wechat": res.data.card_wechat,
              "cardData.area_name": res.data.area_name,
              "cardData.card_statistics.visit": res.data.visit,
              "cardData.shop_name": res.data.shop_name,
              "cardData.role_name": res.data.role_name,
            });
            this.getAvaterInfo();
          },
          fail: (error) => {
            wx.showToast({
              title: error,
              icon: "none",
            });
          },
        });
      },
      fail: (error) => {
        wx.showToast({
          title: error,
          icon: "none",
        });
      },
    });
  },
  getCardDate() {
    let urlStr = app.getNetAddresss("plugin.business-card.frontend.controllers.center.card.index");
    app._getNetWork({
      url: urlStr,
      success: (resdata) => {
        var response = resdata.data;
        if (response.result == 1) {
          let area_name = null;
          if (response.data.area_name.length != 0) {
            if (response.data.area_name[3] == null) {
              response.data.area_name[3] = "";
            }
            if (response.data.has_one_card.address == null) {
              response.data.has_one_card.address = "";
            }
            area_name = response.data.area_name[0] + response.data.area_name[1] + response.data.area_name[2] + response.data.area_name[3] + response.data.has_one_card.address;
          }

          this.setData({
            cardData: response.data,
            cardMessage: response.data.has_one_card,
            role_name: response.data.role_name,
            area_name: area_name,
          });
          if (!this.data.from_sta) {
            this.setData({
              card_id: response.data.has_one_card.id,
            });
          }
          this.getData();
        } else {
          wx.showToast({
            title: response.msg,
            icon: "none",
          });
          setTimeout(() => {
            wx.reLaunch({
              url: "/packageG/index/index",
            });
          }, 2000);
        }
      },
      fail: function (res) {
        console.log(res);
      },
    });
  },
  getData() {
    let urlStr = app.getNetAddresss("plugin.business-card.frontend.controllers.center.card-pic.index");
    urlStr += "&card_id=" + this.data.card_id + "&card_type=1";
    app._getNetWork({
      url: urlStr,
      success: (resdata) => {
        var response = resdata.data;
        if (response.result == 1) {
          this.setData({
            cardDataInfo: response.data,
            role_name: response.data.role_name,
          });
          this.saveImg();
          let area_name = "";
          if (this.data.cardData.area_name[0]) {
            area_name = this.data.cardData.area_name[0] + this.data.cardData.area_name[1] + this.data.cardData.area_name[2] + this.data.cardData.area_name[3] + this.data.cardData.has_one_card.address;
          }
          let info = {};
          if (response.data.role_name.level_name == null) {
            response.data.role_name.level_name = "";
          }
          info.card_name = response.data.card_name;
          info.card_mobile = response.data.card_mobile;
          info.card_wechat = response.data.card_wechat;
          info.area_name = area_name;
          info.visit = "人气" + response.data.card_statistics.visit;
          info.card_name = response.data.card_name + "名片码";
          info.shop_name = `名片由【${response.data.shop_name}】生成`;
          info.role_name = response.data.role_name.role_name + "|" + response.data.role_name.level_name;
          wx.setStorage({
            key: "info",
            data: info,
          });
        } else {
          // wx.showToast({
          //   title: response.msg,
          //   icon: 'none'
          // })
        }
      },
      fail: function (res) {
        console.log(res);
      },
    });
  },
  // 网络图标存本地
  saveImg() {
    wx.getImageInfo({
      src: this.data.visit,
      success: (res) => {
        console.log(res);
        this.setData({
          visit: res.path,
        });
        iconFrom.visit = this.data.visit;
        wx.setStorage({
          key: "iconFrom",
          data: iconFrom,
        });
      },
      fail: function (res) {
        // 失败回调
        console.log(res, "错误的回调1");
      },
    });
    wx.getImageInfo({
      src: this.data.card_mobile,
      success: (res) => {
        console.log(res);
        this.setData({
          card_mobile: res.path,
        });
        iconFrom.card_mobile = this.data.card_mobile;
        wx.setStorage({
          key: "iconFrom",
          data: iconFrom,
        });
      },
      fail: function (res) {
        // 失败回调
        console.log(res, "错误的回调2");
      },
    });
    wx.getImageInfo({
      src: this.data.card_wechat,
      success: (res) => {
        this.setData({
          card_wechat: res.path,
        });
        iconFrom.card_wechat = this.data.card_wechat;
        wx.setStorage({
          key: "iconFrom",
          data: iconFrom,
        });
      },
      fail: function (res) {
        // 失败回调
        console.log(res, "错误的回调3");
      },
    });
    wx.getImageInfo({
      src: this.data.area_nameIcon,
      success: (res) => {
        this.setData({
          area_nameIcon: res.path,
        });
        iconFrom.area_nameIcon = this.data.area_nameIcon;
        wx.setStorage({
          key: "iconFrom",
          data: iconFrom,
        });
      },
      fail: function (res) {
        // 失败回调
        console.log(res, "错误的回调4");
      },
    });
    wx.downloadFile({
      url: this.data.cardDataInfo.background, // 服务器返回的图片地址
      success: (res) => {
        // res.tempFilePath是网络图片的本地地址
        let Path = res.tempFilePath;
        this.setData({
          "cardDataInfo.background": Path,
        });
        iconFrom.background = res.tempFilePath;
        wx.setStorage({
          key: "iconFrom",
          data: iconFrom,
        });
      },
      fail: function (res) {
        // 失败回调
      },
    });
    wx.downloadFile({
      url: this.data.cardDataInfo.card_avatar, // 服务器返回的图片地址
      success: (res) => {
        // res.tempFilePath是网络图片的本地地址
        this.setData({
          "cardDataInfo.card_avatar": res.tempFilePath,
        });
        iconFrom.card_avatar = res.tempFilePath;
        wx.setStorage({
          key: "iconFrom",
          data: iconFrom,
        });
        setTimeout(() => {
          this.startDraw();
        }, 2000);
      },
      fail: function (res) {
        // 失败回调
        console.log(res, "失败");
      },
    });

    wx.downloadFile({
      url: this.data.cardDataInfo.min_code, // 服务器返回的图片地址
      success: (res) => {
        // res.tempFilePath是网络图片的本地地址
        this.setData({
          "cardDataInfo.min_code": res.tempFilePath,
        });
        iconFrom.min_code = res.tempFilePath;
        wx.setStorage({
          key: "iconFrom",
          data: iconFrom,
        });
      },
      fail: function (res) {
        // 失败回调
        console.log(res, "错误的回调");
      },
    });
  },
  // 画图
  getAvaterInfo() {
    const ctx = wx.createCanvasContext("myCanvas");
    // 画banner图
    ctx.fillStyle = "#FFFFFF";

    ctx.fillRect(0, 0, this.data.canvasWidth + 20, this.data.canvasHeight);
    if (!app._isTextEmpty(this.data.cardData.background)) {
      ctx.drawImage(this.data.cardData.background, (this.data.canvasWidth + 20 - 335 * unit) / 2, 0 + 20, 335 * unit, 160 * unit);
    }
    // 头像
    const headWH = 120 / 2; // 头像的框高
    {
      let avatarurl_width = headWH; // 绘制的头像宽度
      let avatarurl_heigth = headWH; // 绘制的头像高度
      let avatarurl_x = 15 * unit; // 绘制的头像在画布上的位置
      let avatarurl_y = 181 * unit; // 绘制的头像在画布上的位置
      ctx.save();
      ctx.beginPath(); // 开始绘制
      // 先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
      ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y + 20, avatarurl_width / 2, 0, Math.PI * 2, false);
      ctx.clip(); // 画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
      if (!app._isTextEmpty(this.data.cardData.card_avatar)) {
        ctx.drawImage(this.data.cardData.card_avatar, avatarurl_x, avatarurl_y + 20, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片
      }

      ctx.restore(); // 恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
    }
    //  会员名字
    ctx.setTextAlign("center"); // 文字居中
    ctx.setFillStyle("#000000"); // 文字颜色：黑色
    ctx.setFontSize(14); // 文字字号：22px
    console.log(this.data.cardData.card_name, "this.data.cardData.card_name");
    if (this.data.cardData.card_name.length > 15) {
      this.data.cardData.card_name1 = this.data.cardData.card_name.substr(0, 15);
      this.data.cardData.card_name2 = this.data.cardData.card_name.substr(15);
      ctx.fillText(this.data.cardData.card_name1, 180 * unit, 210 * unit);
    } else {
      ctx.fillText(this.data.cardData.card_name, 160 * unit, 230 * unit);
    }
    if (this.data.cardData.card_name2) {
      ctx.fillText(this.data.cardData.card_name2, 180 * unit, 230 * unit);
    }

    // 角色
    ctx.setTextAlign("center"); // 文字居中
    ctx.setFillStyle("#8c8c8c"); // 文字颜色：黑色
    ctx.setFontSize(14); // 文字字号：22px
    // if (this.data.cardData.card_name2){
    //   ctx.fillText(this.data.cardData.role_name, 140 * unit, 250 * unit)
    // }else{
    ctx.fillText(this.data.cardData.role_name, 140 * unit, 250 * unit);
    // }

    if (this.data.cardData.card_mobile != "") {
      // 电话图标
      ctx.drawImage(this.data.card_mobile, 15 * unit, 275 * unit, 20 * unit, 20 * unit);
      // 电话
      ctx.setTextAlign("center"); // 文字居中
      ctx.setFillStyle("#b0b0b0"); // 文字颜色：黑色
      ctx.setFontSize(12); // 文字字号：22px
      ctx.fillText(this.data.cardData.card_mobile, 100 * unit, 290 * unit);
    }
    if (this.data.cardData.card_wechat != "") {
      // 微信图标
      if (this.data.cardData.card_mobile == "") {
        ctx.drawImage(this.data.card_wechat, 15 * unit, 275 * unit, 20 * unit, 20 * unit);
        // 微信号
        ctx.setTextAlign("center"); // 文字居中
        ctx.setFillStyle("#b0b0b0"); // 文字颜色：黑色
        ctx.setFontSize(12); // 文字字号：22px
        ctx.fillText(this.data.cardData.card_wechat, 90 * unit, 290 * unit);
      } else {
        ctx.drawImage(this.data.card_wechat, 15 * unit, 300 * unit, 20 * unit, 20 * unit);
        // 微信号
        ctx.setTextAlign("center"); // 文字居中
        ctx.setFillStyle("#b0b0b0"); // 文字颜色：黑色
        ctx.setFontSize(12); // 文字字号：22px
        ctx.fillText(this.data.cardData.card_wechat, 100 * unit, 315 * unit);
      }
    }

    if (this.data.cardData.area_name != "") {
      if (this.data.cardData.area_name.length > 15) {
        this.data.cardData.area_name1 = this.data.cardData.area_name.substr(0, 15);
        this.data.cardData.area_name2 = this.data.cardData.area_name.substr(15);
      } else {
        this.data.cardData.area_name1 = this.data.cardData.area_name;
      }
      // 地址图标
      if (this.data.cardData.card_mobile == "" && this.data.cardData.card_wechat == "") {
        ctx.drawImage(this.data.area_nameIcon, 15 * unit, 270 * unit, 20 * unit, 20 * unit);
        // 地址
        ctx.setTextAlign("center"); // 文字居中
        ctx.setFillStyle("#b0b0b0"); // 文字颜色：黑色
        ctx.setFontSize(12); // 文字字号：22px

        ctx.fillText(this.data.cardData.area_name1, 135 * unit, 285 * unit);
        if (this.data.cardData.area_name2) {
          ctx.fillText(this.data.cardData.area_name2, 135 * unit, 300 * unit);
        }
      } else if (this.data.cardData.card_mobile == "" || this.data.cardData.card_wechat == "") {
        ctx.drawImage(this.data.area_nameIcon, 15 * unit, 300 * unit, 20 * unit, 20 * unit);
        // 地址
        ctx.setTextAlign("center"); // 文字居中
        ctx.setFillStyle("#b0b0b0"); // 文字颜色：黑色
        ctx.setFontSize(12); // 文字字号：22px

        ctx.fillText(this.data.cardData.area_name1, 130 * unit, 315 * unit);
        if (this.data.cardData.area_name2) {
          ctx.fillText(this.data.cardData.area_name2, 130 * unit, 330 * unit);
        }
      } else {
        ctx.drawImage(this.data.area_nameIcon, 15 * unit, 325 * unit, 20 * unit, 20 * unit);
        // 地址
        ctx.setTextAlign("center"); // 文字居中
        ctx.setFillStyle("#b0b0b0"); // 文字颜色：黑色
        ctx.setFontSize(12); // 文字字号：22px

        ctx.fillText(this.data.cardData.area_name1, 130 * unit, 340 * unit);
        if (this.data.cardData.area_name2) {
          ctx.fillText(this.data.cardData.area_name2, 130 * unit, 355 * unit);
        }
      }
    }
    // 人气图标
    ctx.drawImage(this.data.visit, 280 * unit, 205 * unit, 20 * unit, 35 * unit);
    // 人气
    ctx.setTextAlign("center"); // 文字居中
    ctx.setFillStyle("#f15353"); // 文字颜色：黑色
    ctx.setFontSize(14); // 文字字号：22px
    ctx.fillText(this.data.cardData.card_statistics.visit, 315 * unit, 230 * unit);
    // 二维码图片
    ctx.drawImage(this.data.cardData.min_code, 25 * unit, 385 * unit, 100, 100);
    // 名片码的人名称
    ctx.setTextAlign("center"); // 文字居中
    ctx.setFillStyle("#50a6f9"); // 文字颜色：黑色
    ctx.setFontSize(14); // 文字字号：22px
    if (this.data.cardData.card_name.length > 15) {
      this.data.cardData.card_name1 = this.data.cardData.card_name.substr(0, 15);
      this.data.cardData.card_name2 = this.data.cardData.card_name.substr(15);
      ctx.fillText(this.data.cardData.card_name1, 230 * unit, (416 - 10) * unit);
    } else {
      ctx.fillText(this.data.cardData.card_name, 230 * unit, (426 - 10) * unit);
    }
    if (this.data.cardData.card_name2) {
      // ctx.fillText(this.data.cardData.card_name2, 160 * unit, 230 * unit)
      ctx.fillText(this.data.cardData.card_name2, 230 * unit, (430 - 10) * unit);
    }
    // ctx.fillText(this.data.cardData.card_name, 230 * unit, (426 - 10) * unit)
    // 长按
    ctx.setTextAlign("center"); // 文字居中
    ctx.setFillStyle("#333"); // 文字颜色：黑色
    ctx.setFontSize(14); // 文字字号：22px
    ctx.fillText("长按识别名片码保存名片", 240 * unit, 437 * unit);
    // 生成
    ctx.setTextAlign("center"); // 文字居中
    ctx.setFillStyle("#8c8c8c"); // 文字颜色：黑色
    ctx.setFontSize(13); // 文字字号：22px
    ctx.fillText(this.data.cardData.shop_name, 240 * unit, 460 * unit);
    ctx.draw(true, this.toimage());
  },
  toimage() {
    wx.hideLoading();
    this.setData({
      showBtn: true,
    });
    let that = this;
    setTimeout(() => {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: this.data.canvasWidth + 20,
        height: this.data.canvasHeight * 4,
        destWidth: this.data.canvasWidth * 4 + 20 * 4,
        destHeight: this.data.canvasHeight,
        canvasId: "myCanvas",
        success: function (res) {
          console.log(res);
          var tempFilePath = res.tempFilePath;
          that.setData({
            ithumb: tempFilePath,
          });
        },
        fail: function (res) {
          console.log(res);
        },
      });
    }, 1000);
  },
  // 预览
  previewImage() {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: this.data.canvasWidth + 20,
      height: this.data.canvasHeight,
      destWidth: this.data.canvasWidth * 4 + 20 * 4,
      destHeight: this.data.canvasHeight * 4,
      canvasId: "myCanvas",
      success: function (res) {
        var tempFilePath = res.tempFilePath;
        console.log(tempFilePath);
        wx.showToast({
          title: "长按分享好友！",
          icon: "none",
          duration: 2000,
        });
        wx.previewImage({
          current: tempFilePath, // 当前显示图片的http链接
          urls: [tempFilePath], // 需要预览的图片http链接列表
        });
      },
      fail: function (res) {
        console.log(res);
      },
    });
  },
  // 点击保存到相册
  saveShareImg: function () {
    wx.showLoading({
      title: "保存中",
    });
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: this.data.canvasWidth + 20,
      height: this.data.canvasHeight,
      destWidth: this.data.canvasWidth * 4 + 20 * 4,
      destHeight: this.data.canvasHeight * 4,
      canvasId: "myCanvas",
      success: function (res) {
        console.log(res);
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(result) {
            wx.showToast({
              title: "图片保存成功",
              icon: "success",
              duration: 2000,
            });
          },
          fail: (res) => {
            wx.hideLoading();
          },
        });
      },
    });
  },
});