<template>
    <div class="page">
        <div class="card">
            <div class="head">
                <my-image
                    class="img"
                    :src="userInfo.avatarUrl || '/static/user/portrait.jpg'"
                ></my-image>
                <div class="info">
                    <div class="name">
                        {{ userInfo.nickName || "" }}
                    </div>
                    <div class="code" @click="copy">
                        会员码：{{ vipCode }} <span class="copy">复制</span>
                    </div>
                </div>
            </div>
            <image
                v-if="viewType"
                :src="vipCodeImg"
                :mode="'aspectFill'"
                class="code-img"
            ></image>
            <image
                v-if="!viewType"
                :src="vipCodeBarImg"
                :mode="'widthFix'"
                class="code-img2"
            ></image>
            <div class="toggle" @click="viewType = !viewType">切换样式</div>
        </div>
        <canvas
            class="canvas-ele"
            style="width: 420px; height: 420px"
            canvas-id="myQrcode"
        ></canvas>

        <canvas canvas-id="barcode" class="canvas-ele"></canvas>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";

import drawQrcode from "../../common/js/weapp.qrcode.esm";
import barcode from "../../common/js/barcode";
export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            vipCode: "",
            vipCodeImg: "",
            vipCodeBarImg: "",
            viewType: true,
        };
    },

    async onLoad() {
        await this.fn.init();
        this.initCode();
    },
    onShow() {},

    onPullDownRefresh() {},

    onReachBottom() {},

    // 函数
    methods: {
        initCode() {
            let self = this;
            this.api.get("/My/GetVipCode").then((res) => {
                console.log(res, 12345);
                let code = res.data;
                this.vipCode = res.data;
                let ctx = wx.createCanvasContext("myQrcode");
                drawQrcode({
                    width: 400,
                    height: 400,
                    ctx,
                    text: code,
                    x: 10,
                    y: 10,
                    foreground: "#333333",
                });
                barcode.barcode("barcode", code, 500, 350);
                setTimeout(() => {
                    // 生成临时路径
                    uni.canvasToTempFilePath({
                        canvasId: "myQrcode",
                        fileType: "jpg",
                        success: function (res) {
                            self.vipCodeImg = res.tempFilePath;
                        },
                    });
                    // 生成临时路径
                    uni.canvasToTempFilePath({
                        canvasId: "barcode",
                        fileType: "jpg",
                        success: function (res) {
                            self.vipCodeBarImg = res.tempFilePath;
                        },
                    });
                }, 100);
            });
        },

        copy() {
            uni.setClipboardData({
                data: this.vipCode,
                success: () => {
                    this.fn.showToast("复制成功");
                },
            });
        },
    },

    // 数据计算
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo || "";
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card {
    background-color: #fff;
    margin: 0 30px;
    width: 100%;
    max-width: 500px;
    border-radius: px(20);
    padding: 20px 20px 30px;
}
.head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: px(60);
    .img {
        width: px(170);
        height: px(170);
        border-radius: px(20);
        margin-right: px(30);
        flex-shrink: 0;
        overflow: hidden;
        /deep/ img {
            width: px(170);
            height: px(170);
        }
    }
    .name {
        font-size: px(50);
        line-height: 1.5;
    }
    .code {
        margin-top: px(10);
        font-size: px(44);
        color: #888;
    }
}
.code-img {
    margin: 0 auto;
    display: block;
    width: 80%;
    height: calc((100vw - 60px - 60px) * 0.8);
}
.code-img2 {
    margin: 0 auto;
    display: block;
    width: 80%;
    height: calc((100vw - 60px - 60px) * 0.5);
}
.canvas-ele {
    position: fixed;
    top: -100%;
    left: -100;
    z-index: -10;
}
.toggle {
    font-size: px(40);
    color: #1890ff;
    text-align: center;
    padding-top: px(30);
}
.copy {
    color: #1890ff;
    font-size: px(40);

    border-radius: px(8);
    padding: px(8) px(15);
}
</style>