<template>
    <div class="w-full h-full flex flex-col items-center justify-center sm:h-full">
        <div class="w-full shadow-[0_8px_16px_-8px_rgba(0,0,0,0.25)] h-[50px] flex justify-center items-center font-bold">
                <img @click="cancelAction" class=" absolute left-5 h-[50px]" :src="backImg" alt="">
                Retrieve Password
        </div>
        <div  class="w-full lg:w-[400px] p-4 h-full">
            <div style="font-size: 16px;" class="mt-5 mb-1">Email：</div>
            <el-input placeholder="input email" class="input" v-model="email"></el-input>
            <div class="w-full flex-row flex items-center justify-between mt-5">
                <div style="font-size: 16px;" class="mb-1">Code：</div>
                <el-input placeholder="input code" class="input" v-model="code"></el-input>
                <el-button
                    :disabled="isCounting"
                    @click="startCountdown"
                    style="height: 46px;margin-left: 10px;" type="primary">{{ buttonText }}</el-button>
            </div>
            <div style="font-size: 16px;" class="mt-5 mb-1">Password：</div>
            <el-input placeholder="input password" class="input" v-model="password"></el-input>
            <div style="font-size: 16px;" class="mt-5 mb-1">confirmPassword：</div>
            <el-input placeholder="input confirmPassword" class="input" v-model="password1"></el-input>

            <div style="background-color: #f3f3f3;height: 1px;margin-top: 50px;margin-bottom: 20px;"></div>
            <div class="flex mb-0.5  items-center justify-between">
                <el-button @click="cancelAction" style="height: 46px;width: 100px;font-size: 18px;">Cancel</el-button>
                <el-button v-loading="loading" @click="saveAction" style="height: 46px;width: 100px;font-size: 18px;" type="primary">Save</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="js">
import { ref,onBeforeUnmount } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import backImg from '@/assets/back.jpg'
import {registerAnswerApi,zhaoHuiPassword,changePassword} from '@/http/register.js'
import {getToken} from '@/utils/local.js'
import { ElMessage } from 'element-plus';

const route = useRoute()
const router = useRouter()

const email = ref( '')
const code = ref('')
const password = ref('')
const password1 = ref('')

const loading = ref(false)

const isCounting = ref(false)
const buttonText = ref('Get Code')
let timer = null
let seconds = 60

const cancelAction = () => {
    router.back()
}

const saveAction = async() => {
    loading.value = true
    // const myToken = getToken()
    // const dict = {
    //     code:code.value,
    //     password:password.value
    // }
    if(email.value == ''){
        ElMessage.warning('please input email')
        return;
    }
    if(code.value == ''){
        ElMessage.warning('please input code')
        return;
    }
    if(password.value == ''){
        ElMessage.warning('please input password')
        return;
    }
    if(password1.value == ''){
        ElMessage.warning('please input confirmPassword')
        return;
    }
    if(password.value != password1.value){
        ElMessage.warning('password not same')
        return;
    }
    try{
        const res = await changePassword(code.value, password.value,email.value)
        loading.value = false
        if(res.code == 1){
            ElMessage.success('success')
            router.back()
        }
    }catch(err){
        loading.value = false
    }
    
}


// 点击开始倒计时
const startCountdown = () => {
  if (isCounting.value) return

  isCounting.value = true
  seconds = 60
  buttonText.value = `${seconds}s`

  timer = setInterval(() => {
    seconds--
    if (seconds > 0) {
      buttonText.value = `${seconds}s`
    } else {
      clearInterval(timer)
      isCounting.value = false
      buttonText.value = 'Get Code'
    }
  }, 1000)

  // TODO: 这里可以触发实际发送验证码的逻辑
   sendGoogleCode()
}

const sendGoogleCode = async() => {
    // const myToken =  getToken()
    const res =  await zhaoHuiPassword(email.value)
    if(res.code == 1){
        ElMessage.success('send success')
    }
} 

// 组件卸载时清理定时器
onBeforeUnmount(() => {
  if (timer) clearInterval(timer)
})


</script>

<style scoped>
.input{
    height: 46px;
}
</style>