import { wxRequestPost, wxGetSetting } from "@utils/promise-wx-api";
import { doAfterLogin } from "@utils/tools";
import promiseWxApi from "@utils/promise-wx-api";
const app = getApp()

Component({
  // behaviors: [ computedBehavior, commonBehavior],
  
  properties: {},

  data: {
    groupId:"",
    groupDetail:{
      groupName:"",//小组名称
      groupHeadPhoto:"",//小组头像
      groupIntroduction:"",//小组介绍
      groupCodeUrl:"",//小组二维码路径
      showName:"",//小组创建人称谓(街道-姓氏+称谓)
    },

    iniLoaded: false,
    showBtn:false,
    showBtnQrcode:false,

    menuList: [
      // {
      //   name: "审核中",
      //   value: 0,
      // },
      {
        name: "海报",
        value: 0,
      },
      {
        name: "小组码",
        value: 1,
      }
    ],

    current: 0, // 海报 poster 小组码 qrcode 

    windowWidth: 0, //屏幕宽度
    windowHeight: 0,//屏幕高度
    boxheight: 0,//内容高度

    qrCode: "https://wanmi-b2b.oss-cn-shanghai.aliyuncs.com/201901310959076784.jpeg", //小程序码https图片路径
    bgImg:"/subpages/group/images/group-bg.jpg",
    photoImg:"",
    codeContent:"【长按识别或扫码入组】",
  },
  lifetimes: {
    attached: async function () {
    },
    detached: function () {
    },
  },
  //computed: {},

  //watch: {},

  methods: {
    onLoad(options) {

      console.log(options.gid)
      let groupId = options.gid
      this.setData({
        groupId
      })

      this.init()
      
    },

    async init(){     
      await doAfterLogin();
      // 获取小组信息
      await this.getGroupDetail()
      // 设置图片各部分 长、宽、起点位置
      await this.createPosition()

      //网络图片转为本地图片，直接显示网络图片的话，真机不显示
      await this.getPhotoImg();
      
    },

    // 获取小组信息
    async getGroupDetail(){
      const { groupId } = this.data;
      let { groupDetail } = this.data;
      const url="resi/group/resigroupcode/groupcodebasicinfo"
      // const url="https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/resi/group/resigroupcode/groupcodebasicinfo"
      const params={
        customerId:app.globalData.customerId,
        gridId:app.globalData.gridId,
        groupId
      }

      const {
        msg,
        data: {
          data: { code, data },
        },
      } = await wxRequestPost(
        url,
        params,
        {
          isQuiet: false,
        }
      );

      if (msg === "success" && code === 0) {
        groupDetail = data
        this.setData({ groupDetail });
      }
    },

    // 设置图片各部分 长、宽、起点位置
    async createPosition(){
      let that = this;
      //获取设备信息高度。计算出其他的高度等
      wx.getSystemInfo({
        success: function (res) {

          const windowWidth = res.windowWidth //设备宽度
          const windowHeight = res.windowHeight //设备高度
          const margin = 20 //整个海报距离左右边距
          //原型比例 650 : 800    13:16
          const boxWidth = windowWidth - margin * 2 //图片宽度
          const boxheight = windowHeight - 40 - 40 - 20 - 20 - 20  //设备高度 - topbar高度 - 按钮高度 - 上边距 - 下边距 - 标题高度
          const boxheight2 = windowHeight - 40 - 40 - 20 - 100 - 20  //设备高度 - topbar高度 - 按钮高度 - 上边距 - 下边距 - 标题高度
          
          //背景图片
          const bgImgX = ( windowWidth - boxWidth ) / 2 //x轴位置
          const bgImgY =  windowWidth * 0.081 //y轴位置
          const bgImgWidth = boxWidth //宽度
          const bgImgHeight = boxheight * 0.27 //高度   279/900

          //头像图片
          const radius = bgImgHeight * 0.25 //半径   55/279
          const photoCenterX = windowWidth / 2
          const photoCenterY = bgImgY + radius + bgImgHeight * 0.1 // 60/279
          const photoWidth = 2 * radius
          const photoHeight = 2 * radius
          const photoStartX = bgImgX + ( boxWidth - photoWidth ) / 2
          const photoStartY = photoCenterY - radius
          
          //小组名称文字
          const groupNameY = photoStartY + photoHeight + bgImgHeight * 0.2 // 19/279

          //小组介绍文字
          const groupStart = 35 //文字距离左边距离
          const groupIntrX = bgImgX + groupStart
          const groupIntrY = bgImgY + bgImgHeight + 30
          const groupIntrWidth = bgImgWidth - groupStart * 2 
          const groupIntrHeight = boxheight * 0.23 // 351/900

          //二维码图片---图1
          const codeWidth = boxheight * 0.28 // 300/900
          const codeHeight = codeWidth //小程序码图片高度 同宽度
          const codeX = bgImgX + ( boxWidth - codeWidth ) / 2 
          const codeY = groupIntrY + groupIntrHeight + boxheight * 0.022 // 20/900   
          
          //二维码描述文字 
          const codeContentY = codeY + codeHeight + boxheight * 0.03 // 21/900  


          //二维码图片---图2
          //const margin2 = 30
          const codeWidth2 = boxheight2 * 0.6 // 480/800
          const codeHeight2 = codeWidth2 //小程序码图片高度 同宽度
          const codeX2 = bgImgX + ( boxWidth - codeWidth2 ) / 2 
          const codeY2 = bgImgY + boxheight2 * 0.09 //    74/800

          //组名 --图2
          const groupNameY2 = codeY2 + codeHeight2 + boxheight2 * 0.15 // 39/800

          //二维码描述文字 --图2
          const codeContentY2 = groupNameY2 + boxheight2 * 0.07 // 20/800
          
          that.setData({
            windowWidth,
            windowHeight,
            boxWidth, //分享图片box宽度
            boxheight, //分享图片box高度
            boxheight2,//小组码画布的高度

            //背景图片
            bgImgWidth,
            bgImgHeight,
            bgImgX, 
            bgImgY, 

            //头像图片
            radius,
            photoCenterX,
            photoCenterY,
            photoWidth,
            photoHeight,
            photoStartX,
            photoStartY,
            
            //小组名称文字
            groupNameY,

            //小组介绍
            groupIntrX,
            groupIntrY,
            groupIntrWidth,
            groupIntrHeight,

            //二维码图片
            codeWidth,
            codeHeight,
            codeX,
            codeY,

            //二维码描述文字
            codeContentY,

            //二维码--图片2
            codeWidth2,
            codeHeight2,
            codeX2,
            codeY2,

            //组名 --图2
            groupNameY2,

            //二维码描述文字 --图2
            codeContentY2
          });
        
        }
      });
      
    },

    // 下载小组头像
    async getPhotoImg() {
      const {
        msg,
        data: { tempFilePath },
      } = await promiseWxApi("downloadFile")({
        url: this.data.groupDetail.groupHeadPhoto,
      });
      if (msg == "success") {
        this.setData({
          photoImg: tempFilePath
        });
        //继续生成小组码图片
        this.getQrcodeImg();
      }
    },
    // 下载小组码
    async getQrcodeImg() {
      const {
        msg,
        data: { tempFilePath },
      } = await promiseWxApi("downloadFile")({
        url: this.data.groupDetail.groupCodeUrl,
      });
      if (msg == "success") {
        this.setData({
          qrCode: tempFilePath
        });
        //生成poster
        this.createPoster();
        this.createQrcode();
      }
    },
    
    // 创建海报
    createPoster () {
      let that = this;
      let ctx = wx.createCanvasContext("canvasPoster");
      that.drawSquare(ctx,that.data.boxheight);    

      //背景图片
      ctx.drawImage(
        that.data.bgImg,
        that.data.bgImgX,
        that.data.bgImgY,
        that.data.bgImgWidth,
        that.data.bgImgHeight
      );

      //头像
      that.drawPhoto(ctx)
    
      //小组名称文字
      ctx.setFontSize(15);
      ctx.setFillStyle("#FFFFFF");
      const groupName = that.data.groupDetail.groupName
      // ctx.font = "normal normal 26px PingFang SC;";
      const groupNameX = that.data.bgImgX + ( that.data.boxWidth - ctx.measureText(groupName).width ) /2 
      ctx.fillText(
        groupName,
        groupNameX,
        that.data.groupNameY
      );

      that.drawIntroduction(ctx)

      // 小组码图片
      ctx.drawImage(
        that.data.qrCode,
        that.data.codeX,
        that.data.codeY,
        that.data.codeWidth,
        that.data.codeHeight
      );
      
      // 小组码文字
      ctx.setFontSize(11);
      ctx.setFillStyle("#999999");
      // ctx.font = "normal normal 26px PingFang SC;";
      const codeContentX = that.data.bgImgX + ( that.data.boxWidth - ctx.measureText(that.data.codeContent).width ) /2 
      ctx.fillText(
        that.data.codeContent,
        codeContentX,
        that.data.codeContentY
      );
      // ctx.draw(); //绘制到canvas
      ctx.draw(true, this.drawPosterEnd(that))
    },

    // 创建二维码
    createQrcode(){
      let that = this;
      let ctx2 = wx.createCanvasContext("canvasQrcode");
      that.drawSquare(ctx2,that.data.boxheight2);   

       // 小组码图片
       ctx2.drawImage(
        that.data.qrCode,
        that.data.codeX2,
        that.data.codeY2,
        that.data.codeWidth2,
        that.data.codeHeight2
      );

      //小组名称文字
      ctx2.setFontSize(17);
      ctx2.setFillStyle("#333333");
      const groupName = that.data.groupDetail.groupName
      // ctx2.font = "normal normal 26px PingFang SC;";
      const groupNameX = that.data.bgImgX + ( that.data.boxWidth - ctx2.measureText(groupName).width ) /2 
      ctx2.fillText(
        groupName,
        groupNameX,
        that.data.groupNameY2
      );
      
      // 小组码文字
      ctx2.setFontSize(13);
      ctx2.setFillStyle("#999999");
      // ctx2.font = "normal normal 26px PingFang SC;";
      const codeContentX = that.data.bgImgX + ( that.data.boxWidth - ctx2.measureText(that.data.codeContent).width ) /2 
      ctx2.fillText(
        that.data.codeContent,
        codeContentX,
        that.data.codeContentY2
      );

      ctx2.draw(true, this.drawQrcodeEnd(that))

    },

    //画矩形，也是整块画布的大小，宽度是屏幕宽度，高度根据内容多少来动态设置。
    drawSquare (ctx,height) {
      let that = this;
      ctx.rect(
        that.data.bgImgX,
        that.data.bgImgY,
        that.data.boxWidth,
        height
        
      );
      ctx.setFillStyle("#fff");
      ctx.fill();
    },

    drawPosterEnd(that){
      console.log("drawend11111111111111111111")
      that.setData({
        iniLoaded: true,
        showBtn:true
      });

    },
    drawQrcodeEnd(that){
      console.log("drawend222222222222222222222")
      that.setData({
        showBtnQrcode:true
      });

    },

    drawPhoto(ctx){
      let that = this
      let rate = that.data.windowWidth / 750;  
      ctx.save();  //保存原有的画图
      ctx.beginPath()  //重新开始
      ctx.arc(  //绘制圆心坐标为(350,132),半径为66的圆
            Math.floor(that.data.photoCenterX), 
            Math.floor(that.data.photoCenterY), 
            Math.floor(that.data.radius), 
            0, 
            2 * Math.PI
      ); 
      ctx.clip()  //裁剪
      ctx.drawImage( //定位在圆圈范围内便会出现
            that.data.photoImg,  //图片暂存路径
            Math.floor(that.data.photoStartX),
            Math.floor(that.data.photoStartY),  
            Math.floor(that.data.photoWidth),  
            Math.floor(that.data.photoHeight)
          ); 
      ctx.restore()
      ctx.draw()
    },

    drawIntroduction(ctx){
      const that = this
      const str = that.data.groupDetail.groupIntroduction;
      // const str = "我是介绍，我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍，我是介绍我是介绍，我是介绍我是介绍我是介绍我是介绍。啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜，"
      const groupIntrWidth = that.data.groupIntrWidth
      ctx.setFontSize(16);
      ctx.setFillStyle("#333333");

      let chr =str.split("");//这个方法是将一个字符串分割成字符串数组

      let temp = "";
      let row = [];

      for (let a = 0; a < chr.length; a++) {
        
        if (ctx.measureText(temp).width < groupIntrWidth) {
          temp += chr[a];
        }
        else {
          a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
          row.push(temp);
          temp = "";
        }
      }
      row.push(temp); 

      //如果数组长度大于num 则截取前num个
      const num = 4
      if (row.length > num) {
        let rowCut = row.slice(0, num);
        let rowPart = rowCut[num-1];
        let test = "";
        let empty = [];


        for (let a = 0; a < rowPart.length; a++) {
          if (ctx.measureText(test).width < groupIntrWidth - 30 ) {
            test += rowPart[a];
          }
          else {
            break;
          }
        }
        empty.push(test);


        let group = empty[0] + "..."//这里只显示两行，超出的用...表示
        rowCut.splice(num-1, 1, group);
        row = rowCut;
      }
      
      for (let b = 0; b < row.length; b++) {
        ctx.fillText(row[b], this.data.groupIntrX, this.data.groupIntrY + b * 22, 300);
      }
      
    },

    //点击保存到相册
    saveImg: function () {

      const canvasId = this.data.current===0 ? 'canvasPoster' : 'canvasQrcode'
      wx.showLoading({
        title: '正在保存',
        mask: true,
      })
      setTimeout(() => {
        wx.canvasToTempFilePath({
          canvasId: canvasId,
          x: this.data.bgImgX,
          y: this.data.bgImgY,
          width: this.data.bgImgWidth,
          height: this.data.current===0 ? this.data.boxheight : this.data.boxheight2,
          success: function (res) {
            wx.hideLoading();
            let tempFilePath = res.tempFilePath;
            wx.saveImageToPhotosAlbum({
              filePath: tempFilePath,
              success(res) {
                // utils.aiCardActionRecord(19);
                wx.showModal({
                  content: '图片已保存到相册',
                  showCancel: false,
                  confirmText: '好的',
                  confirmColor: '#333',
                  success: function (res) {
                    if (res.confirm) { }
                  },
                  fail: function (res) {
                    wx.showToast({
                      title: "保存失败,请重试",
                      icon: 'none',
                      duration: 2000
                    })
                   }
                })
              },
              fail: function (res) {
                wx.showToast({
                  title: "保存失败，请在小程序设置中打开相册使用权限",
                  icon: 'none',
                  duration: 2000
                })
              }
            })
          }
        });
      }, 1000);
    }, 

    handleSwiperChange(e) {
      const {
        detail: { current, source },
      } = e;

      if (source == "touch") {
        this.setData({ current });
      }
    },

    // 点击顶部菜单
    handleShiftMenu(e) {
      const {
        detail: { value },
      } = e;

      this.setData({ current: value });
    },
  },
});