<template>
    <div class="wechatLoginForm text-center q-mt-lg"
    style="position: relative;">
        <div v-loading="qrLoading">
            <img :src="qrCode" style="width: 164px;height: 164px;border: 1px solid #EBEBEB;border-radius: 12px;" v-if="!qrLoading"></img>
            <QRCode value="http://www.viitto.com" style="width: 159px;height: 159px;border: 1px solid #EBEBEB;" v-if="qrLoading"></QRCode>
        </div>
        <div v-if="!qrCode||loseEffect" class="q-pt-md" style="position: absolute;left: 0;right: 0;">
            <el-icon class="cursor-pointer">
                <RefreshRight
                v-if="!RefreshLoading"
                @click="() => getQrcode(1)"
                />
                <Refresh v-else />
          </el-icon>
        </div>
     </div>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } 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 RefreshLoading = 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('')
const qrLoading = ref(false)

const scene_id = ref('')

const queryTimer = ref<any>(null)
const props = defineProps({
    current: {
        type: Number,
        required: 0,
    },
})

const loseEffect = ref(false)


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

const stopTimerHandler = async ()=>{
    if(queryTimer.value){
        clearInterval(queryTimer.value)
        queryTimer.value=null
        await userLoginHandler(1)
    }
}

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

const userLoginHandler = async (type:any)=>{
    const result = await user.setUserWechatLoginAsync(scene_id.value,type)
    if(result.status=='SUCCESS'){
        if(!type) {
            stopTimerHandler()
            ElMessage.success({message:'登录成功'})
            if(inviteInfo.value){
                localStorage.removeItem('invite')
                localStorage.setItem('sure_invite',JSON.stringify(inviteInfo.value))
            }
            location.href='/space';
        }
    }else if(result.status=='ERROR') {
        if(!type) {
            stopTimerHandler()
            loseEffect.value = true
            ElMessage.error({message:'二维码维码已失效，请重新获取'})
        }
    }
}


watch(()=>props.current,(n,o)=>{
    if(n==1) stopTimerHandler()
    if(n==2) getQrcode()
},{
    immediate: true
})
</script>
<style>
    .wechatLoginForm{
        padding-top: 16px;
        padding-bottom: 12px;
    }
</style>