<template>
  <div class="activate-email">
    <div class="activate-email-content">
      {{
        t("YourEmailAddressIs") +
        user.email +
        t(
          "ItHasNotBeenActivatedYetPleaseClickTheActivationLinkInYourEmailToActivateYourAccount"
        )
      }}
      <!-- gj您的邮箱是{{user.email}}，尚未激活，请点击激活链接中的链接激活您的账户 -->
    </div>
    <div class="activate-email-btn" @click="sendActivateEmail">
      {{ t("ResendTheActivationEmail") }}
      <!-- gj重新发送激活邮件 -->
    </div>
  </div>
</template>

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

function sendActivateEmail() {
  resendEmail({
    mailAddress: user.value.email,
    type: 1,
  })
    .then((res) => {
      ElMessage.success(t("TheActivationEmailHasBeenSentPleaseCheckItInTime"));
      // gj激活邮件已发送，请注意查收
      setSessionStorage("notActivated", true); // 存储用户信息
      router.push('/nav'); // 返回上一页
    })
    .catch((err) => {
      ElMessage.error(t("TheActivationEmailSendingFailedPleaseTryAgainLater"));
      // gj激活邮件发送失败，请稍后再试
    });
}

onBeforeMount(() => {
  // 语言
  getPromiseStorage("language")
    .then((res) => {
      console.log("获取语言成功", res);
      language.value = res;
      setLocale(language.value);
    })
    .catch((err) => {
      console.log("获取语言失败", err);
    });
});

watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
const user = ref({});
onMounted(() => {
  getPromiseStorage("user")
    .then((res) => {
      console.log(res);
      user.value = res;
    })
    .catch((err) => {});
});
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>
