<template>
    <view>
        <view class="codeTitle">
            <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/userGoods_title.png" mode="widthFix"></image>
        </view>
        
        <!-- 分享弹出 -->
        <view class="goodsBack"></view>
        <view class="goodsPop">
            <view class="goodsTab">
                <view class="goodsTab-label">产品海报</view>
            </view>
            <view class="goodsTitle">
                <image src="/static/img/shareTitle.png" mode="aspectFill"></image>{{ profitText }}
            </view>
            <view class="goodsPoster">
                <image @tap="bigPicture" :data-src="'pageDown'" :src="pageDown" mode="widthFix"></image>
            </view>
            <view class="goodsScroll-text">{{ pagedescrip }}</view>
        
            <view class="goodsTool">
                <view class="codeShare-label" @tap="removeSaveImg">
                    生成海报
                </view>
            </view>
        </view>
        
        <!-- 海报canvas -->
        <canvas class="canvasImg" canvas-id="qrcodeCard"></canvas>
        
        <!-- 图片弹出层 -->
        <view class="user-lay sign-img-lay" v-if="isImgLay">
            <view class="user-back">
                <image class="user-back-img" :src="pageDown" mode="widthFix"></image>
                <view class="user-back-cont">
                    <image :src="qrcode" mode="aspectFill"></image>
                </view>
            </view>
            <view class="longPress">长按图片保存二维码</view>
            <button class="sign-img-btn remove-btn" size="mini" @tap="removeSaveImg">取消</button>
        </view>
    </view>
</template>

<script>
    import { publicCode, productPoster } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                qrcode      : '',    // 二维码
                Picture     : 'https://lifetest.ysd-bs.com/storage/materials/2021/08/06/shareImg.jpg',   // 海报图片
                rightId     : '',    // 产品id
                userInfo    : '',    // 我的信息
                isImgLay    : false, // 是否显示图片弹出层
                parentId    : '',    // 是否分享进入
                shareState  : false, // 显示分享朋友圈弹出层
                pageDown    : '',    // 下载海报和展示海报
                pageShare   : '',    // 分享好友朋友圈海报
                profitText  : '',    // 奖励文字,
                pagedescrip : ''     // 商品标题
    		}
    	},
        onLoad(options) {
            this.rightId  = options.rightid,
            this.parentId = options.parent_id
    
            // 获取二维码
            publicCode({
                channel: 'h5',
                type: 'goods',
                url: 'pages/userGoods/goodsDet?rightid=' + options.rightid + '&type=shareGoods'
            }).then(res=>{
                this.qrcode   = res.qrcode
                this.userInfo = res.user
            }).catch(err=>{})
            // 获取分享海报图
            this.posterShow();
        },
        methods: {
            // 分享海报图
            posterShow(){
                productPoster(this.rightId).then(res=>{
                    this.pageDown   = res.cover
                    this.pagedescrip= res.description
                    this.pageShare  = res.wechat_cover
                    this.profitText = res.profit_text
                }).catch(err=>{})
            },
        
            // 预览图片
            bigPicture(e) { 
                uni.previewImage({
                    current : e.currentTarget.dataset.src,
                    urls    : [e.currentTarget.dataset.src]
                })
            },
        
            // 绘图
            dowImg(){
                uni.showLoading({
                    title: '加载中',
                })
        
                let downImg = new Promise(success=>{
                    uni.getImageInfo({
                        src     : this.pageDown,
                        success : res => {
                            success(res.path)
                        }
                    })
                })
                
                // 下载素材
                let codeImg = new Promise(success => {
                    wx.getImageInfo({
                        src     : this.qrcode,
                        success : res => {
                            success(res.path)
                        }
                    })
                })
                
                Promise.all([codeImg, avatarImg]).then(res => {
                    // 绘制海报
                    const ctx = uni.createCanvasContext('qrcodeCard')
                    ctx.save()
                    
                    // 绘制背景
                    ctx.drawImage(res[1], 0, 0, 375, 650)
                    
                    // 绘制白色背景
                    ctx.drawImage('/static/img/goodsCode_white.png', 30, 460, 120, 120)
                    
                    // 绘制二维码
                    ctx.drawImage(res[0], 40, 470, 100, 100)
                    
                    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.qrcodeImg = res.tempFilePath
                                this.removeSaveImg()
                            }
                        })
                    })
                    
                }).catch(err=>{
                    uni.showToast({
                        title: '海报下载，请检查网络',
                        icon : 'none'
                    })
                })
            },
        
            // 图片弹出层
            removeSaveImg(){
                this.isImgLay = !this.isImgLay
            }
        }
    }
</script>

<style lang="scss" scoped>
    .codeTitle {
        width: 100%;
        background-color: #222222;
        border-radius: 0 0 300rpx 300rpx;
        box-sizing: border-box;
        padding: 30rpx 20rpx 0;
        image {
            text-align: center;
            width: 100%;
            border-radius: 20rpx;
            display: block;
        }
    }
    
    
    .goodsBack {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .5);
    }
    
    .goodsPop {
        height: 84vh;
        width: 100%;
        background-color: #ffffff;
        border-radius: 50rpx 50rpx 0 0;
        left: 0;
        bottom: 0;
        position: fixed;
    }
    
    .goodsTab {
        display: flex;
    }
    
    .goodsTab-label {
        background-color: #dadada;
        flex: 2;
        text-align: center;
        width: 50%;
        line-height: 90rpx;
        border-radius: 40rpx 40rpx 0 0;
        &.active {
            background-color: #ffffff;
            border-radius: 40rpx 30rpx 0 0;
            margin-top: -20rpx;
            font-weight: 600;
        }
    }
    
    .goodsTitle {
        background-color: #1f1f1f;
        color: #eed4ae;
        border-radius: 25rpx;
        height: 90rpx;
        line-height: 90rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        display: flex;
        margin: 30rpx;
        position: relative;
        image {
            width: 46rpx;
            height: 46rpx;
            margin: 22rpx 20rpx 0 0;
        }
    }
    
    .goodsTitle::after {
        position: absolute;
        bottom: -10rpx;
        left: calc(50% - 20rpx);
        content: '';
        width: 0;
        height: 0;
        border-left: 20rpx solid transparent;
        border-right: 20rpx solid transparent;
        border-top: 16rpx solid #1f1f1f;
    }
    
    .goodsPoster {
        text-align: center;
        width: 100%;
        height: 50vh;
        overflow-y: scroll;
        image {
            width: 55%;
            margin: 20rpx 0;
        }
    }
    
    .goodsScroll-text {
        background-color: #ffffff;
        position: absolute;
        bottom: 160rpx;
        left: 0;
        width: 100%;
        padding: 20rpx 40rpx;
        box-sizing: border-box;
        text-align: left;
        font-size: 28rpx;
    }
    
    .goodsTool {
        display: flex;
        position: absolute;
        background-color: #ffffff;
        width: 100%;
        left: 0;
        bottom: 0;
        height: 160rpx;
    }
    
    .codeShare-label {
        width: calc(100% - 80rpx) !important;
        margin: 30rpx 40rpx;
        font-weight: normal;
        text-align: center;
        height: 86rpx;
        line-height: 86rpx;
        padding: 0;
        border-radius: 10rpx;
        font-size: 32rpx;
        color: #ffffff;
        background: linear-gradient(to left, #fe6d52, #fe8750);
    }
    
    
    /* 弹窗背景图 */
    .user-lay {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
        position: fixed;
        background: rgba(0, 0, 0, .6);
        height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        z-index: 99;
        box-sizing: border-box;
    }
    
    /* 图片弹出层 */
    .sign-img-lay {
        text-align: center;
    }
    
    .sign-img-src {
        width: 70vw;
        vertical-align: top;
    }
    
    .sign-img-btn[size="mini"],
    .longPress {
        margin: 40rpx auto 0;
        background: #ffffff;
        font-weight: normal;
        color: #2f3245;
        height: 90rpx;
        line-height: 90rpx;
        padding: 0;
        width: 80%;
        border-radius: 10rpx;
        font-size: 30rpx;
    }
    
    .longPress{
        position: relative;
        &::after{
            position: absolute;
            content: '';
            left: calc(50% - 10rpx);
            top: -20rpx;
            width: 0;
            height: 0;
            border-left: 20rpx solid transparent;
            border-right: 20rpx solid transparent;
            border-bottom: 20rpx solid #ffffff;
        }
    }
    
    .remove-btn[size="mini"] {
        margin-top: 20rpx;
        background: #f5d48f;
        color: #000000;
        font-weight: normal;
    }
    
    /* 背景 */
    .user-back-img {
        width: 100%;
        display: block;
    }
    
    .user-back {
        position: relative;
        width: 80%;
        text-align: center;
        margin: 0 auto;
    }
    
    .user-back-cont {
        background: #ffffff;
        padding: 20rpx;
        border-radius: 10rpx;
        box-sizing: border-box;
        position: absolute;
        bottom: 120rpx;
        left: 40rpx;
        image {
            width: 160rpx;
            height: 160rpx;
        }
    }
    
    .codeBack-yard-name {
        width: 100%;
        font-size: 26rpx;
        text-align: center;
    }
    
    /* canvas */
    .canvasImg {
        position: absolute;
        left: -1000%;
        bottom: 0;
        height: 650px;
        width: 375px;
        background: #fbf6f0;
    }
</style>