<template>
    <div class="window-height regist-box column flex-center items-center">
        <div class="col column flex-center items-center rounded light-shadow q-pa-xl bg-white" style="margin: 60px 0;">
            <div style="width:400px;">
                <div class="text-center">
                    <div style="font-size: 36px; " class="text-dark">创建Travel Design账户</div>
                    <div class="text-info text-small">开启行程设计第一步</div>
                </div>
                <el-form ref="registFormRef" :model="model" :rules="rules" label-width="0px" size="large" class="full-width q-mt-lg" :disabled="loading"> 
                    <el-form-item label="" prop="nickname">
                        <el-input v-model="model.nickname" placeholder="昵称" class="q-mt-lg" />
                    </el-form-item>
                    <el-form-item label="" prop="account">
                        <el-input v-model="model.account" placeholder="账号" />
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <el-input v-model="model.password" type="password" placeholder="设置密码" autocomplete="new-password" show-password/>
                    </el-form-item>
                    <el-form-item label="" prop="confirmPwd">
                        <el-input v-model="model.confirmPwd" type="password" placeholder="确认密码" autocomplete="new-password" show-password/>
                    </el-form-item>
                    <el-form-item label="">
                        <vue-hcaptcha ref="invisibleHcaptcha" sitekey="46e00e53-ddb2-4e7b-9c51-621534c2f1f5" @verify="verifyHandler"></vue-hcaptcha>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="full-width q-mb-lg" @click="submitForm(registFormRef)" :loading="loading">立即注册</el-button>
                    </el-form-item>
                    
                    <div class="text-info text-small row flex-center">
                        <span>已有账号？</span>
                        <el-button link type="primary" class="q-mb-lg"  @click="redicetToLogin">立即登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="text-small text-info q-mb-lg">@2012-2024 成都微途科技有限公司 版权所有 蜀ICP备13024891号-9</div>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';
import UserServices from '@/services/UserService'
import { ApiResult } from '@/configs/axios';
import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";

interface RuleForm {
  account: string
  password: string
  nickname: string
  confirmPwd:string
}
const model = ref<{account:string,password:string,nickname:string,confirmPwd:string}>({
    account:'luochao',
    password:'123456',
    nickname:'罗超',
    confirmPwd:'123456'
})
const validateToken = ref('')
const registFormRef = ref<FormInstance>()
const invisibleHcaptcha = ref<VueHcaptcha|null>(null)
const loading = ref(false)
const validateConfirmPassword = (rule: any, value: any, callback: any) => {
   
  if (value === '') {
    callback(new Error('请再次确认密码'))
  } else if (value != model.value.password) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
}
const rules = reactive<FormRules<RuleForm>>({
    account: [
        { required: true, message: '请输入你的账号', trigger: 'blur' },
        { min: 6, message: '账号至少是6位', trigger: 'blur' },
        { max: 16, message: '账号最长只能是16位', trigger: 'blur' },
    ],
    nickname: [
        { required: true, message: '请输入你的昵称', trigger: 'blur' },
        { max: 8, message: '昵称最长只能是8位', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入你的密码', trigger: 'blur' },
        { min: 6,max:20, message: '密码的长度应为6-20位', trigger: 'blur' },
    ],
    confirmPwd:[
        { validator: validateConfirmPassword, trigger: 'blur' }
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return

    await formEl.validate(async (valid) => {
        loading.value=true
        if (valid) {
            if (invisibleHcaptcha.value && validateToken.value == '') {
                invisibleHcaptcha.value.execute()
                loading.value=false
                return
            }
            await registHandler()
        }
        loading.value=false
    })
}

const registHandler = async () =>{
    const response = await UserServices.RegistUserByPassAsync(model.value.account,model.value.password,model.value.nickname,validateToken.value)
    if(response.data.resultCode == ApiResult.SUCCESS){
        ElMessage.success({message:'注册成功，正在跳转'})
        setTimeout(() => {
            redicetToLogin()
        }, 1000);
        return
    }
    ElMessage.error({message:response.data.message})
    invisibleHcaptcha.value?.reset()
    validateToken.value=''
}
const verifyHandler = (token:string,ekey:string)=>{
    validateToken.value = token
}
const redicetToLogin = ()=>{
    location.href='/login'
}
</script>
<style>
.regist-box{
    background-image: url('../../assets/img/homeBJ.png'),linear-gradient(0deg, #E3ECFF, #FFFFFF);
    background-size: auto auto;
    background-repeat: no-repeat;
}
</style>