<template>
  <div class="email-registration">
    <!-- 完成注册 -->
    <div class="form">
      <div class="title">
        {{ Hinttext }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, watch, onMounted, onUpdated, onUnmounted, onBeforeMount } from "vue";
import { activeEmail } from "@/api/account";
import { setLocale } from "@/i18n";
import { setStorage , getStorage,getPromiseStorage } from '@/utils/storage.js';
//
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const language = ref(null); // 语言
window["$t"] = t;
//
const route = useRoute();
const router = useRouter();
const token = ref("");
import { ElMessage } from "element-plus";
const Hinttext = ref(t('ActivationInProgressPleaseWaitAMoment'));
//gj激活中，请稍候
//确认
function nextStep() {
  activeEmail(token.value)
    .then(() => {
      Hinttext.value = t('ActivationSuccessfulPleaseLogIn');
      //gj激活成功，请登录
      setTimeout(() => {
        router.push("/");
      }, 3000);
    })
    .catch(() => {
      Hinttext.value = t('ActivationFailed');
      //gj激活失败
    });
}

onMounted(() => {
  token.value = route.params.token;
  nextStep();
});

onUpdated(() => {
  // 组件更新后执行
});
onBeforeMount(() => {
  // 语言
  getPromiseStorage("language")
    .then((res) => {
      console.log("获取语言成功", res);
      language.value = res;
      setLocale(language.value);
    })
    .catch((err) => {
      console.log("获取语言失败", err);
    });
});
onUnmounted(() => {
  // 组件销毁前执行
});
</script>

<style scoped>
.email-registration {
  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;
}
.form {
  margin-top: 30px;
  width: 80%;
  height: 80%;
  background-image: linear-gradient(180deg, #dbf0f1, #ffffff);
  border-radius: 10px;
  border: 1px solid #4fcacd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.title {
  font-size: 100px;
  color: #03aba8;
  font-weight: bold;
  transition: all 0.5s ease-in-out;
}
</style>
