<template>
    <div class="poster">
        <div class='poster-box'>
             <!-- domz转换成图片 -->
                <div class="poster-task-dom" v-if="!posterImg" ref="posterDom">
                    <!-- 背景图用img展示 -->
                    <img :src="posterImgBlob" class="dom-background-img" ref="domBackgroundImg" alt="" />
                    <!-- 用户头像 -->
                    <img :src="userImgBlob" class="dom-user-img" ref="domUserImg" alt="" />
                    <!-- 用户昵称 -->
                    <p class="dom-user-nickname" ref="domUserNickname">{{ posterData.nickname }}</p>
                    <!-- 二维码 -->
                    <img :src="qrCodeUrlBlob" class="dom-qrcode" ref="domQrcode" alt="" />
                </div>
                <div class="poster-task-img" v-if="posterImg">
                    <img :src="posterImg" alt="" />
                </div>
                <div class='text' v-if="posterImg">
                    长按保存或分享给好友            
                </div>
                 <div class='icon-close' @click='close' v-if="posterImg"> 
                    <img src="~imgPath/teamBuy/colse_1 w@2x.png" alt="">
                </div>
                </div>
        
    </div>
</template>
<script>
import { createQrcode,generateImg, imgToBlob } from '@xiaoe/js-tools';
export default {
    props: {
        posterData: {
            default: () => {
                return {};
            }
        },
        posterImg:''
    },
    data() {
        return {
            qrcodeImg: '',
            posterImgBlob: '',
            userImgBlob: '',
            qrCodeUrlBlob: ''
        };
    },
    mounted() {
        // 已经生成过海报 直接读取缓存
        if(this.posterImg){
            this.$emit('posterCompleted',this.posterImg);
            return;
        }
        console.log('==========')
        this.initPosition();
        this.handleQrcode();
        this.$nextTick(() => {
            this.domToImg();
        });
    },
    methods: {
        initPosition() {
            this.$refs.domUserImg.style.left = (this.posterData.userImgPosition.x +4 )*2  + 'px';
            this.$refs.domUserImg.style.top = (this.posterData.userImgPosition.y +4)*2  + 'px';
            this.$refs.domUserNickname.style.left = (this.posterData.nicknamePosition.x + 5)*2 + 'px';
            this.$refs.domUserNickname.style.top = (this.posterData.nicknamePosition.y + 5)*2 + 'px';
            this.$refs.domQrcode.style.left = (this.posterData.qrcodePosition.x + 5)*2 + 'px';
            this.$refs.domQrcode.style.top = (this.posterData.qrcodePosition.y + 5)*2  + 'px';
        },
        async domToImg() {
            try {
                await imgToBlob(this.posterData.posterImg)
                    .then((url) => {
                        this.posterImgBlob = url;
                    })
                    .catch(() => {
                        this.posterImgBlob = this.posterData.posterImg;
                    });
                await imgToBlob(this.posterData.userImg)
                    .then((url) => {
                        this.userImgBlob = url;
                    })
                    .catch(() => {
                        this.userImgBlob = this.posterData.userImg;
                    });
                // 群裂变 给的是链接不是图片
                if(location.pathname.indexOf('group_fission')==-1){
                     await imgToBlob(this.posterData.qrcodeUrl)
                    .then((url) => {
                        this.qrCodeUrlBlob = url;
                    })
                    .catch(() => {
                        this.qrCodeUrlBlob = this.posterData.qrcodeUrl;
                    });   
                }
                let res = await generateImg(this.$refs.posterDom, 2);
                if (res) {
                    console.log('ios图片', res);
                    this.$emit('posterCompleted',res);
                }
            } catch (err) {
                console.log(err);
            }
        },
        close(){
            this.$emit('close')
        },
        // 群裂变需要就二维码转换成图片
        async handleQrcode(){
            if(location.pathname.indexOf('group_fission')==-1){
                return;
            }
            try{
                let res = await createQrcode(this.posterData.qrcodeUrl)
                this.posterData.qrcodeUrl = res
                this.qrCodeUrlBlob = res
                console.log('---------',res)
            }catch(e){
                console.log('========',e)
            }
        }
    }
};
</script>
<style scoped lang="scss">
.poster {
    position: absolute;
     top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,.6);
    z-index:999;
    overflow-y: hidden;
}
.poster-box{
position: relative;
width: 100%;
height:100%;
}
.poster-task-dom {
    position: absolute;
    width: 374px;
    height: 666px;
    // overflow: hidden;
    left:-100rem;
    .dom-background-img {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        width: 374px;
        height: 666px;
    }
    .dom-user-img {
        position: absolute;
        width: 48px;
        height: 48px;
        border-radius: 100%;
    }
    .dom-user-nickname {
        position: absolute;
        font-weight: 400;
        color: #333;
        font-size: 20px;
        width: fit-content;
        margin: 0;
    }
    .dom-qrcode {
        position: absolute;
        width: 84px;
        height: 84px;
    }
}
.poster-task-img {
    z-index:99;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    padding-top:0.96rem;
    img {
        width: 5.4rem;
        height: 9.67rem;
        border-radius: 0.24rem;
        overflow: hidden;
    }
}
.explain {
    margin-top: 0.32rem;
    font-size: 0.28rem;
    font-weight: 500;
    color: #333333;
    text-align: center;
    .explain-text {
        font-weight: 400;
        word-break: break-all;
    }
}
.shadow{
    position: absolute;
}
.icon-close{
    width:0.32rem;
    height: 0.32rem;
    z-index:99;
    position: absolute;
    right:1.06rem;
    top:0.4rem;
    display: flex;
    img{
        width: 100%;
        height:100%;
    }
}
.text{
font-size: 0.28rem;
font-weight: 400;
color: #FFFFFF;
z-index:99;
text-align: center;
width:100%;
position: absolute;
top:10.88rem;
}
</style>
