<template>
    <view class="content">
        <view class="codeContent">
            <view class="codeTop">
                <image class="codeTop-cover" :src="companyInfo.cover" mode="aspectFill"></image>
                <view class="codeTop-title">
                    <view class="codeTop-name">
                        {{companyInfo.name}}
                    </view>
                    <view class="codeTop-tips">
                        邀请你 加入链商星球
                    </view>
                </view>
            </view>
            <view class="codeCode">
                <image class="codeImg-code" :src="companyInfo.code" mode="aspectFill"></image>
                <!-- 先默认死数据 -->
                <!-- <image class="codeImg-code" src="/static/user/wallet-code.png" mode="aspectFill"></image> -->
                <view class="codeImg-text">
                    长按二维码，进行保存
                </view>
            </view>
        </view>
        <!-- <canvas class="codeImg" canvas-id="qrcodeCard"></canvas> -->
    </view>
</template>

<script>
    import { companiesCode } from '@/apis/interfaces/store'
    export default {
    	data() {
    		return {
    			companyInfo : ''
    		}
    	},
        created() {
            companiesCode().then(res=>{
                console.log(res.code)
                this.companyInfo = res
            })  
        },
    	methods: {
    		// 绘制图片
            shareCanvas(e){
                uni.showLoading({
                    title: '加载中',
                })
                
                // 下载头像
                let avatarImg = new Promise(success=>{
                    uni.getImageInfo({
                        src     : this.companyInfo.cover,
                        success : res => {
                            success(res.path)
                        }
                    })
                })
                
                // 下载二维码
                let codeImg = new Promise(success => {
                    uni.getImageInfo({
                        src     : this.companyInfo.code,
                        success : res => {
                            success(res.path)
                        }
                    })
                })
                
                Promise.all([avatarImg, codeImg]).then(res => {
                    // 绘制海报
                    const ctx = uni.createCanvasContext('qrcodeCard')
                    ctx.save()
                    
                    // 绘制背景图片
                    ctx.drawImage('../../static/icons/store_downBack', 0, 0, 375, 603)
                    
                    // 绘制头像
                    ctx.drawImage(res[0], 0, 0, 60, 60)
        
                    // 绘制二维码
                    ctx.drawImage(res[1], 140, 250, 110, 110)
                    
                    // 文字
                    ctx.setFontSize(16)
                    ctx.fillText(this.companyInfo.name, 194, 180 , 270)
                    
                    ctx.setFontSize(16)
                    ctx.fillText('邀请你加入易货平台', 194, 180 , 270)
                    
                    ctx.save();
                    ctx.beginPath(); //开始绘制
                    ctx.arc(50 / 2 + 170, 50 / 2 + 110, 50 / 2, 0, Math.PI * 2, false);
                    ctx.clip();
                    
                    // 保存图片
                    ctx.draw(true, () => {
                        uni.hideLoading()
                        uni.canvasToTempFilePath({
                            canvasId: 'qrcodeCard',
                            x: 0,
                            y: 0,
                            success: res => {
                                uni.saveImageToPhotosAlbum({
                                    filePath: res.tempFilePath,
                                    success : res=>{
                                        if (res.errMsg == "saveImageToPhotosAlbum:ok"){
                                            uni.showToast({
                                                title: '分享海报已保存至相册',
                                                icon : 'none'
                                            })
                                        }else{
                                            uni.hideLoading()
                                        }
                                    },
                                    fail    : err=>{
                                        if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny"){
                                            uni.showModal({
                                                title       : '提示',
                                                content     : '暂未授权小程序写入您的相册，无法存储二维码海报',
                                                confirmColor: '#d82526',
                                                confirmText : '去设置',
                                                success     : res=>{
                                                    if (res.confirm){
                                                        uni.openSetting()
                                                    }
                                                }
                                            })
                                        }
                                    }
                                })
                            }
                        })
                    })
                    
                }).catch(err=>{
                    uni.showToast({
                        title: '海报下载，请检查网络',
                        icon : 'none'
                    })
                })
            }
    	}
    }
</script>

<style lang="scss" scoped>
    .content {
        background: #7c52fc;
        height: 100vh;
        width: 100vw;
    }
    
    .codeContent {
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        .codeTop {
            position: absolute;
            left: 5%;
            top: 240rpx;
            width: 90%;
            background-color: #FFFFFF;
            border-radius: 30rpx;
            padding: 0 50rpx;
            box-sizing: border-box;
            box-shadow: 0 0 40rpx rgba(94,59,201,.5);
            z-index: 2;
            display: flex;
            height: 200rpx;
            .codeTop-cover {
                width: 120rpx;
                height: 120rpx;
                border-radius: 50%;
                margin: 40rpx 30rpx 0 0;
                border: 4rpx solid #FFFFFF;
                box-shadow: 0 5rpx 10rpx rgba(94,59,201,.3);
            }
            .codeTop-title {
                padding-top: 50rpx;
                .codeTop-name {
                    font-weight: 600;
                    font-size: 36rpx;
                    margin-bottom: 10rpx;
                }
                .codeTop-tips {
                    color: $text-gray-m;
                }
            }
        }
        .codeCode {
            background-color: #FFFFFF;
            box-shadow: 0 0 40rpx rgba(27, 0, 111,.4);
            position: absolute;
            padding: 400rpx 0 200rpx;
            left: 10%;
            top: 160rpx;
            width: 80%;
            border-radius: 30rpx;
            z-index: 1;
            text-align: center;
            .codeImg-code {
                width: 360rpx;
                height: 360rpx;
                margin: 0 0 20rpx;
                border: 2px solid #f3f3f3;
                padding: 30rpx;
                box-sizing: border-box;
            }
            .codeImg-text {
                font-size: 32rpx;
                color: $text-color;
            }
        }
    }
    
    .codeBnt {
        background-color: #7c52fc;
        text-align: center;
        border-radius: 10rpx;
        line-height: 90rpx;
        font-weight: 600;
        font-size: $title-size;
        color: #FFFFFF;
        box-shadow: 2px 0 5px rgb(124, 82, 252);
        position: relative;
    }
    
    /* canvas */
    .codeImg {
        position: absolute;
        left: -1000%;
        height: 603px;
        width: 375px;
        background: white;
    }
</style>
