<template>
    <div class="wechatLoginForm text-center q-mt-lg" v-loading="qrLoading">
        <img :src="qrCode" style="width: 164px;height: 164px;border: 1px solid #EBEBEB;border-radius: 8px;" v-if="!qrLoading"></img>
        <QRCode value="http://www.viitto.com" style="width: 159px;height: 159px;border: 1px solid #EBEBEB;" v-if="qrLoading"></QRCode>
     </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus';
import { ApiResult } from '@/configs/axios';
import UserServices from '@/services/UserService';
import { useUserStore } from '@/store/user';


const loading = ref(false)
const multipleUsers = ref<any[]>([])
const inviteInfo = ref<any>()
if(localStorage.getItem("invite")){
    inviteInfo.value = JSON.parse(localStorage.getItem("invite")??'{}')
}
const user = useUserStore()

const qrCode = ref('none')
const qrLoading = ref(false)

const scene_id = ref('')

const queryTimer = ref<any>(null)

const beginTimerHandler = ()=>{
    queryTimer.value = setInterval(async ()=>{
        await userLoginHandler()
    },3000)
}

const stopTimerHandler = ()=>{
    if(queryTimer.value){
        clearInterval(queryTimer.value)
        queryTimer.value=null
    }
}

const getQrcode = async () =>{
    qrLoading.value = true
    const result = await UserServices.GetShowQrcode(0)
    if(result.data.resultCode==ApiResult.SUCCESS){
        qrCode.value = result.data.data.url
        scene_id.value = result.data.data.scene_id
        beginTimerHandler()
    }
    qrLoading.value = false
}

const userLoginHandler = async ()=>{
    const result = await user.setUserWechatLoginAsync(scene_id.value)
    if(result.status=='SUCCESS'){
        stopTimerHandler()
        ElMessage.success({message:'登录成功'})
        if(inviteInfo.value){
            localStorage.removeItem('invite')
            localStorage.setItem('sure_invite',JSON.stringify(inviteInfo.value))
        }
        location.href='/space';
    }
}
getQrcode()
</script>
<style>
    .wechatLoginForm{
        padding-top: 16px;
        padding-bottom: 12px;
    }
</style>