<template>
    <view class="content">
        <view class="code">
            <image class="codeBack" :src="posterImg" mode="widthFix"></image>
            <view class="code-share" @click="shareClick">
                <image src="/static/icons/down.png"></image>
                <view class="code-share-name">保存图片</view>
            </view>
        </view>
        
        <!-- 打卡海报 -->
        <view class="postertBack" v-if="isImgLay"></view>
        <view class="postert" v-if="isImgLay">
            <view class="poster-Cont">
				<img class="poster-Cont-img" :src="posterImg">
            </view>
            <view class="sign-btn">
                <view class="remove-btn">长按图片保存</view>
                <view class="sign-img-block">
                    <button class="sign-img-btn" size="mini" @click="isImgLay = false">取消</button>
                </view>
            </view>
        </view>
		
        
        <!--何院士 海报canvas -->
        <!-- <vue-canvas-poster :widthPixels="1000" :painting="academician" @success="saveSuccess" @fail="saveFail" v-if="identity == 3"></vue-canvas-poster> -->
        
        <!-- 海报canvas -->
        <vue-canvas-poster :widthPixels="1000" :painting="paintings" @success="saveSuccess" @fail="saveFail"></vue-canvas-poster>
    </view>
</template>

<script>
    import { invite } from '@/apis/interfaces/user'
    import { VueCanvasPoster } from 'vue-canvas-poster'
    export default {
        components: {
            VueCanvasPoster
        },
    	data() {
    		return {
    			inviteData: '', //用户二维码
                invitecode    : '',   //二维码
                identity  : 1,//1为普通，2为上师版， 3为何院士
                isImgLay  : false, //是否显示图片弹出层
                paintings : {
                    width: "375px",
                    height: "800px",
                    borderRadius: "10px",
                    background: "#ffffff",
                    views: [
                        //海报背景
                        {
                            type: "image",
                            url: "",
                            css: {
                                top: "0",
                                left: "0",
                                width: "375px",
                                height: "800px",
                                mode: 'aspectFill'
                            },
                        },
                        
                        //二维码
                        {
                            type: "image",
                            url: "",
                            css: {
                                top: "412px",
                                left: "39px",
                                width: "110px",
                                height: "110px",
                                mode: 'aspectFill'
                            },
                        }
                    ],
                },
                posterImg: "", //生成的海报图片路径
    		};
    	},
        onShow() {
            // 获取推广码
            this.inviteInfo();
        },
        methods: {
            // 推广码
            inviteInfo() {
            	invite().then(res => {
                    this.identity   = res.user_info.tag
                    this.inviteData = res
                    this.invitecode = res.code
					
					this.paintings.views[0].url  = "/static/img/shartBack.jpg"
					this.paintings.views[1].url  = res.code
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 查看图片
            openImg(img) {
                uni.previewImage({
                    current: img,
                    urls:[img]
                })
            },
            
            // 下载海报
            shareClick (){
				this.paintings.views[0].url  = "/static/img/shart.jpg"
				this.paintings.views[1].url  = this.invitecode
				this.isImgLay = true
				
                // if(this.identity == 1) {
                    
                // }else if(this.identity == 2) {
                //     this.paintings.views[0].url  = "/static/imgs/code_01.png"
                // }else {
                //     this.academician.views[0].url  = "/static/imgs/code_02.png"
                //     this.academician.views[1].url  = "/static/imgs/codeshart_back_02.png"
                //     this.academician.views[2].url  = this.invitecode
                //     this.academician.views[3].url  = "/static/imgs/codeShart_title1.png"
                // }
				
            },
            saveSuccess(src) {
                this.posterImg = src;
				
            },
            saveFail(err) {},
        }
    }
</script>

<style lang="scss">
    .code {
        width: 100vw;
        height: 100vh;
		background-color: #08182f;
		.codeBack {
		    width: 100%;
			display: block;
		}
		.code-share {
		    position: fixed;
		    z-index: 10;
		    left: 0;
		    bottom: 22%;
		    background: linear-gradient(to right, #aa957b, #ffeeda);
		    width: 50rpx;
		    text-align: center;
		    border-radius: 0 20rpx 20rpx 0;
		    padding: 20rpx 0;
		}
    }
    
   
    
    /* 何院士样式 */
    .newCode-cont {
        width: 70%;
        height: 200rpx;
        position: absolute;
        z-index: 9;
        text-align: center;
        left: 15%;
        bottom: 19.5%;
        background: linear-gradient(to top, #a09084, #a58367);
        padding: 15rpx;
        box-sizing: border-box;
        border-radius: 30rpx;
    }
    
    .newCode-img {
        height: 170rpx;
        margin: 0 auto;
        background: linear-gradient(to top, #e9d1bd, #c49b7a);
        border: 4rpx solid #f3c49d;
        border-radius: 30rpx;
        display: flex;
        padding: 10rpx 30rpx 10rpx 10rpx;
        box-sizing: border-box;
    }
    
    .newCode-img-title {
        width: calc(100% - 140rpx);
    }
    
    .newCode-img-title image {
        width: 80%;
        margin-top: 15rpx;
    }
    .newCode-img-code {
        width: 140rpx;
        height: 140rpx;
    }
    .code-cont {
        width: 100%;
        position: relative;
        z-index: 9;
        text-align: center;
        left: 15%;
		width: 200rpx;
		padding: 15rpx;
		top: 50%;
		background-color: #FFFFFF;
    }
    .code-img{
        margin-bottom: 10rpx;
        overflow: hidden;
        // border-radius: 30rpx;
        width: 200rpx;
		height: 200rpx;
		position: relative;
        // border: 4rpx solid #be9768;
    }
    .code-img image {
		position: absolute;
		left: 0;
		top: 0;
        width: 100%;
    }
	.code-code {
		color: #275979;
		font-size: $title-size-sm - 2;
		border-top: 2rpx #275979 dotted;
		padding-top: 10rpx;
		font-weight: 600;
	}
    .code-text {
        background: linear-gradient(to right, #aa957b, #ffeeda, #aa957b);
        -webkit-background-clip: text;
        color: transparent;
        font-size: 26rpx;
    }
    
    
    
    .code-share image {
        width: 30rpx;
        height: 30rpx;
        margin-bottom: 5rpx;
    }
    
    .code-share-name {
        writing-mode:vertical-rl;
        font-size: 28rpx;
        padding-left: 4rpx;
        color: #4d2a00;
    }
    
    .postertBack {
        width: 100vw;
        height: 100vh;
        position: fixed;
        background-color: rgba(0,0,0,.6);
        left: 0;
        top: 0;
        z-index: 90;
    }
    .postert {
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 99;
        .poster-Cont {
            width: 80vw;
            height: 80vh;
            top: 3vh;
            left: 10vw;
            position: absolute;
            background-color: #FFFFFF;
            box-sizing: border-box;
            border-radius: $radius-m;
            .poster-Cont-img {
                width: 100%;
                height: 100%;
            }
			.poster-Cont-code {
				position: absolute;
				bottom: 250px;
				left: 46px;
				width: 140rpx;
				height: 140rpx;
			}
        }
    }
    
    .sign-btn {
        position: absolute;
        top: 83vh;
        width: 80%;
        left: 10%;
        z-index: 999;
        .remove-btn {
            width: 100%;
            line-height: 90rpx;
            background-color: #bf9960;
            color: #FFFFFF;
            border-radius: $radius-m;
            margin-top: $margin - 10;
            text-align: center;
            font-size: $title-size + 2;
        }
        .sign-img-block {
            display: flex;
            margin: 20rpx -10rpx 0;
            .sign-img-btn {
                flex: 2;
                line-height: 90rpx;
                background-color: #ffeeda;
                border-radius: $radius-m;
                text-align: center;
                font-size: $title-size;
                margin: 0 10rpx;
            }
        }
    }
</style>
