<template>
    <BasePage>
        <div class="ewm_bg" v-if="data.Icon" style="font-family: 'PingFang SC'">
            <div class="d1">
                <div class="w100">
                    <img id="invite_bg" :src="$file(data.Icon)" />
                    <!-- <img id="invite_bg" src="/img/invite_bg.jpg"> -->
                </div>
                <img class="icon" :src="$file(data.Avatar)">
                <!-- <div class="name">
                    <b>{{ $substring(data.NickName, 0, 8) }}</b>
                </div> -->
                <div class="ewm_test box box-tb box-align-center">
                    <vue-qr v-if="!loading" :text="link" backgroundColor="rgb(255,255,255)"
                        colorLight="rgb(255,255,255)"></vue-qr>
                    <!-- <span>扫码立即注册</span> -->
                </div>

            </div>
        </div>
        <div id="sc_ewm" class="b_l_w bx" style="font-family: 'PingFang SC'"></div>

    </BasePage>
</template>

<script>
export default {
    name: 'Invite',
    data() {
        return {
            loading: true,
            data: {},
            link: '123',
        };
    },
    mounted() {
        this.$MemberAPI.Post('GetInvite').then(data => {
            this.data = data;
            // if (this.data.MemberLevel == 'member') {
            //     this.$showFailToast("您还未购买星品成为星员，暂无邀请权限! ");
            //     location.replace('#/Gift');
            // }
            this.link = `${location.origin}/#/Login?RecommendCode=${this.data.UserName}&url=Invite`;
            // this.link = `${location.origin}/mini/recommend?RecommendCode=${this.data.UserName}`;
            this.loading = false;
        }).catch(err => {
            this.$showFailToast(err.errmsg);
            location.replace('#/');
        }).finally(() => {
            document.getElementById("invite_bg").onload = () => {
                this.CreatePoster(".ewm_bg > div", "#sc_ewm", 120);
            };
        });
    },
    methods: {
        CreatePoster(divID, targetID, height) {
            var getPixelRatio = function (context) {
                var backingStore =
                    context.backingStorePixelRatio ||
                    context.webkitBackingStorePixelRatio ||
                    context.mozBackingStorePixelRatio ||
                    context.msBackingStorePixelRatio ||
                    context.oBackingStorePixelRatio ||
                    context.backingStorePixelRatio ||
                    1;
                return (window.devicePixelRatio || 1) / backingStore;
            };
            var shareContent = $(divID)[0];
            var width = shareContent.offsetWidth;
            var height = shareContent.offsetHeight;
            var canvas = document.createElement("canvas");
            var context = canvas.getContext("2d");
            var scale = getPixelRatio(context); //将canvas的容器扩大PixelRatio倍，再将画布缩放，将图像放大PixelRatio倍。
            canvas.width = width * scale;
            canvas.height = height * scale + (height ? height : 0);
            canvas.style.width = width + "px";
            canvas.style.height = height + "px";
            context.scale(scale, scale);

            var opts = {
                scale: scale,
                canvas: canvas,
                width: width,
                height: height,
                dpi: window.devicePixelRatio,
                useCORS: true,
            };
            (window.html2canvas || html2canvas)(shareContent, opts).then(function (
                canvas
            ) {
                context.mozImageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;
                var dataUrl = canvas.toDataURL("image/png", 1.0);
                var newImg = document.createElement("img");
                newImg.src = dataUrl;
                newImg.width = width;
                newImg.height = height;
                $(targetID)[0].appendChild(newImg);
            });
        },
    },
};
</script>