<!--分销二维码-->
<template>
    <div id="distributionCode">
        <Nav :title="$t('distributionCode.title')"></Nav>
        <div class="content">
            <div class="rwmBox">
                <div>
                    <!-- <van-image width='235px' height='235px' :src="src">
                        <template v-slot:error>加载失败</template>
                    </van-image> -->
                    <div style="color:#f00" class="item-pic" id="qrinvitecode"></div>
                </div>
                <div>
                    <span @click="preservationRWM">{{$t('distributionCode.message')}}</span>
                </div>
            </div>
        </div>
        <van-overlay :show="loading" @click="loading = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-loading color="#1989fa" size="50" />
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Nav from "@/components/pages/nav";
import QRCode from 'qrcodejs2'
export default {
    data() {
        return {
            loading: false,
            requestUrl: process.env.VUE_APP_BASE_API,
        };
    },
    mounted() {
        // setTimeout(() => {
        //     this.loading = false;
        // }, 1000);
        this.getQRInviteCode();
    },
    methods: {
        preservationRWM() {
            this.savePicture("canvas", "测试图片");
        },
        savePicture(selector, name) {
            var image = document.getElementById('qrinvitecode').getElementsByTagName('img')[0];
            // var image = new Image();
            // image.src = this.src;
            // 解决跨域 Canvas 污染问题
            // image.setAttribute("crossOrigin", "anonymous");
            image.onload = this.getImg(image, name);
        },
        getImg(image, name) {
            console.log();
            var canvas = document.createElement("canvas");
            let wWidth = 235;
            let wHeight = 235;
            canvas.width = wWidth;
            canvas.height = wHeight;
            var context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, wWidth, wHeight);
            var url = canvas.toDataURL("image/png");
            // 生成一个a元素
            var a = document.createElement("a");
            // 创建一个单击事件
            var event = new MouseEvent("click");
            // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
            a.download = name || "下载图片名称";
            // 将生成的URL设置为a.href属性
            a.href = url;
            // 触发a的单击事件
            a.dispatchEvent(event);
        },
        getQRInviteCode() {
            //获取用户信息
            let userInfo = this.$store.state.user.userInfo;
            new QRCode("qrinvitecode", {
                width: 235, //宽度
                height: 235, // 高度
                text: 'http://39.99.37.98/oneDayH5?distributionId='+userInfo.id,
                render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
            });
        },
    },
    components: {
        Nav,
    },
};
</script>

<style lang="scss" scoped>
#distributionCode {
    .content {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: calc(100vh - 0.44rem /* 128/100 */);
        .rwmBox {
            width: 235px;
            > div:nth-child(1) {
                width: 235px;
                height: 235px;
                border: 1px dashed #eeeeee;
            }
            > div:nth-child(2) {
                font-size: 0.14rem /* 14/100 */;
                padding: 22px;
                > span {
                    line-height: 0.22rem /* 22/100 */;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>