// pages/snapshootShare/snapshootShare.js
let app = getApp();
const windowWidth = app.globalData.systemInfo.windowWidth;
const windowHeight = app.globalData.systemInfo.windowHeight;
const screenHeight = app.globalData.systemInfo.screenHeight;
const scale = windowWidth / 375  ;

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

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

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

  /**
   * 组件的初始数据
   */
  data: {
    screenHeight,
    windowWidth,
    windowHeight,
    scale,
  },

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

    saveToAlbum() {
      var that = this;
      if (wx.getSetting) {
        wx.getSetting({
          success(res) {
            if (!res.authSetting['scope.writePhotosAlbum']) {
              wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success: function (res) {
                  that.saveSnapShoot();
                },
                fail: function (error) {
                  wx.openSetting({
                    success: function (res) {
                    }
                  });
                },
              })
            } else {
              that.saveSnapShoot();
            }
          }
        })
      } else {
        wx.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';
      }

      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: windowWidth,
        height: screenHeight,
        destWidth: windowWidth * 2,
        destHeight: screenHeight * 2,
        quality: 1.0,
        canvasId: canvasId,
        success: function (result) {
          wx.saveImageToPhotosAlbum({
            filePath: result.tempFilePath,
            success(res) {
              wx.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
        if (type === "shop") {
          that.createShopSnapShoot();
        } else if (type === "product") {
          that.creatProductDetailSnapShoot();
        }
      }
    },

    createShopSnapShoot() {
      var that = this;
      var shareData = that.properties.shareData;
      if (shareData) {
        var sCtx = wx.createCanvasContext("shopCanvas", this);
        sCtx.setFillStyle('white');
        sCtx.fillRect(0, 0, windowWidth, screenHeight);
        // console.log(shareData.bannerUrl)

        var bannerUrl = shareData.bannerUrl;
        if (bannerUrl.indexOf("https://") == -1) {
          bannerUrl = bannerUrl.replace('http://', 'https://');
        }
        // console.log(bannerUrl)
        wx.getImageInfo({
          src: bannerUrl,
          success: function (res) {
            sCtx.drawImage(res.path, 0, 0, windowWidth, 117 * scale);
            sCtx.setFillStyle('white');
            sCtx.setShadow(-5, -2, 40, 'darkgray');
            sCtx.fillRect(27 * scale, 88 * scale, 320 * scale, 320 * scale);
            sCtx.setShadow(0, 0, 0, 'white');
            wx.getImageInfo({
              src: shareData.shop_logo,
              success: function (res) {
                sCtx.drawImage(res.path, 127 * scale, 107 * scale, 120 * scale, 120 * scale);
                sCtx.draw(true);
              }
            })
            sCtx.setFontSize(19);
            sCtx.setFillStyle('black');
            sCtx.setTextAlign('center');
            sCtx.fillText(shareData.shop_name, 187.5 * scale, 259 * scale);
            that.drawLongText(shareData.shop_intro_simple, sCtx, 46 * scale, 291 * scale, 'black');
            sCtx.draw(true);
          }
        })
        // console.log(shareData.shop_qrCode)
        wx.getImageInfo({
          src: shareData.shop_qrCode,
          success: function (res) {
            sCtx.drawImage(res.path, 140.5 * scale, 470 * scale, 90 * scale, 90 * scale);
            sCtx.draw(true);
          }
        });
        sCtx.setFillStyle('black');
        sCtx.setTextAlign('center');
        sCtx.setFontSize(11)
        sCtx.fillText('长按扫码查看详情', 187.5 * scale, 596.5 * scale);
        sCtx.drawImage("./images/share-logo@2x.png", 132 * scale, 613 * scale, 111 * scale, 20 * scale);
        sCtx.draw();
      }
    },

    creatProductDetailSnapShoot() {
      var that = this;
      var product = that.properties.shareData;
      var pCtx = wx.createCanvasContext("productDetailCanvas", this);
      pCtx.setFillStyle('white');
      pCtx.fillRect(0, 0, windowWidth, screenHeight);
      pCtx.drawImage('./images/snapshoot_share_bg@2x.png', 0, 0, windowWidth, 186 * scale);
      pCtx.setFillStyle('white');
      pCtx.setShadow(-5, -2, 40, 'darkgray');
      pCtx.fillRect(27 * scale, 60 * scale, 320 * scale, 430 * scale);
      // console.log(product.default_image)

      var defaultImage = product.default_image;
      if (defaultImage.indexOf("https://") == -1) {
        defaultImage = defaultImage.replace('http://', 'https://');
      }
      // console.log(defaultImage)
      wx.getImageInfo({
        src: defaultImage,
        success: function(res) {
          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, 73 * scale, 402 * scale, 'white');
          pCtx.setTextAlign('center');
          pCtx.setFontSize(18 * scale);
          pCtx.fillText(product.product_price, 187.5 * scale, 458.5 * scale);
          pCtx.draw(true);
        } 
      })
      pCtx.setShadow(0, 0, 0, 'white');
      pCtx.drawImage("./images/share-logo@2x.png", 132 * scale, 505 * scale, 111 * scale, 20 * scale);
      // console.log(product.product_qrCode)
      wx.getImageInfo({
        src: product.product_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.drawImage("./images/snapshoot_tip_ic@2x.png", 127 * scale, 645.5 * scale, 9 * scale, 9 * scale);
      pCtx.setFillStyle('#b0b0b0');
      pCtx.setFontSize(9)
      pCtx.fillText('实际价格以页面展示为准', 187.5 * scale, 652.5 * scale);
      pCtx.draw();
    },

    drawLongText(longtext, cxt, begin_width, begin_height, color) {
      var linelenght = 20 * scale;//行间距
      var numsForLine = 20;
      var 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(14 * scale);
      cxt.setTextAlign('left');

      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;
        }
      }
    }
  }
})