<script setup lang="ts">
definePageMeta({
  layout: 'login',
})
//接受导航参数
import {useToast} from "vue-toastification";
const route = useRoute();
const email = route.query.email;
const token = route.query.token;
const toast = useToast();
const resetPassword = async () => {
  $fetch('/Api/Account/ResetPassword', {
    method: 'GET',
    params: {
      Email: email,
      Token: token
    },
    headers: {
      'Content-Type': 'application/json',
    },
    baseURL: useRuntimeConfig().public.baseUrl
  }).then(res => {
    toast.success(res)
    setTimeout(() => {
      navigateTo("/SignIn")
    }, 2000)
  }).catch(err => {
    toast.error(err.response._data)
  })
}
</script>

<template>
  <div class="resetPassword-layout">
    <div class="intro">
      <h1>重置密码</h1>
      <h2>点击下方的确认按钮将为你发送一个新的密码到你的邮箱</h2>
    </div>
    <button @click="resetPassword">重置</button>
  </div>
</template>

<style scoped lang="scss">
@import "base";
.resetPassword-layout{
  display: flex;
  flex-direction: column;
  gap: 48px;
  *{
   @include SC_Font;

  }
}
.intro{
  display: flex;
  flex-direction: column;
  gap: 28px;
  h1{
    color: #0C1421;
    text-align: center;
    font-size: 36px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%; /* 36px */
    letter-spacing: 0.36px;
  }
  h2{
    color: #313957;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 32px */
    letter-spacing: 0.2px;
  }
}
button{
  display: flex;
  padding: 16px 16px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #162D3A;
  color: #FFF;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 100%; /* 20px */
  letter-spacing: 2px;
  margin: auto;
}
</style>