import wx from '../../utils/wx';
import helper from '../../utils/helper';
import util from '../../utils/util';
import Yas from '../../common/yas';
import config from '../../common/config';
import saleModel from '../../models/activity/sale/index';

let systemInfo = wx.getSystemInfoSync();
let scale = systemInfo.windowWidth / 750;
let yas;
let app = getApp();

import {
    getAuthorization
} from '../../common/login';

Page({
    data: {
        id: 0,
        qrType: 0,
        snapWidth: 526 * scale,
        snapHeight: 936 * scale,
        canvasSrc: ''
    },
    onLoad({id, qrType}) {
        yas = new Yas(app);
        this.setData({
            id,
            qrType
        });
    },
    onShow() {
        this.detail(this.data.id);
        yas.pageOpenReport(); // 进入页面后 上报
    },
    detail(id) {
        saleModel.queryLimitActivityDetail({id}).then(res => {
            this.drawCard(res.data);
        });
    },
    drawCard: function(data = {}) {
        return Promise.all([
            wx.getImageInfo({
                src: helper.imgView(data.pic, 324, 202, 1).replace('http://', 'https://')
            }),
            wx.getImageInfo({
              src: `${config.domains.api}/wechat/miniapp/img-check.jpg?param={"id":${this.data.id}}&miniQrType=${this.data.qrType}&miniapp_type=${config.miniapp_type}` // eslint-disable-line
            }).catch(() => {
                return Promise.resolve({});
            })
        ]).then(res => {
            let ctx = wx.createCanvasContext('cardCanvas', this);

            ctx.setFillStyle('white');
            ctx.fillRect(0, 0, this.data.snapWidth, this.data.snapHeight);

            // 线框
            ctx.setStrokeStyle('#e0e0e0');

            let innerRectWidth = 460 * scale;

            let logoWidth = 176 * scale;
            let logoHeight = 60 * scale;
            let rectLeft = (this.data.snapWidth - innerRectWidth) / 2;
            let logoTop = 42 * scale;

            ctx.drawImage(
                '/static/images/logo@3x.png',
                (this.data.snapWidth - logoWidth) / 2,
                logoTop,
                logoWidth,
                logoHeight
            );

            logoTop += logoHeight + 42 * scale;
            ctx.strokeRect(rectLeft, logoTop, innerRectWidth, 605 * scale);

            ctx.setFillStyle('#222222');
            ctx.setFontSize(28 * scale);

            let lines = this.calWrapLines(
                ctx,
                `限定发售 | ${data.limitActivityName}`,
                400 * scale
            );

            this.drawWrapLines(ctx, lines, 66 * scale, 470 * scale, 40 * scale);

            ctx.drawImage(
                '/static/images/snapshoot/clock.png',
                66 * scale,
                604 * scale,
                20 * scale,
                20 * scale
            );

            ctx.setFillStyle('#444444');
            ctx.setFontSize(20 * scale);
            ctx.fillText(`${util.dateFormat(data.onsellTime, 'YYYY年MM月DD日 HH:mm')}发售`, 93 * scale, (603 + 20) * scale);

            ctx.drawImage(
                '/static/images/snapshoot/address.png',
                66 * scale,
                (650 + 1) * scale,
                20 * scale,
                20 * scale
            );
            ctx.setFillStyle('#444444');
            ctx.setFontSize(20 * scale);
            ctx.fillText(data.storeAddress || '', 93 * scale, (650 + 20) * scale);

            ctx.drawImage(
                res[0].path,
                rectLeft, logoTop, innerRectWidth, 282 * scale
            );

            if (res[1].path) {
                ctx.drawImage(
                    res[1].path,
                    rectLeft, 770 * scale, 112 * scale, 112 * scale
                );
            }

            ctx.setFillStyle('#444444');
            ctx.setFontSize(20 * scale);
            ctx.fillText('长按识别图中小程序二维码', 170 * scale, 800 * scale);

            ctx.setFillStyle('#b0b0b0');
            ctx.setFontSize(16 * scale);
            ctx.fillText('进入MKT限定发售频道！全球超罕', 170 * scale, 832 * scale);

            ctx.setFillStyle('#b0b0b0');
            ctx.setFontSize(16 * scale);
            ctx.fillText('潮流尖货一手掌握！！', 170 * scale, 852 * scale);

            ctx.draw(true, () => {
                return wx.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: this.data.snapWidth,
                    height: this.data.snapHeight,
                    destWidth: 750,
                    destHeight: 1332,
                    quality: 1.0,
                    canvasId: 'cardCanvas'
                }).then(dres => {
                    this.setData({
                        canvasSrc: dres.tempFilePath
                    });
                });
            });
        });
    },
    calWrapLines(ctx, text = '', lineMaxW = 400) {
        let lines = [''];
        let charsArr = text.split('');
        let len, lineStr, aftAdd;

        charsArr.forEach(char => {
            len = lines.length;
            lineStr = lines[len - 1];
            aftAdd = (ctx.measureText(lineStr + char)).width;

            if (len < 3) {
                if (aftAdd <= lineMaxW) {
                    lines[len - 1] = lineStr + char;
                } else {
                    lines.push(char);
                }
            } else if (len === 3) {
                aftAdd = (ctx.measureText(lineStr + char + '...')).width;
                if (aftAdd <= lineMaxW) {
                    lines[2] = lineStr + char;
                } else {
                    lines[2] = lineStr + '...';
                    lines.push('');
                }
            }
        });
        return lines.splice(0, 3);
    },
    drawWrapLines(ctx, lines, startX, startY, lineHeight) {
        lines.forEach((line, idx) => {
            ctx.setFillStyle('#444444');
            ctx.font = `${28 * scale}px sans-serif`;
            ctx.fillText(line, startX, startY + lineHeight * idx);
        });
    },
    save: function() {
        return getAuthorization('scope.writePhotosAlbum')
            .then(() => {
                return wx.saveImageToPhotosAlbum({
                    filePath: this.data.canvasSrc
                }).then(() => {
                    wx.showToast({
                        title: '图片已经保存',
                        icon: 'success',
                        duration: 3000
                    });

                    setTimeout(() => {
                        wx.navigateBack();
                    }, 1000);
                });
            });
    },
    cancel() {
        wx.navigateBack();
    }
});