<template>
    <van-overlay :show="show" @click="show = false">
        <div class="wrapper">
            <img :src="img" @click.stop class="wrapper-img" v-if="img" alt="" />
            <div class="wrapper-box" ref="post" v-else @click.stop>
                <van-image
                    width="100%"
                    height="480px"
                    radius="20px"
                    :src="bg"
                    fit="cover"
                />
                <vue-qrcode :value="url" :options="{ width: 88, margin: 1 }" class="share-code"></vue-qrcode>
                <!-- <img  alt="" style="width:100%;height:75px"> -->
                <!-- <div class="wrapper-top">
                    <img :src="avatar" class="avatar" alt="" />
                    <div class="name">{{ userInfo.nickname }}</div>
                </div> -->
                <!-- <img class="share2" :src="shareBg" alt="" /> -->
                <!-- <div class="wrapper-text">
                    <div class="wrapper-left">
                        <div class="text1">古玩数字藏品站</div>
                        <div class="text2">扫码立即注册，快去探索吧</div>
                    </div>
                    <vue-qrcode :value="url" :options="{ width: 46, margin: 1 }" class="share-code"></vue-qrcode>
                </div> -->
            </div>
            <div class="tips">长按图片保存</div>

            <img @click="show = false" src="../assets/icon／close.png" class="close" alt="" />

            <!-- <img src="../../assets/close.png" alt="" class="close" /> -->
        </div>
    </van-overlay>
</template>

<script>
import { mapState } from 'vuex';
import resolveUrl from 'resolve-url';
import vueQrcode from '@chenfengyuan/vue-qrcode';
import html2canvas from 'html2canvas';
export default {
    computed: {
        ...mapState(['userInfo']),
        url() {
            return resolveUrl(this.$baseUrl, '9th/login?number=1&invitor=' + this.userInfo.id);
        }
    },
    components: {
        vueQrcode
    },
    data() {
        return {
            show: false,
            img: '',
            bg: ''
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.getImgBase64('https://nanjingnft.oss-cn-hangzhou.aliyuncs.com/nft/2022-05-05-17-00-11AgYKwDZt.jpg', 'bg');
        });
    },
    methods: {
        share() {
            this.show = true;
            if (!this.img) {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
                setTimeout(() => {
                    this.loadImg();
                }, 500);
            }
        },
        loadImg() {
            html2canvas(this.$refs.post, {
                useCORS: true,
                allowTaint: true,
                backgroundColor: null,
                scale: 3
            }).then(canvas => {
                this.$toast.clear();
                this.img = canvas.toDataURL('image/png');
            });
        },
        getImgBase64(img2, key) {
            let img = new Image();
            img.crossOrigin = 'anonymous';
            let _this = this;
            img.onload = function () {
                let src = _this.image2Base64(img);
                _this[key] = src;
            };
            img.src = img2;
        },
        image2Base64(img) {
            let canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            let ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, img.width, img.height);
            let dataURL = canvas.toDataURL('image/png');
            return dataURL;
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .flex-col();
    align-items: center;
    justify-content: center;
}
.wrapper-box {
    width: 340px;
    height: 480px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    .wrapper-top {
        padding: 20px 0 16px;
        .flex-col();
        align-items: center;
    }
    .avatar {
        width: 138px;
        height: 138px;
        border-radius: 100px;
        display: block;
    }
    .name {
        font-size: 20px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        margin-top: 12px;
    }
}
.share-code {
    position: absolute;
    bottom: 85px;
    right: 15px;
}
.wrapper-text {
    .flex();
    padding: 20px 16px;
    background: #f5f7fa;
    .wrapper-left {
        flex-grow: 1;
    }
    .text1 {
        font-size: 12px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
    }
    .text2 {
        font-size: 12px;
        color: #939599;
        line-height: 10px;
        transform: scale(0.8) translateX(-18px);
        white-space: nowrap;
    }
}
.wrapper-img {
    display: block;
    width: 340px;
    height: 480px;
}
.tips {
    font-size: 12px;
    color: @text3;
    margin-top: 20px;
}
.close {
    position: absolute;
    right: 16px;
    top: 8px;
    width: 24px;
    height: 24px;
}
</style>
