<template>
    <view class="content">
        <view class="While">
            <view class="codeUser" v-if="inviteData.user_info">
                <image class="codeUser-img" :src="inviteData.user_info.avatar || '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
                <view  class="codeUser-name">{{ inviteData.user_info.nickname }}</view>
            </view>
            <view class="codeImg">
                <image class="codeUser-img" :src="inviteData.code" mode="aspectFill"></image>
                <view class="codeUser-text">
                    扫描二维码,注册成功后,即可绑定关系
                </view>
            </view>
        </view>
        <view class="While down">
            长按保存我的推广码
        </view>
        <!-- 海报canvas -->
        <canvas class="canvasImg" canvas-id="qrcodeCard"></canvas>
    </view>
</template>

<script>
    import { invite } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
    			inviteData: ''
    		};
    	},
        onShow() {
            // 获取推广码
            this.inviteInfo();
        },
        methods: {
            // 推广码
            inviteInfo() {
            	invite().then(res => {
                    this.inviteData = res
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 查看图片
            openImg(img) {
                uni.previewImage({
                    current: img,
                    urls:[img]
                })
            },
            
            // 绘图
            dowCode(){
                uni.showLoading({
                    title: '加载中',
                })
                
                // 头像
                let avatarImg = new Promise(success=>{
                    uni.getImageInfo({
                        src     : this.inviteData.user_info.avatar,
                        success : res => {
                            success(res.path)
                        }
                    })
                })
                
                // 下载素材
                let codeImg = new Promise(success => {
                    uni.getImageInfo({
                        src     : this.inviteData.code,
                        success : res => {
                            success(res.path)
                        }
                    })
                })
                
                Promise.all([avatarImg, codeImg]).then(res => {
                    // 绘制海报
                    const ctx = uni.createCanvasContext('qrcodeCard')
                    ctx.save()
                    
                    // 绘制背景
                    ctx.drawImage('/static/imgs/codeBack.png', 0, 0, 375, 452)
                    
                    // 绘制头像
                    ctx.drawImage(res[0], 155, 35, 70, 70)
                    // 绘制二维码
                    ctx.drawImage(res[1], 110, 200, 160, 160)
                    // 文字
                    ctx.setFontSize(16)
                    ctx.setFillStyle("#FFFFFF")
                    ctx.setTextAlign('center')
                    ctx.fillText(this.inviteData.user_info.nickname, 190, 135 , 270)
                    
                    // 文字
                    ctx.setFontSize(15)
                    ctx.setFillStyle("#919191")
                    ctx.setTextAlign('center')
                    ctx.fillText("扫描二维码,注册成功后,即可绑定关系",190, 400)
                    
                    ctx.save();
                    ctx.beginPath(); //开始绘制
                    ctx.arc(70 / 2 + 156, 70 / 2 + 250, 70 / 2, 0, Math.PI * 2, false);
                    ctx.clip();
                    
                    // 保存图片
                    ctx.draw(true, () => {
                        uni.hideLoading()
                        uni.canvasToTempFilePath({
                            canvasId: 'qrcodeCard',
                            x: 0,
                            y: 0,
                            success: res => {
                                this.removeSaveImg()
                            }
                        })
                    })
                    
                }).catch(err=>{
                    uni.showToast({
                        title: '海报下载，请检查网络',
                        icon : 'none'
                    })
                })
            },
        }
    }
</script>

<style lang="scss">
    .content{
    	overflow: hidden;
    	background: #f3f4f6;
        padding: 140rpx 80rpx;
        box-sizing: border-box;
    }
    
    .While {
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        background-color: #FFFFFF;
        box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
        border-radius: 10rpx;
        overflow: hidden;
    }
    
    .codeUser {
        background-color: #6e79ec;
        color: #FFFFFF;
        text-align: center;
        padding: 50rpx 0;
        .codeUser-img {
            background-color: #FFFFFF;
            width: 140rpx;
            height: 140rpx;
            border-radius: 50%;
            margin-bottom: 10rpx;
        }
    }
    .codeImg {
        padding: 60rpx 0;
        text-align: center;
        .codeUser-img {
            width: 360rpx;
            height: 360rpx;
        }
        .codeUser-text {
            padding: 0 100rpx;
            color: #919191;
            line-height: 48rpx;
            box-sizing: border-box;
        }
    }
    
    .down {
        line-height: 90rpx;
        text-align: center;
        color: #54975e;
    }
    
    /* canvas */
    .canvasImg {
        position: absolute;
        left: -1000%;
        bottom: 0;
        height: 452px;
        width: 375px;
        background: #fbf6f0;
    }
</style>
