<script setup lang="ts">
import _ from "lodash";

definePageMeta({
  layout: 'login',
})
import { SmsCode, type ISmsCodeComponentInstance  } from 'vue3-auth-code-input';
import {useToast} from "vue-toastification";

const visible= ref(false)
const email = ref(useRoute().params.email)
const userId = ref(useRoute().params.id)
const smsCodeRef = ref<ISmsCodeComponentInstance | null>(null);
const toast = useToast()
const handelSubmit=()=>{
  visible.value=true
}
const sendCode =  (email:string) => {
  $fetch('/Api/Account/VerifyEmail', {
    method:'GET',
    params:{
      UserId:userId.value,
      Email:email
    },
    headers: {
      'Content-Type': 'application/json',
    },
    baseURL: useRuntimeConfig().public.baseUrl
  }).then(res=>{
    toast.success(res)
  }).catch(err=>{
    toast.error(err.response._data)
  })
};
//节流
const verifyCode=_.debounce((code:string)=>{
  if(code.length!==6){
    return
  }
  $fetch('/Api/Account/VerifyEmail', {
    method:'GET',
    params:{
      UserId:userId.value,
      Email:email.value,
      Code:code
    },
    headers: {
      'Content-Type': 'application/json',
    },
    baseURL: useRuntimeConfig().public.baseUrl
  }).then(res=>{
    toast.success(res)
    toast.info("你的账号信息已被更新")
    toast.info("重新登录...")
    setTimeout(()=>{
      navigateTo("/SignIn")
    },2000)
  }).catch(err=>{
    toast.error(err.response._data)
  })
},1000)
</script>

<template>
<div class="verify-email-layout">
  <Dialog v-model:visible="visible"
          :pt="{
        root: {
          style:'border:unset;background-color:unset;'
        },
        mask: {
            style: 'backdrop-filter: blur(20px)'
        }
    }"
          modal>
    <template #container="{ closeCallback }">
      <sms-code ref="smsCodeRef" title="验证你的邮箱" card width="400px" codeHeight="50px"  font-size="20" content-text="请获取验证码后填写邮箱验证码。" type="text" :mobile="email as string" @send="sendCode" @update:code="verifyCode" />
    </template>
  </Dialog>
  <div class="info">
    <h1>验证邮箱</h1>
    <h2>验证你的邮箱以继续登录</h2>
  </div>
  <form @submit.prevent="handelSubmit">
    <input type="email" v-model="email" placeholder="请输入你的邮箱" required />
    <button type="submit">提交</button>
  </form>
</div>
</template>

<style scoped lang="scss">
@import "../../base";
.verify-email-layout{
  display: flex;
  flex-direction: column;
  gap: 24px;
  *{
    @include SC_Font
  }
}
.info{
  display: flex;
  flex-direction: column;
  gap: $gap;
  h1{
    font-weight: 700;
    text-align: center;
  }
  h2{
    font-weight: 400;
  }
}
form{
  display: flex;
  gap: $gap;
  input{
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #D4D7E3;
    background: #eaeaea;

  }
  button{
    border: $border;
    padding: $padding;
    border-radius: $radius;
    background: $primary-color;
    color: #fff;
    font-weight: 800;
    font-size: 20px;
  }
}
</style>