<template>
    <section class="max-w-xl m-auto">
        <van-nav-bar :title="t('invitation.title')">
            <template #left>
                <SvgIcon name="allow-left" class="w-7 h-7" @click="router.back" />
            </template></van-nav-bar>
        <div class="top-bg h-[324px] flex-col flex items-center justify-center">
            <div class="top-bg2 w-[267px] h-[300px] mt-6 flex flex-col items-center justify-center">
                <div>
                    <QRCodeVue3 :width="240" :height="240" :value="data" :key="data"
                        :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
                        :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }" :dotsOptions="{
                            type: 'dots',
                            color: '#26249a',
                            gradient: {
                                type: 'linear',
                                rotation: 0,
                                colorStops: [
                                    { offset: 0, color: '#26249a' },
                                    { offset: 1, color: '#26249a' },
                                ],
                            },
                        }" :backgroundOptions="{ color: '#ffffff' }"
                        :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
                        :cornersDotOptions="{ type: undefined, color: '#000000' }" fileExt="png" />
                </div>
            </div>
        </div>
        <div class="bg-[#F7F8FA] w-full z-40 h-[calc(100vh-324px-50px)] pt-4">
            <div class="mx-4 bg-white rounded-md">
                <div class="flex flex-row items-center justify-between p-4">
                    <div class="flex flex-col">
                        <span class="text-ss text-[#AEAEB2]">{{ t('invitation.i_c') }}</span>
                        <span class="text-st text-[#1E1E1E] font-medium">{{ userInfo.invitationCode }}</span>
                    </div>
                    <div @click="copy(userInfo.invitationCode)">
                        <SvgIcon name="copy-alt" class="w-7 h-7" />
                    </div>
                </div>
                <div class="h-[1px] bg-[#3C3C4314] mx-2"></div>
                <div class="flex flex-row items-center justify-between p-4">
                    <div class="flex flex-col">
                        <span class="text-ss text-[#AEAEB2]">{{ t('invitation.link') }}</span>
                        <span class="text-st text-[#1E1E1E] font-medium line-clamp-1">{{ data }}</span>
                    </div>
                    <div @click="copy(data)">
                        <SvgIcon name="copy-alt" class="w-7 h-7" />
                    </div>
                </div>
            </div>
        </div>
        <van-toast v-model:show="show" style="padding: 20">
            <template #message>
                <div>{{ message }}</div>
            </template>
        </van-toast>
    </section>
</template>

<script setup lang="ts">
// import router
import { useRouter } from 'vue-router'
import SvgIcon from '@/components/SvgIcon.vue';
import QRCodeVue3 from "qrcode-vue3";
import { getUserInfo } from '@/api/user'
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n()

const router = useRouter()
const userInfo = ref({})
const show = ref(false)
const message = ref('')
// 获取域名, 带http或者https的

const data = ref('')

const initQrcode = async () => {
    const origin = window.location.origin
    data.value = origin + '/sign-up?invitationCode=' + userInfo.value.invitationCode
}

const copy = async (text: string) => {
    await navigator.clipboard.writeText(text)
    message.value = 'Copy Success'
    show.value = true
}

onMounted(async () => {
    const res = await getUserInfo() as any
    userInfo.value = res
    await initQrcode()
})
</script>

<style scoped >
.top-bg {
    background-image: url("@/assets/imgs/invitation_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}

.top-bg2 {
    background-image: url("@/assets/imgs/phone_border_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 20;
}
</style>