import Taro from '@tarojs/taro'
import event from '../../../utils/event.js'
import {getImgUrl} from '../../../utils';

// 获取系统信息
let systemInfo = Taro.getSystemInfoSync();
const windowWidth = systemInfo.windowWidth;
const windowHeight = systemInfo.windowHeight;
const screenHeight = systemInfo.screenHeight;

let scale = windowWidth / 375;
let HScale = scale

const SHARE_CANCEL_MOMENTS = 'user-canel-share-moments';

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

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

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

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

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

      event.emit(SHARE_CANCEL_MOMENTS);
    },

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

    saveSnapShoot() {
      var that = this;
      var canvasWidth = windowWidth * that.data.ratio;
      var canvasHeight = screenHeight * that.data.ratio;
      var destWidth = windowWidth * 2 * that.data.ratio;
      var destHeight = screenHeight * 2 * that.data.ratio;
      var canvasId = 'productDetailCanvas';

      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: canvasWidth,
        height: canvasHeight,
        destWidth: destWidth,
        destHeight: destHeight,
        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) {
        this.creatProductDetailSnapShoot();
      }
    },

    creatProductDetailSnapShoot() {

      var that = this;
      var product = that.properties.shareData;

      console.log('====================================');
      console.log(product);
      console.log('====================================');

      if(!product){
        return
      }
      let ratio = this.data.ratio
      let snapWidth = this.data.windowWidth * ratio
      let snapHeight = this.data.screenHeight * ratio
      let middle = snapWidth / 2
      scale = snapWidth / 262.5
      HScale = scale
      // console.log(windowWidth,screenHeight,snapWidth,snapHeight,scale)
      let logoHeight = 15.4 * HScale;
      let logoWidth = 78.4 * scale;
      let logoTop = 25.2 * HScale;
      let logoMarginBottom = 21 * HScale;
      let logoLeft = (snapWidth - logoWidth) / 2 //logo左边坐标

      let imgContainerWidth = 227.5 * scale;
      let imgContainerHeight = 303.1 * HScale
      let imgContainerLeft = (snapWidth - imgContainerWidth) / 2 //图片容器左边位置
      let imgContainerTop = logoHeight + logoTop + logoMarginBottom //图片容器顶部位置

      let namePriceBgHeight = 56 * HScale
      let namePriceBgTop = imgContainerTop + (imgContainerHeight - namePriceBgHeight)

      let x = 10 * scale
      let nameTop = imgContainerTop + 255*scale + x
      let priceTop = imgContainerTop + 280* scale + x

      //以下为小程序码相关
      let qrImgMarginTop = 21 * HScale
      let qrCodeTop = imgContainerTop + imgContainerHeight + qrImgMarginTop
      let qrImgWH = 56 * scale

      let tipX = 10 * scale
      let tipLeft = imgContainerLeft + qrImgWH + 13.7 * scale
      let tip1Top = imgContainerTop + imgContainerHeight + 34.2*scale + tipX
      let tip2Top = imgContainerTop + imgContainerHeight + 52.5 * scale + tipX

      var pCtx = wx.createCanvasContext("productDetailCanvas", this);
      pCtx.setFillStyle('white');
      pCtx.fillRect(0, 0, snapWidth, snapHeight);
      /*---------开始新的作画-----------*/
      pCtx.drawImage('../../../assets/images/share-logo@2x.png',logoLeft , logoTop, logoWidth, logoHeight)//画logo
      pCtx.setFillStyle('white');
      pCtx.setStrokeStyle('#e0e0e0')
      // pCtx.fillRect(imgContainerLeft,imgContainerTop,320*scale,430*scale)//图片容器
      pCtx.strokeRect(imgContainerLeft, imgContainerTop, imgContainerWidth , imgContainerHeight)//图片容器

      var defaultImage = getImgUrl(product.default_image, imgContainerWidth, imgContainerHeight);
      if (defaultImage && defaultImage.indexOf("https://") == -1) {
        defaultImage = defaultImage.replace('http://', 'https://');
      }
      product.default_image = defaultImage;
      that.setData({
        shareData: product
      })

      wx.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', 9.8, 30,1);
          pCtx.setTextAlign('center');
          pCtx.setFontSize(16.8 * scale);
          pCtx.fillText(product.product_price, middle, priceTop);
          pCtx.draw(true)
        }
      })      
      // wx.getImageInfo({
      //   src: product.product_qrCode,
      //   success:function(res){
      //     pCtx.drawImage(res.path, imgContainerLeft, qrCodeTop, qrImgWH, qrImgWH);//画小程序码
      //     pCtx.draw(true)

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

    drawLongText(longtext, cxt, begin_width, begin_height, color, fontSize, numsForLine,numberOfLine,
    isCenter = true,lineL = 0) {
      let linelenght = lineL;//行间距
      if (linelenght == 0){
        linelenght = (fontSize + 2) * scale
      }
      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 * scale);
      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;
        }
      }
    }
  }
})