/* eslint-disable no-undef */
import Taro, { getStorageSync } from '@tarojs/taro'
import event from '../../../utils/event.js'
import {getImgUrl} from '../../../utils';
import {globalData} from '../../../actions/globalData.js';

// 获取系统信息
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: "_createSnapshoot"
    },

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

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

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

      event.emit(SHARE_CANCEL_MOMENTS);
    },

    onTouchMove: function() {

    },

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

    _createSnapshoot: function(newValue, oldValue) {
      if(newValue) {
        this.creatProductDetailSnapShoot();
      }
    },

    creatProductDetailSnapShoot() {
      var that = this;
      const app = getApp() || {};
      let userInfo = wx.getStorageSync('userInfo');
      var product = that.properties.shareData;
      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 / 375
      HScale = scale
      // console.log(windowWidth,screenHeight,snapWidth,snapHeight,scale)
      let logoHeight = 50 * HScale;
      let logoWidth = 50 * scale;
      let logoTop = 38 * HScale;
      let logoMarginBottom = 25 * HScale;
      let logoLeft = 30 * scale //logo左边坐标

      let nameTop = 60 * HScale;
      let nameLeft = logoLeft + logoWidth + 15 * scale;

      let tipsTop = nameTop + 20 * scale;

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

      let productNameTop = imgContainerTop + imgContainerHeight + 20 * scale

      //以下为小程序码相关
      let qrImgMarginTop = 20 * HScale
      let qrCodeTop = imgContainerTop + imgtextContainerHeight + qrImgMarginTop
      let qrImgWH = 70 * scale
      let qrCodeLeft = (snapWidth - qrImgWH)/2

      let tipTop = qrCodeTop + qrImgWH + 20 * scale

      var pCtx = wx.createCanvasContext("productDetailCanvas", this);
      pCtx.setFillStyle('white');
      pCtx.fillRect(0, 0, snapWidth, snapHeight);
      pCtx.setStrokeStyle('#e0e0e0');

      /*---------开始新的作画-----------*/
      if (userInfo) {
        //圆形头像
        let avatarUrl = getImgUrl(userInfo.avatarUrl, logoWidth, logoHeight);
        if (avatarUrl) {
          userInfo.avatarUrl = avatarUrl;

          wx.getImageInfo({
            src: avatarUrl,
            success:function(res){
              pCtx.beginPath();
              pCtx.arc(logoLeft+logoWidth/2, logoTop+logoHeight/2, logoWidth/2, 0, 2*Math.PI, false)
              pCtx.stroke();//画空心圆
              pCtx.closePath();
              pCtx.save();
              pCtx.clip(); //裁剪上面的圆形
              pCtx.drawImage(res.path, logoLeft , logoTop, logoWidth, logoHeight)
              pCtx.restore(); //恢复之前保存的绘图上下文，以便可以继续绘制
            }
          })
        }
        
        //昵称
        if (userInfo.nickName) {
          pCtx.setFillStyle('#000')
          pCtx.setFontSize(20*scale)
          pCtx.fillText(userInfo.nickName, nameLeft, nameTop)
        }
      }
      
      pCtx.setFillStyle('#000')
      pCtx.setFontSize(12*scale)
      pCtx.fillText('发现一件超棒的潮流好物分享给你！', nameLeft, tipsTop)

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

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

        wx.getImageInfo({
          src: defaultImage,
          success:function(res){
            pCtx.drawImage(res.path, imgContainerLeft, imgContainerTop, imgContainerWidth, imgContainerHeight)
  
            that.drawLongText(product.product_name, pCtx, middle, productNameTop, 'black', 20, 25, 2);
            pCtx.setTextAlign('center');
            pCtx.setFontSize(20 * scale);
            pCtx.draw(true)
          }
        })
      }

      that.setData({
        shareData: product,
        userInfo
      })

      if (product.product_qrCode) {
        wx.getImageInfo({
          src: product.product_qrCode,
          success:function(res){
            pCtx.drawImage(res.path, qrCodeLeft, qrCodeTop, qrImgWH, qrImgWH);//画小程序码
            pCtx.draw(true)
          }
        })
      }
      
      pCtx.setFillStyle('#999999')
      pCtx.setFontSize(12*scale)
      pCtx.setTextAlign('center')
      pCtx.fillText('扫一扫，发现你中意的潮流好物！', middle, tipTop)
      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;
        }
      }
    }
  }
})