<template>
    <BasePage>
        <div class="ewm_bg" style="font-family: 'PingFang SC'">
            <div class="d1">
                <div class="w100">
                    <img id="invite_bg" src="/img/invite_bg.jpg" crossorigin="anonymous">
                </div>
                <img class="icon" :src="$file(data.Avatar)" crossorigin="anonymous">
                <div class="name">
                    <b>{{ $substring(data.NickName, 0, 8) }}</b>
                </div>
                <p class="tips">邀请你使用泰古润平台<br>积分带卡消费，享受更多实惠</p>
                <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>
                </div>
            </div>
        </div>
        <div id="sc_ewm" class="b_l_w bx" style="font-family: 'PingFang SC'"></div>
    </BasePage>
</template>

<script>
import html2canvas from 'html2canvas'

export default {
    name: 'Invite',
    data() {
        return {
            loading: true,
            data: {
                Avatar: '',
                NickName: '',
            },
            link: '',
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            try {
                const userInfo = await this.$get('/v1/client/DUsersClient')
                if (userInfo?.data) {
                    this.data.Avatar = userInfo.data.userimg || ''
                    this.data.NickName = userInfo.data.nickname || ''
                }
                const inviteCode = userInfo?.data?.cellphone || ''
                this.link = `${location.origin}${location.pathname}#/Login?RecommendCode=${inviteCode}`
            } catch (err) {
                console.error('获取用户信息失败:', err)
            } finally {
                this.loading = false
                this.$nextTick(() => {
                    this.generatePoster()
                })
            }
        },

        async generatePoster() {
            const el = document.querySelector('.ewm_bg > .d1')
            const bgImg = document.querySelector('#invite_bg')
            if (!el || !bgImg) return

            try {
                // Convert local image to base64 for Safari compatibility
                if (bgImg.src.startsWith('/')) {
                    await this.loadImageToBase64(bgImg)
                }

                if (document.fonts?.ready) {
                    await document.fonts.ready
                }
                await new Promise(resolve => setTimeout(resolve, 500))

                const canvas = await html2canvas(el, {
                    scale: 2,
                    useCORS: true,
                    backgroundColor: '#ffffff',
                    logging: false
                })
                const dataUrl = canvas.toDataURL('image/png')

                const target = document.querySelector('#sc_ewm')
                if (target) {
                    target.innerHTML = ''
                    const img = document.createElement('img')
                    img.src = dataUrl
                    img.style.width = '100%'
                    img.style.display = 'block'
                    target.appendChild(img)
                }
            } catch (err) {
                console.error('生成海报失败', err)
            }
        },

        loadImageToBase64(imgEl) {
            return new Promise((resolve, reject) => {
                const img = new Image()
                img.crossOrigin = 'anonymous'
                img.onload = () => {
                    try {
                        const canvas = document.createElement('canvas')
                        canvas.width = img.width
                        canvas.height = img.height
                        const ctx = canvas.getContext('2d')
                        ctx.drawImage(img, 0, 0)
                        imgEl.src = canvas.toDataURL('image/png')
                        resolve()
                    } catch (e) {
                        reject(e)
                    }
                }
                img.onerror = reject
                img.src = imgEl.src
            })
        },
    },
}
</script>

<style lang="less">
.ewm_bg {
    opacity: 0;
    position: fixed;
    left: 0;
    top: 12.267vw;
    z-index: 0;
    height: 0px;
    overflow: hidden;

    .d1 {
        position: relative;

        .name {
            position: absolute;
            left: 34vw;
            bottom: 46vw;
            width: 100%;

            b {
                font-size: 3.47vw;
            }

        }

        .tips {
            font-size: 3.2vw;
            color: #3a0a05;
            position: absolute;
            left: 20.27vw;
            bottom: 32.4vw;
        }

        .icon {
            position: absolute;
            width: 10.67vw;
            height: 10.67vw;
            left: 20.27vw;
            bottom: 43vw;
            border-radius: 50%;
        }

        .ewm_test {
            position: absolute;
            left: 23.73vw;
            bottom: 57.47vw;
            white-space: nowrap;

            img {
                width: 52.53vw;
                height: 52.53vw;
            }
        }
    }
}
</style>