<script setup lang="ts">
definePageMeta({
  layout: 'login',
})
import {useToast} from "vue-toastification";
const email=ref(useRoute().params.email)
const toast=useToast()
const sendEmail=()=>{
  $fetch('/Api/Account/ForgotPassword', {
    method:'GET',
    params:{
      Email:email.value
    },
    headers: {
      'Content-Type': 'application/json',
    },
    baseURL: useRuntimeConfig().public.baseUrl
  }).then(res=>{
    toast.success(res)
  }).catch(err=>{
    toast.error(err.response._data)
  })
}
</script>

<template>
<div class="forgotPassword-layout">
  <a href="/signIn">< 返回</a>
  <div class="info">
    <h1>忘记密码</h1>
    <h2>请输入您的邮箱地址，我们将向您发送重置密码的链接。</h2>
    <h3>请检查你的垃圾箱</h3>
  </div>
  <div class="form">
    <div>
      <input v-model="email" type="email" placeholder="请输入您的邮箱地址" required minlength="8" />
      <button @click="sendEmail">发送</button>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
@import "../../base";
.forgotPassword-layout{
  display: flex;
  flex-direction: column;
  gap:48px;
  *{
    @include SC_Font
  }
  .info{
    display: flex;
    flex-direction: column;
    font-weight: 800;
    gap: $gap;
  }
  input{
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #D4D7E3;
    background: #F7FBFF;
  }
  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;
  }
  .form{
    display: flex;
    flex-direction: column;
    gap: $gap*2;
    >div{
      display: flex;
      gap: $gap;
      input{
        flex: 1;
      }
    }
  }
}
</style>