// pages/snapshootShare/snapshootShare.js
// import {
//   logEvent,
//   YB_INVITE_PICTURE_SAVE_C
// } from '../../libs/analytics.js'
let app = getApp();
const screenHeight = app.globalData.systemInfo.screenHeight;
const snapFixedWidth = 730;
const snapFixedHeight = 1314;

const windowWidth = app.globalData.systemInfo.windowWidth;
let scale = windowWidth / 375;
var Point = function (x, y) {
  return { x: x, y: y };
}; 

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isShow: {
      type: Boolean,
      value: false,
      observer: "_creatSnapshoot"
    },

    sourceType: {
      type: String,
      value: ""
    },

    shareData: {
      type: Object,
      value: null,
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    screenHeight: app.globalData.systemInfo.screenHeight,
    snapFixedWidth,
    snapFixedHeight
  },

  /**
   * 组件的方法列表
   */
  methods: {
    hidden() {
      this.triggerEvent("hiddenSheet");
    },

    saveToAlbum() {
      var that = this;
      if (tt.getSetting) {
        tt.getSetting({
          success(res) {
            if (!res.authSetting['scope.writePhotosAlbum']) {
              tt.authorize({
                scope: 'scope.writePhotosAlbum',
                success: function (res) {
                  that.saveSnapShoot();
                },
                fail: function (error) {
                  if (res.authSetting['scope.writePhotosAlbum'] == false) {
                    tt.showModal({
                      title: '',
                      content: '需要打开小程序的设置，重新授权访问您的系统相册',
                      confirmText: "去开启",
                      confirmColor: "#000000",
                      success: function (res) {
                        if (res.confirm) {
                          tt.openSetting({
                            success: function (res) {
                            }
                          });
                        }
                      }
                    });
                  }
                },
              })
            } else {
              that.saveSnapShoot();
            }
          }
        })
      } else {
        tt.showModal({
          title: '提示',
          content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
      }
      
          
    },

    saveSnapShoot() {
      var that = this
      var source = that.properties.sourceType;
      var canvasId = '';
      if (source === 'shop') {
        canvasId = 'shopCanvas';
      } else if (source === 'product') {
        canvasId = 'productDetailCanvas';
      } else if (source === 'product_union') {
        canvasId = 'product_unionCanvas';
      } else if (source === 'list_union') {
        canvasId = 'list_unionCanvas';
      } else if (source === 'guang') {
        canvasId = 'guangCanvas';
      }

      tt.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: snapFixedWidth,
        height: snapFixedHeight,
        destWidth: snapFixedWidth,
        destHeight: snapFixedHeight,
        quality: 1.0,
        canvasId: canvasId,
        success: function (result) {
          tt.saveImageToPhotosAlbum({
            filePath: result.tempFilePath,
            success(res) {
              let shareData = that.properties.shareData;
              // let analyticsParams = {
              //   PAGE_NAME: shareData.page_name
              // };
              // var type = that.properties.sourceType
              // if (type === "shop") {
              //   analyticsParams.SHOP_ID = shareData.shop_id
              // } else if (type === "product") {
              //   analyticsParams.PRD_SKN = shareData.product_skn
              // } else if (type === "product_union") {
              //   analyticsParams.PRD_SKN = shareData.product_skn
              //   analyticsParams.IS_UNION = 1;
              // }else if (type === "list_union") {
              //   analyticsParams.IS_UNION = 1;
              //   if (shareData.keyword){
              //     analyticsParams.KEY_WORD = shareData.keyword;
              //   }
              //   if (shareData.categoryID) {
              //     analyticsParams.CATE_ID = shareData.categoryID;
              //   }
              // } else if (type === 'guang') {
              //   analyticsParams.ARTICLE_ID = shareData.id;
              // }

              // logEvent(YB_INVITE_PICTURE_SAVE_C, analyticsParams);
              tt.showToast({
                title:
                '保存成功',
                icon:
                'success',
                duration:
                2000
              })
              that.hidden();
            },
            fail: function (err) {
              that.hidden();
            }
          }, );
        },
        fail: function (error) {
          that.hidden();
        },
        complete: function (res) {
          that.hidden();
        }
      }, this);  
    },

    _creatSnapshoot: function(newValue, oldValue) {
      if(newValue) {
        var that = this;
        var type = that.properties.sourceType
        // console.log(type)
        if (type === "shop") {
          that.createShopSnapShoot();
        } else if (type === "product") {
          that.creatProductDetailSnapShoot();
        } else if (type === "product_union") {
          that.creatProductUnionSnapShoot();
        } else if (type === "list_union") {
          that.creatListUnionSnapShoot();
        } else if (type === 'guang') {
          that.createGuangSnapShoot();
        }
      }
    },

    creatProductUnionSnapShoot () {
      var that = this;
      var product = that.properties.shareData;
      var pCtx = tt.createCanvasContext("product_unionCanvas", this);
      pCtx.setFillStyle('white');
      pCtx.fillRect(0, 0, windowWidth, screenHeight);
      pCtx.drawImage('https://cdn.yoho.cn/uploads/1544610641079/snapshoot_share_bg@2x.png', 0, 0, windowWidth, 186 * scale);
      pCtx.setFillStyle('white');

      var defaultImage = product.default_image;
      if (defaultImage && defaultImage.indexOf("https://") == -1) {
        defaultImage = defaultImage.replace('http://', 'https://');
      }
      // console.log(defaultImage)
      tt.getImageInfo({
        src: defaultImage,
        success: function (res) {
          pCtx.save()
          pCtx.beginPath()
          var rect = that.Rect(27 * scale, 60 * scale, 320 * scale, 430 * scale);
          that.drawRoundedRect(rect, 25, pCtx);
          pCtx.clip()
          pCtx.drawImage(res.path, 27 * scale, 60 * scale, 320 * scale, 430 * scale);
          pCtx.setFillStyle("rgba(0,0,0,0.8)");
          pCtx.fillRect(27 * scale, 370 * scale, 320 * scale, 120 * scale);
          pCtx.setFillStyle('white');
          that.drawLongText(product.product_name, pCtx, 187.5 * scale, 402 * scale, 'white',14,20);
          pCtx.setTextAlign('center');
          pCtx.setFontSize(24 * scale);
          pCtx.fillText(product.product_price, 187.5 * scale, 458.5 * scale);
          pCtx.draw(true);
          pCtx.restore()
          pCtx.draw(true)
        }
      })
      pCtx.setShadow(-5, -2, 40, 'darkgray');
      pCtx.setShadow(0, 0, 0, 'white');
      pCtx.drawImage("./images/share-logo@2x.png", 132 * scale, 505 * scale, 111 * scale, 20 * scale);
      // console.log(product.union_qrCode)
      tt.getImageInfo({
        src: product.union_qrCode,
        success: function (res) {
          pCtx.drawImage(res.path, 148.5 * scale, 539.5 * scale, 78 * scale, 78 * scale);
          pCtx.draw(true);
        }
      })
      pCtx.setFillStyle('black');
      pCtx.setTextAlign('center');
      pCtx.setFontSize(11)
      pCtx.fillText('长按扫码查看详情', 187.5 * scale, 632.5 * scale);
      pCtx.setFillStyle('#b0b0b0');
      pCtx.setFontSize(9)
      pCtx.fillText('或者在各大应用市场搜索Yoho!Buy有货 下载App', 187.5 * scale, 652.5 * scale);
      pCtx.draw();
    },

    creatListUnionSnapShoot() {
      var that = this;
      var product = that.properties.shareData;
      if (!product) {
        return
      }
      let snapWidth = snapFixedWidth
      let snapHeight = snapFixedHeight
      let middle = snapWidth / 2

      let logoHeight = 44;
      let logoWidth = 224;
      let logoTop = 70;
      let logoMarginBottom = 40;
      let logoLeft = (snapWidth - logoWidth) / 2;

      let imgContainerWidth = 620;
      let imgContainerHeight = 840;
      let imgContainerLeft = (snapWidth - imgContainerWidth) / 2;   //图片容器左边位置
      let imgContainerTop = logoHeight + logoTop + logoMarginBottom; //图片容器顶部位置

      let namePriceBgHeight = 150;
      let namePriceBgTop = imgContainerTop + (imgContainerHeight - namePriceBgHeight);


      let nameTop = imgContainerTop + 750;
      let priceTop = imgContainerTop + 810;

      //以下为小程序码相关
      let qrImgMarginTop = 56;
      let qrCodeTop = imgContainerTop + imgContainerHeight + qrImgMarginTop;
      let qrImgWH = 160;

      let tipLeft = imgContainerLeft + qrImgWH + 48;
      let tip1Top = imgContainerTop + imgContainerHeight + 120;
      let tip2Top = imgContainerTop + imgContainerHeight + 160;

      var pCtx = tt.createCanvasContext("list_unionCanvas", this);
      pCtx.setFillStyle('white');
      pCtx.fillRect(0, 0, snapWidth, snapHeight);
      /*---------开始新的作画-----------*/
      pCtx.drawImage("./images/share-logo@2x.png", logoLeft, logoTop, logoWidth, logoHeight);//画logo
      pCtx.setFillStyle('white');
      pCtx.setStrokeStyle('#e0e0e0');

      pCtx.strokeRect(imgContainerLeft, imgContainerTop, imgContainerWidth, imgContainerHeight);//图片容器
      var defaultImage = product.default_image;
      if (defaultImage && defaultImage.indexOf("https://") == -1) {
        defaultImage = defaultImage.replace('http://', 'https://');
      }
      tt.getImageInfo({
        src: defaultImage,
        success: function (res) {
          pCtx.drawImage(res.path, imgContainerLeft, imgContainerTop, imgContainerWidth, imgContainerHeight);
          pCtx.setFillStyle("rgba(34,34,34,0.8)");//画名称价格背景
          pCtx.fillRect(imgContainerLeft, namePriceBgTop, imgContainerWidth, namePriceBgHeight);
          pCtx.setFillStyle('white');
          that.drawLongText(product.title, pCtx, middle, nameTop, 'white', 30, 26, 1);
          pCtx.setTextAlign('center');
          pCtx.setFontSize(24);
          pCtx.fillText(product.content, middle, priceTop);

          pCtx.draw(true);
        }
      })
      tt.getImageInfo({
        src: product.union_qrCode,
        success: function (res) {
          pCtx.drawImage(res.path, imgContainerLeft, qrCodeTop, qrImgWH, qrImgWH);//画小程序码
          pCtx.draw(true)

        }
      })
      pCtx.setFillStyle('#444444')
      pCtx.setFontSize(28)

      pCtx.fillText('长按扫码查看详情直接购买', tipLeft, tip1Top)
      that.drawLongText('或者在各大应用市场搜索Yoho!Buy有货下载App',pCtx,tipLeft,tip2Top,'#b0b0b0',24,20,2,false)
      pCtx.draw()

      /*---------结束新的作画-----------*/

    },

    createShopSnapShoot() {
      var that = this;
      var shareData = that.properties.shareData;
      if (shareData) {
        let snapWidth = snapFixedWidth
        let snapHeight = snapFixedHeight
        let middle = snapWidth / 2

        let logoHeight = 44;
        let logoWidth = 224;
        let logoTop = 70; 
        let logoMarginBottom = 40;
        let logoLeft =(snapWidth - logoWidth) / 2;

        let bannerWidth = 640
        let bannerHeight = 200
        let bannerLeft = (snapWidth - bannerWidth) / 2
        let bannerTop = logoHeight + logoTop + logoMarginBottom
        let bannerMarginBottom = 70

        let shopNameTop = bannerTop + bannerHeight + bannerMarginBottom
        let shopNameLeft = middle;
        let shopNameFont = 32
        let shopNameMarginBottom = 40

        let shopIntroTop = shopNameTop + shopNameFont + shopNameMarginBottom
        let shopIntroFont = 28
        let shopIntroLines = shareData.shop_intro_simple.length / 20+1 > 5 ? 5 : shareData.shop_intro_simple.length / 20+1
        let shopIntroMarginBottom = 70

        let shopLogoWidth = 230
        let shopLogoHeight = 230
        let shopLogoTop = shopIntroTop + 28 * shopIntroLines + shopIntroMarginBottom
        let shopLogoLeft = (snapWidth - shopLogoWidth) / 2
        let shopLogoMarginBottom = 60

        let containerHeight = shopLogoTop + shopLogoHeight + shopLogoMarginBottom - bannerTop;
        let containerWidth = bannerWidth;
        let containerMarginBottom = 64

        let qrImgWidth = 150;
        let qrImgLeft = bannerLeft;
        let qrImagTop = bannerTop + containerHeight + containerMarginBottom

        let tipTextTop = qrImagTop + qrImgWidth/3;
        let tipTextLeft = qrImgLeft + qrImgWidth + 50

        var sCtx = tt.createCanvasContext("shopCanvas", this);
        sCtx.setFillStyle('white');
        sCtx.fillRect(0, 0, snapWidth, snapHeight);


        sCtx.drawImage('./images/share-logo@2x.png',logoLeft,logoTop,logoWidth,logoHeight)
        sCtx.setFillStyle('white')
        sCtx.setStrokeStyle("#e0e0e0")
        sCtx.strokeRect(bannerLeft,bannerTop,containerWidth,containerHeight)
        var bannerUrl = shareData.bannerUrl;
        if (bannerUrl && bannerUrl.indexOf("https://") == -1) {
          bannerUrl = bannerUrl.replace('http://', 'https://');
        }
        tt.getImageInfo({
          src: bannerUrl,
          success:function(res){
            sCtx.drawImage(res.path,bannerLeft,bannerTop,bannerWidth,bannerHeight)
            sCtx.setFillStyle('#444444')
            sCtx.setTextAlign('center')
            sCtx.setFontSize(shopNameFont)
            sCtx.fillText(shareData.shop_name,shopNameLeft,shopNameTop)
            that.drawLongText(shareData.shop_intro_simple, sCtx, shopNameLeft, shopIntroTop, '#444444', shopIntroFont, 20,5,true,44);
            sCtx.draw(true)
          }
        })
        var shopLogo = shareData.shop_logo;
        if (shopLogo && shopLogo.indexOf("https://") == -1) {
          shopLogo = shopLogo.replace('http://', 'https://');
        }
        tt.getImageInfo({
          src: shopLogo,
          success:function(res){
            sCtx.drawImage(res.path, shopLogoLeft, shopLogoTop, shopLogoWidth, shopLogoHeight)
          }
        })
        let tips2 = '或者在各大应用市场搜索Yoho!Buy有货下载App'
        tt.getImageInfo({
          src: shareData.shop_qrCode,
          success:function(res){
            sCtx.drawImage(res.path,qrImgLeft,qrImagTop,qrImgWidth,qrImgWidth)
            sCtx.draw(true)

          }
        })
        sCtx.setFillStyle('#444444')
        sCtx.setFontSize(28)
        sCtx.fillText('长按扫码查看详情', tipTextLeft, tipTextTop)
        that.drawLongText(tips2, sCtx, tipTextLeft, tipTextTop + 50, '#b0b0b0', 24, 22, 2, false);
        sCtx.draw()
       }
    },

    creatProductDetailSnapShoot() {
      var that = this;
      var product = that.properties.shareData;
      if(!product){
        return
      }

      let snapWidth = snapFixedWidth;
      let snapHeight = snapFixedHeight;
      let middle = snapWidth / 2;

      let logoHeight = 44;
      let logoWidth = 224;
      let logoTop = 80;
      let logoMarginBottom = 70;
      let logoLeft = (snapWidth - logoWidth) / 2; //logo左边坐标

      let imgContainerWidth = 620;
      let imgContainerHeight = 840;
      let imgContainerLeft = (snapWidth - imgContainerWidth) / 2; //图片容器左边位置
      let imgContainerTop = logoHeight + logoTop + logoMarginBottom; //图片容器顶部位置

      let namePriceBgHeight = 150;
      let namePriceBgTop = imgContainerTop + (imgContainerHeight - namePriceBgHeight);


      let nameTop = imgContainerTop + 750;
      let priceTop = imgContainerTop + 810;

      //以下为小程序码相关
      let qrImgMarginTop = 56;
      let qrCodeTop = imgContainerTop + imgContainerHeight + qrImgMarginTop;
      let qrImgWH = 160;

      let tipLeft = imgContainerLeft + qrImgWH + 48;
      let tip1Top = imgContainerTop + imgContainerHeight + 120;
      let tip2Top = imgContainerTop + imgContainerHeight + 160;

      var pCtx = tt.createCanvasContext("productDetailCanvas", this);
      pCtx.setFillStyle('white');
      pCtx.fillRect(0, 0, snapWidth, snapHeight);
      /*---------开始新的作画-----------*/
      pCtx.drawImage("./images/share-logo@2x.png",logoLeft , logoTop, logoWidth, logoHeight);//画logo
      pCtx.setFillStyle('white');
      pCtx.setStrokeStyle('#e0e0e0');

      pCtx.strokeRect(imgContainerLeft, imgContainerTop, imgContainerWidth , imgContainerHeight);//图片容器

      var defaultImage = product.default_image;
      if (defaultImage && defaultImage.indexOf("https://") == -1) {
        defaultImage = defaultImage.replace('http://', 'https://');
      }
      tt.getImageInfo({
        src: defaultImage,
        success:function(res){
          pCtx.drawImage(res.path, imgContainerLeft, imgContainerTop, imgContainerWidth, imgContainerHeight);
          pCtx.setFillStyle("rgba(34,34,34,0.8)");//画名称价格背景
          pCtx.fillRect(imgContainerLeft, namePriceBgTop, imgContainerWidth, namePriceBgHeight);
          pCtx.setFillStyle('white');
          that.drawLongText(product.product_name, pCtx, middle, nameTop, 'white', 28, 30,1);
          pCtx.setTextAlign('center');
          pCtx.setFontSize(40);
          pCtx.fillText(product.product_price, middle, priceTop);
          pCtx.draw(true);
        }
      })      
      tt.getImageInfo({
        src: product.product_qrCode,
        success:function(res){
          pCtx.drawImage(res.path, imgContainerLeft, qrCodeTop, qrImgWH, qrImgWH);//画小程序码
          pCtx.draw(true)

        }
      })
      pCtx.setFillStyle('#444444');
      pCtx.setFontSize(28);

      pCtx.fillText('长按扫码查看详情',tipLeft,tip1Top);
      pCtx.setFillStyle('#b0b0b0');
      pCtx.setFontSize(24);
      pCtx.fillText('实际价格以页面展示为准', tipLeft, tip2Top);
      pCtx.draw();
      /*---------结束新的作画-----------*/  
    },

    createGuangSnapShoot() {  
      let that = this;
      let guang = that.properties.shareData;

      if(!guang){
        return
      }

      let snapWidth = snapFixedWidth
      let snapHeight = snapFixedHeight
      let middle = snapWidth / 2
      let pCtx = tt.createCanvasContext("guangCanvas", this);
      let defaultImage = guang.cover_image;
      let metrics = 328;
      pCtx.setFillStyle('white');
      pCtx.fillRect(0, 0, snapWidth, snapHeight);
      pCtx.setStrokeStyle('#222')
      pCtx.setLineWidth(6)
      pCtx.strokeRect(3, 3, snapWidth-6, snapHeight-6)
      /*---------开始新的作画-----------*/
      pCtx.drawImage("./images/share-logo@2x.png", 248, 70, 224, 44)//画logo

      if (defaultImage && defaultImage.indexOf("https://") == -1) {
        defaultImage = defaultImage.replace('http://', 'https://');
      }

      if (guang.tag) {
        metrics = guang.tag.length * 36 + 10
      }

      tt.getImageInfo({
        src: defaultImage,
        success:function(res){
          pCtx.drawImage(res.path, 40, 176, 650, 404)
          pCtx.setStrokeStyle('#222')
          pCtx.setLineWidth(2)
          pCtx.strokeRect(40, 176, 650, 866)
          pCtx.setFillStyle('#B0B0B0')
          pCtx.font = 'normal normal 28px PingFang-SC-Regular'
          pCtx.fillText('潮流资讯，新鲜贩售，Yoho!Buy有货【逛】不停', 70, 660, 600)
          pCtx.font = 'normal bold 40px PingFang-SC-Regular'
          that.drawLongText(guang.article_title, pCtx, middle, 730, '#222', 40, 13, 2, true, 56)
          pCtx.font = 'normal normal 28px PingFang-SC-Regular'
          if (pCtx.measureText) {
            metrics = pCtx.measureText(`#${guang.tag}#`).width + 80
          }
          pCtx.fillRect(middle - metrics / 2, 940, metrics, 50)
          pCtx.setFillStyle('#fff')
          pCtx.fillText(`#${guang.tag}#`, middle, 976)
          pCtx.setTextAlign('center')
          pCtx.draw(true)
        }
      })

      tt.getImageInfo({
        src: guang.guang_qrCode,
        success:function(res){
          pCtx.drawImage(res.path, 40, 1090, 170, 170);//画小程序码
          pCtx.draw(true)
        }
      })

      pCtx.font = 'normal normal 28px PingFang-SC-Regular'
      pCtx.setFillStyle('#444')
      pCtx.fillText('长按扫码查看详情',230,1144)
      pCtx.font = 'normal normal 24px PingFang-SC-Regular'
      that.drawLongText('或者在各大应用市场搜索Yoho!Buy有货 下载App', pCtx, 230, 1192, '#B0B0B0', 24, 21, 2, false, 36)
      pCtx.draw()
      /*---------结束新的作画-----------*/ 
    },

    drawRoundedRect: function (rect, r, ctx) {  
      ctx.setStrokeStyle("rgba(0,0,0,0)")
      let angel = Math.PI / 2
      var ptA = Point(rect.x + r, rect.y);  
      var ptB = Point(rect.x + rect.width, rect.y);  
      var ptC = Point(rect.x + rect.width, rect.y + rect.height);  
      var ptD = Point(rect.x, rect.y + rect.height);  
      var ptE = Point(rect.x, rect.y);  
      // console.log('zjj',ptA,ptB,ptC,ptD,ptE)
      ctx.beginPath();  

      // ctx.moveTo(ptA.x, ptA.y);  
      // ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r);  
      // ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r);  
      // ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, r);  
      // ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r);  

      ctx.moveTo(ptA.x, ptA.y);
      ctx.lineTo(ptB.x-r,ptB.y)
      ctx.arc(ptB.x-r,ptB.y+r,r,-angel,0)
      ctx.lineTo(ptB.x , ptC.y - r)
      ctx.arc(ptB.x-r,ptC.y-r,r,0,angel)
      ctx.lineTo(ptD.x+r,ptD.y)
      ctx.arc(ptD.x+r,ptD.y-r,r,angel,2*angel)
      ctx.lineTo(ptE.x,ptE.y+r)
      ctx.arc(ptE.x+r,ptE.y+r,r,2*angel,3*angel)
  

      ctx.stroke();  
    }, 

    Rect: function (x, y, w, h) {  
      return {x: x, y: y, width: w, height: h };  
    }, 

    drawLongText(longtext, cxt, begin_width, begin_height, color, fontSize, numsForLine,numberOfLine,
    isCenter = true,lineL = 0) {
      let linelenght = lineL;//行间距
      if (linelenght == 0){
        linelenght = fontSize + 2
      }
      if(!numberOfLine){
        numberOfLine = 2;
      }
      var text = "";
      var count = 0;
      var lineNumber = 1;
      var begin_width = begin_width;
      var begin_height = begin_height;
      var stringLenght = longtext.length;
      var newtext = longtext.split("");

      cxt.setFillStyle(color);
      cxt.setFontSize(fontSize);
      if(isCenter){
        cxt.setTextAlign('center');
      }

      for (var i = 0; i <= stringLenght; i++) {
        if (count == numsForLine) {
          if (lineNumber === numberOfLine) {
            var t = text + '...';
            cxt.fillText(t, begin_width, begin_height);
          } else {
            cxt.fillText(text, begin_width, begin_height);
          }
          begin_height = begin_height + linelenght;
          text = "";
          count = 0;
          lineNumber ++;
        }
        if (i == stringLenght) {
            cxt.fillText(text, begin_width, begin_height);
        }
        text = text + newtext[0];
        count++;
        newtext.shift();
        if(lineNumber > numberOfLine){
          break;
        }
      }
    }
  }
})