<template>
    <view class="content">
        <view class="codeContent">
            <!-- <image class="codeContent-back" src="../../static/icons/store_codeBack.png" mode="widthFix"></image> -->
            <image class="codeContent-cont" src="../../static/icons/store_contBack.png" mode="widthFix"></image>
            <view class="textContent">
                <view class="company">
                    <image class="company-logo" :src="companyInfo.cover" mode="aspectFill"></image>
                    <view class="company-cont">
                        <view class="nowrap company-name">{{companyInfo.name}}</view>
                        <view class="company-tips">易货平台</view>
                    </view>
                </view>
                <view class="code">
                    <image class="code-img" :src="companyInfo.code" mode="aspectFit"></image>
                    <!-- <view class="code-text">简单扫一扫，即可进入平台</view> -->
                </view>
                 <!-- @click="shareCanvas" -->
                <view class="codeBnt">
                    扫码推广
                </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=>{
                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;
        width: 100%;
        height: 100vh;
        .codeContent-back {
            width: 100%;
            height: 100%;
            z-index: 1;
            position: absolute;
        }
        .codeContent-cont {
            left: 5%;
            width: 90%;
            top: 100px;
            z-index: 2;
            position: absolute;
        }
        .codeContent-tips {
            position: absolute;
            top: 0;
            right: 20rpx;
            width: 200rpx;
            z-index: 2;
        }
        .textContent {
            position: absolute;
            padding: 20rpx 20rpx 0 40rpx;
            box-sizing: border-box;
            width: 70%;
            z-index: 3;
            left: 15%;
            right: 15%;
            top: 140px;
        }
        .company {
            width: 100%;
            .company-logo {
                width: 120rpx;
                height: 120rpx;
                border-radius: 50%;
            }
            .company-cont {
                position: absolute;
                width: 100%;
                height: 230rpx;
                left: 0;
                top: 0;
                padding: 20rpx 20rpx 30rpx 210rpx;
                font-size: $title-size;
                .company-name {
                    font-weight: 600;
                    margin: 10rpx 0;
                }
                .company-tips {
                    font-size: 26rpx;
                    color: #787878;
                }
            }
        }
        .code {
            text-align: center;
            width: 100%;
            box-sizing: border-box;
            margin-bottom: $margin;
            .code-img {
                width: 90%;
            }
            .code-text {
                color: #787878;
                margin-top: $margin - 10;
                font-size: $title-size;
            }
        }
    }
    
    .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>
