<template>
  <div class="activate-email">
        <div class="activate-email-content">
            您的邮箱{{ user.email }},尚未激活，请在您的邮箱中点击激活链接激活您的账号。
        </div>
        <div class="activate-email-btn" @click="sendActivateEmail">
            重发激活邮件
        </div>
  </div>
</template>

<script setup>
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
} from "vue";
import {getPromiseStorage} from '@/utils/storage.js';
import {resendEmail} from "@/api/account";
import { useRouter } from 'vue-router';
import { ElMessage } from "element-plus";
const router = useRouter();
const refname = ref('');

function sendActivateEmail() {
    resendEmail({
        mailAddress:user.value.email,
        type:1
    }).then(res => {
        ElMessage.success('激活邮件已发送，请注意查收。');
        router.push('/');
    }).catch(err => {
        ElMessage.error('激活邮件发送失败，请稍后再试。');
    })
}



watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
const user = ref({});
onMounted(() => {
    getPromiseStorage('user').then(res => {
        console.log(res);
      user.value = res;
    });
});
onUpdated(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
</script>

<style scoped>
.activate-email{
    padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(@/assets/bg.png);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.activate-email-content{
    font-size: 30px;
    color: #4FCACD;
    font-weight: bold;
}
.activate-email-btn{
    background-color: #4FCACD;
    color: #fff;
    font-size: 20px;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 50px;
}
.activate-email-btn:hover{
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    transform: scale(1.08);
    opacity: 0.8;
}
.activate-email-btn:active{
    transition: all 0.1s ease;
    transform: scale(0.95) !important;
}
</style>