let systemInfo = wx.getSystemInfoSync();
const windowWidth = systemInfo.windowWidth;
const windowHeight = systemInfo.windowHeight;
let screenHeight = systemInfo.screenHeight;

const canvasWidth = 375;
const canvasHeight = 667;

const scale = windowWidth / 375;

screenHeight = windowWidth / (canvasWidth / canvasHeight);

import {wrapperName} from './helper'
import {getGlobalData, getUid, getStorageUserInfo, isLogin, setUserInfo} from '../../utils/index'
// const scale = 0.5;


var Point = function(x, y) {
  return {
    x: x,
    y: y
  };
};

Page({
  /**
   * 组件的初始数据
   */
  data: {
    screenHeight,
    windowWidth,
    windowHeight,
    scale,
    product_name: '',
    default_image: '',
    product_qrCode: '',
    user_name: '',
    product_price: '',
    isAuth: false
  },

  onLoad(options) {
    let product_name = decodeURIComponent(options.product_name ? options.product_name : '');
    let default_image = decodeURIComponent(options.default_image ? options.default_image : '');
    let product_qrCode = decodeURIComponent(options.product_qrCode ? options.product_qrCode : '');
    let product_price = decodeURIComponent(options.product_price ? options.product_price : '');

    let userInfo = getStorageUserInfo()

    this.setData({
      product_name,
      default_image,
      product_qrCode,
      user_name: wrapperName(userInfo.nickName ? userInfo.nickName: 'yo成员'),
      product_price
    });

    this.creatSnapshoot();
    this.getAuth();
  },

  creatSnapshoot() {
    this.creatProductDetailSnapShoot();
  },

  getAuth() {
    let vm = this;

    if (wx.getSetting) {
      wx.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success: function() {
                vm.setData({
                  isAuth: true
                });
              },
              fail: function(error) {
                vm.setData({
                  isAuth: false
                })
              },
            });
          } else {
            vm.setData({
              isAuth: true
            });
          }
        }
      });
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      });
    }
  },

  handleOpenSetting(e) {
    let vm = this;

    if (e.detail.authSetting['scope.writePhotosAlbum']) {
      vm.setData({
        isAuth: true
      });

      vm.saveSnapShoot();
    } else {
      vm.setData({
        isAuth: false
      });
    }
  },

  saveSnapShoot() {
    var that = this;
    var 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
            });
          },
        });
      }
    }, this);
  },

  creatProductDetailSnapShoot() {
    let that = this;
    let pCtx = wx.createCanvasContext('productDetailCanvas', this);

    pCtx.setFillStyle('#08304B');
    pCtx.setStrokeStyle('#08304B')
    pCtx.fillRect(0, 0, windowWidth, screenHeight);

    pCtx.setFillStyle('white')
    pCtx.fillRect(25*scale, 50*scale, 325*scale, 520*scale)

    pCtx.drawImage('./images/Group@2x.png', 0 * scale, 78 * scale, 375 * scale, 48 * scale);

    let defaultImage = this.data.default_image;

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

    // this.drawRoundedRect(this.Rect(25 * scale, 50 * scale, 324 * scale, 520 * scale), 0, pCtx);

    wx.getImageInfo({
      src: defaultImage,
      success: function(res) {
        pCtx.drawImage(res.path, 25 * scale, 140 * scale, 323 * scale, 187 * scale);
        pCtx.draw(true);
      },
      fail: function(e) {
        console.error(e);
      }
    });

    this.drawLongText(this.data.product_name, pCtx, 187.5 * scale, 364 * scale, '#444444', 20, 20);


    pCtx.setFillStyle('#D0021B')
    pCtx.setFontSize(12)
    pCtx.fillText('￥', 128.5*scale,405 * scale )

    pCtx.setFillStyle('#D0021B')
    pCtx.setFontSize(26)
    pCtx.fillText('0',143*scale, 405*scale)

    pCtx.setFillStyle('#b0b0b0');
    // pCtx.setTextAlign('center');
    const fontSize = 18;
    pCtx.setFontSize(fontSize);
    let text = `${this.data.product_price}`;
    pCtx.fillText(text, 205 * scale, 405 * scale);

    let textRect = {width: 70};
    if (pCtx.measureText) {
      textRect = pCtx.measureText(text);
    }

    this.drawLine(pCtx, ((137.5 + 120) * scale) - (30 * scale), (485 - 15/2) * scale,  textRect.width);
    pCtx.setFillStyle('black')
    pCtx.fillRect(47 * scale, 453 * scale, 280 * scale, 90 * scale)
    // this.drawRoundedRect(this.Rect(25 * scale, 562* scale, 280 * scale, 90 * scale), 0, pCtx);
    wx.getImageInfo({
      src: this.data.product_qrCode,
      success: function(res) {
        pCtx.drawImage(res.path,  53 * scale, 458 * scale, 80 * scale, 80 * scale);
        pCtx.draw(true);
      }
    });

    this.drawLongText(`${this.data.user_name}邀请你参与0元抽奖`, pCtx, 137.5 * scale, 485.5 * scale, '#ffffff', 14, 20, 'left');

    pCtx.setFillStyle('#ffffff');
    pCtx.setFontSize(10);
    pCtx.fillText('长按图片识别小程序码抢限定', 137.5 * scale, 512.5 * scale);

    pCtx.drawImage('./images/ufoic@2x.png', 163 * scale, 599 * scale, 50 * scale, 38 * scale);

    pCtx.draw();
  },

  drawRoundedRect: function(rect, r, ctx) {
    ctx.setLineWidth(1)
    ctx.setStrokeStyle('rgba(0,0,0,0.1)');
    ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
    // 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, align = 'center') {
    var linelenght = 20 * scale; // 行间距
    var numberOfLine = 2;
    var text = '';
    var count = 0;
    var lineNumber = 1;
    var stringLenght = longtext.length;
    var newtext = longtext.split('');

    cxt.setFillStyle(color);
    cxt.setFontSize(fontSize * scale);
    cxt.setTextAlign(align);

    for (let i = 0; i <= stringLenght; i++) {
      if (count === numsForLine) {
        if (lineNumber === numberOfLine) {
          let 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;
      }
    }
  },

  drawLine(ctx, xPos, yPos, width) {
    ctx.fillRect(xPos, yPos, width, 2);
  },

  drawBorder(ctx) {
    ctx.setStrokeStyle('red')
    ctx.strokeRect(10, 10, 150, 75)
    ctx.draw(true)
  },

  hidden() {
    wx.navigateBack();
  },

  drawRect: function (ctx, x, y, width, height) {
    ctx.beginPath()
    const lineWidth = 25;
    
    ctx.setLineWidth(lineWidth)
    ctx.moveTo(0, x)
    ctx.lineTo(width, lineWidth/2);

    ctx.moveTo(width - lineWidth/2, 0)
    ctx.lineTo(width - lineWidth/2, height);

    ctx.moveTo(width, height - lineWidth/2)
    ctx.lineTo(0, height - lineWidth/2);

    ctx.moveTo(lineWidth/2, height)
    ctx.lineTo(lineWidth/2, 0);

    ctx.stroke()
  }, 
});