Page({

    /**
     * 页面的初始数据
     */
    data: {
        shareSee: false, // 分享弹出
        inviteCode: '', // 二维码
        currentBgIndex: 0, // 轮播图数量
        styleShow: false, // 是否展示图片查看并选择

        styleType:'', // 二维码 切换 还是背景图
        qrcodes:[],  // 城市二维码数组
        currentCodeIndex:0,// 

        //海报
        loading         : true,
        codeType        : 'city',
        posterDatas     : {}, // 定位
        posterDatasLists: [],// 海报数据返回

        
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
        wx.showLoading({
          title: '请求中...',
        })
    },
    // 切换城市
    changeCity(){
        this.setData({
            styleType:'qcode',
            styleShow:true
        })
    },
    // 轮播图滚动
    swiperChange(e) {
        let index = e.detail.current
        if(this.data.codeType == 'city'){
            wx.setNavigationBarTitle({
                title: `城市体验官(${this.data.posterDatasLists[index].name})`,
            })
            this.setData({
                inviteCode:this.data.posterDatasLists[index].code
            })
        }
        this.setData({
            posterDatas: this.data.posterDatasLists[index],
            currentBgIndex: index
        })
        this.initCanvas()
    },
    // 选择上面图切换轮播
    selectBgIndex(e) {
        let index = e.currentTarget.dataset.index
        if (index != this.data.currentBgIndex) {
            this.setData({
                currentBgIndex: index
            })
        }
    },
    // 切换上面二维码图片
    selectCodeIndex(e) {
        let index = e.currentTarget.dataset.index
        let qrcodes = this.data.qrcodes

        if (index != this.data.currentCodeIndex) {
            this.setData({
                currentCodeIndex: index,
                inviteCode: qrcodes[index].code
            })
            wx.setNavigationBarTitle({
                title: `城市体验官(${qrcodes[index].name})`,
            })
        }
        
    },
    // 展示或者隐藏样式
    changeStyle() {
        this.setData({
            styleShow: !this.data.styleShow,
            styleType:''
        })
    },
    onShow() {
        this.ShareInfo();
    },
    //生成海报初始化
    initCanvas() {
        var that = this;
        var posterDatas = that.data.posterDatas
        const query = wx.createSelectorQuery()
        query.select('#firstCanvas').fields({
                node: true,
                size: true
            },
            function (res) {
                const canvas = res.node
                const ctx = canvas.getContext('2d')
                const dpr = wx.getSystemInfoSync().pixelRatio
                canvas.width = posterDatas.width * dpr
                canvas.height = posterDatas.height * dpr
                ctx.scale(dpr, dpr)
                posterDatas.canvas = canvas
                posterDatas.ctx = ctx
                posterDatas.dpr = dpr
                //存储
                that.setData({
                    posterDatas
                })
            }).exec()
            wx.hideLoading()
    },
   
    /**
     * 小程序码
     */
    ShareInfo() {
        wx.$api.recruit.posters({
            size: 200,
            path: '/pages/recruit/index'
        }).then(res2 => {
            this.setData({
                loading: false,
                qrcodes:res2.data.qrcodes,
                inviteCode: res2.data.qrcodes[0].code,
            })
            wx.setNavigationBarTitle({
                title: `城市体验官(${res2.data.qrcodes[0].name})`,
            })
            wx.getSystemInfo({
                success: (res) => {
                    let windowWidth = res.windowWidth // 当前设备宽
                    let windowHeight = res.windowHeight // 当前设备高
                    this.setData({
                        windowWidth: windowWidth,
                        windowHeight: windowHeight
                    })
                    let lists = [] // 
                    let posters = res2.data.qrcodes
                    posters.map(item => {
                        item.position.newx = windowWidth / item.width * item.position.x.toFixed(2)
                        item.position.newy = windowHeight / item.height * item.position.y.toFixed(2)
                        item.position.newSize = windowWidth / item.width * item.position.size.toFixed(2)
                        item.show = true, // 显示隐藏海报弹窗
                        item.success = false, // 是否成功生成过海报
                        item.canvas = null, // 画布的节点
                        item.ctx = null, // 画布的上下文
                        item.dpr = 1, // 设备的像素比
                        lists.push(item)
                    })
                    this.setData({
                        posterDatasLists: lists,
                        posterDatas: lists[0]
                    })
                    // 数据处理完，初始化 canvas
                    this.initCanvas()
                }
            })
        }).catch(err => {})
    },

    //海报生成  //画布 生成 海报[海报]
    saveImg() {
        var that = this;
        var posterDatas = that.data.posterDatas
        var canvas = posterDatas.canvas
        var ctx = posterDatas.ctx

        wx.showLoading({
            title: '海报生成中',
            mask: true
        });

        //二维码
        var codeImg = new Promise(function (resolve, reject) {
            const photo = canvas.createImage();
            photo.src = that.data.inviteCode;
            photo.onload = (e) => {
                resolve(photo);
            }
        });

        //背景素材
        var backImg = new Promise(function (resolve, reject) {
            const photo = canvas.createImage();
            photo.src = posterDatas.cover;
            photo.onload = (e) => {
                resolve(photo);
            }
        });
        Promise.all([codeImg, backImg]).then(res => {

            //  绘制背景
            ctx.drawImage(res[1], 0, 0, posterDatas.width, posterDatas.height);

            // 绘制[二维码-白色背景]
            ctx.fillStyle = "white";
            ctx.fillRect(posterDatas.position.x + 10, posterDatas.position.y + 10, posterDatas.position.size, posterDatas.position.size);
            ctx.fillRect(posterDatas.position.x + 10, posterDatas.position.y + 10, posterDatas.position.size, posterDatas.position.size);

            // 绘制[二维码]
            ctx.drawImage(res[0], posterDatas.position.x + 10, posterDatas.position.y + 10, posterDatas.position.size, posterDatas.position.size);

            // 关闭loading
            wx.hideLoading();
            //显示海报
            posterDatas.success = true;

            that.setData({
                posterDatas
            })

            this.onDownloadImges();

        }).catch(err => {})
    },

    //下载图片[海报]
    onDownloadImges() {
        wx.showLoading({
            title: '保存中',
            mask: true
        });
        var that = this;
        var posterDatas = that.data.posterDatas;
        if (!posterDatas.pic) {
            that.onCanvasBuildImges();
            return;
        }
        //可写成函数调用 这里不做解释
        wx.saveImageToPhotosAlbum({
            filePath: posterDatas.pic,
            success(res) {
                wx.hideLoading();
                wx.showToast({
                    icon: 'none',
                    title: '已保存到相册，快去分享吧',
                })
                that.setData({
                    posterDatas,
                    shareSee: !that.data.shareSee,
                    styleShow: false
                })
            },
            fail() {
                wx.hideLoading();
                wx.showToast({
                    icon: 'none',
                    title: '进入设置页，开启“保存到相册”',
                })
                that.setData({
                    posterDatas,
                    styleShow: false
                })
                return;
            }
        })
    },

    //画布 转 图片[海报]
    onCanvasBuildImges() {
        var that = this;
        var posterDatas = that.data.posterDatas;
        wx.canvasToTempFilePath({
            canvas: posterDatas.canvas,
            width: posterDatas.width,
            height: posterDatas.height,
            destWidth: posterDatas.width * 3,
            destHeight: posterDatas.height * 3,
            success: res => {
                posterDatas["pic"] = res.tempFilePath;
                that.setData({
                    posterDatas
                })
                that.onDownloadImges();
            },
            fail() {
                wx.hideLoading();
                wx.showToast({
                    icon: 'none',
                    title: 'sorry 保存失败,请稍后再试.',
                })
                return;
            }
        });
    },

    /**
     * 分享弹出
     */
    shareTap() {
        this.setData({
            shareSee: !this.data.shareSee
        })
    }
})