<template>
    <div class="wechatLoginForm text-center q-mt-lg" v-loading="qrLoading">
        <QRCode :value="qrCode" style="width: 159px;height: 159px;border: 1px solid #EBEBEB;" v-if="!qrLoading"></QRCode>
        <QRCode value="http://www.viitto.com" style="width: 159px;height: 159px;border: 1px solid #EBEBEB;" v-if="qrLoading"></QRCode>
     </div>
     <!-- <div class="text-info text-small row flex-center q-pt-lg">
        <span>账户/邮箱登录？</span>
        <el-button link type="primary" class="q-mb-lg" @click="passwordLogin">立即登录</el-button>
    </div> -->
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
import { ApiResult } from '@/configs/axios';
import UserServices from '@/services/UserService';
import { useUserStore } from '@/store/user';

interface RuleForm {
  account: string
  password: string
}
const model = ref<{account:string,password:string,tid:string}>({
    account:'',
    password:'',
    tid:''
})
const rules = reactive<FormRules<RuleForm>>({
    account: [
        { required: true, message: '请输入你的账号/邮箱', trigger: 'blur' },
        { min: 6, message: '请输入正确的账号', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入你的密码', trigger: 'blur' },
        { min: 6,max:20, message: '请输入正确的密码', trigger: 'blur' },
    ]
})

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

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

const emit = defineEmits<{
    (event: 'passwordLogin'): void,
}>()

const passwordLogin = () =>{
    emit('passwordLogin')
}

const redicetToForgot = ()=>{
    location.href='/forgot'
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl || loading.value || (needVerify.value && validateToken.value=='')) return
  loading.value=true
  await formEl.validate(async (valid) => {
    if (valid) {
      await userLoginHandler()
    }
    loading.value=false
  })
  
}
const userLoginHandler = async ()=>{
    const result = await user.setUserPasswordLoginAsync(model.value.account,model.value.password,validateToken.value,model.value.tid)
    if(result.status=='SUCCESS'){
        ElMessage.success({message:'登录成功'})
        if(inviteInfo.value){
            localStorage.removeItem('invite')
            localStorage.setItem('sure_invite',JSON.stringify(inviteInfo.value))
        }
        location.href='/space';
    }else if(result.status=='CHOSEN' && Array.isArray(result.data)){
        multipleUsers.value = result.data
    }else{
        if(!needVerify.value) needVerify.value = result.verify
        if(invisibleHcaptcha.value && needVerify.value) invisibleHcaptcha.value.reset()
        ElMessage.error({message:'账号或密码错误'})
    }
}
</script>
<style>
    .wechatLoginForm{
        padding-top: 16px;
        padding-bottom: 12px;
    }
</style>