<template>
  <!-- 激活账户 -->
  <div v-if="!query.resetPwd" class="content">
    <div class="logo" @click="goLogin">
      <img src="../../assets/img/left-top-logo.png" alt="" />
    </div>

    <div class="lanSelect">
      <lang-select
        class="navItem"
        style="color: #ffffff; transform: scale(2)"
      />
    </div>

    <div v-if="isSuccess == 1">
      <div class="welcome">{{ $t("signSucceed.welcome") }}</div>
      <div class="success">{{ $t("signSucceed.createSuccess") }}</div>
      <div class="login pointer" @click="goLogin">
        {{ $t("signSucceed.goLogin") + " " + count }}
      </div>
    </div>

    <div v-if="isSuccess == 2">
      <div class="welcome">{{ $t("signSucceed.welcome") }}</div>
      <div class="success">
        {{ $t("signSucceed.expired") }}
      </div>
      <div class="login pointer" @click="reSend">
        {{ $t("signSucceed.reSend") }}
      </div>
    </div>

    <div v-if="isSuccess == 3">
      <div class="welcome">{{ $t("signSucceed.welcome") }}</div>
      <div class="success">{{ $t("signSucceed.sendSuccess") }}</div>
    </div>
  </div>
  <!-- 忘记密码 -->
  <div v-if="query.resetPwd" class="content"></div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { activateByTicket } from "@/apis/signSucceed";
import { sendRegisterEmail } from "@/apis/login";
import { useI18n } from "vue-i18n";
import LangSelect from "@/components/LangSelect/index.vue";

const { locale } = useI18n();
const currentLan = ref(locale);
const route = useRoute();
const router = useRouter();
const { params, query } = route;
const isSuccess = ref(0);
const count = ref(5);

function doActivateByTicket() {
  const ticket = query.ticket;
  activateByTicket(ticket)
    .then((res) => {
      console.log(res, "res");
      localStorage.setItem("AccessToken", res.data.token);
      isSuccess.value = 1;
      const timer = setInterval(() => {
        if (count.value != 0) {
          count.value -= 1;
        } else {
          clearInterval(timer);
          router.push("/createVideo");
        }
      }, 1000);
    })
    .catch((err) => {
      console.log(err, "err");
      isSuccess.value = 2;
    });
}

function goLogin() {
  const AccessToken = localStorage.getItem("AccessToken");
  if (AccessToken) {
    router.push("/createVideo");
  } else {
    router.push("/login");
  }
}

function reSend() {
  const email = query.email;
  reSendEmail(email as string);
}

/**
 * @description:重新发送邮件
 * @param {string} email
 * @return: data
 */
async function reSendEmail(email: string) {
  const msg =
    currentLan.value == "zh-cn"
      ? "确认信息已发送至您的邮箱，请注意查收！"
      : "An email has been send to you, Please pay attention to confirm !";
  await sendRegisterEmail(email)
    .then((res) => {
      console.log(res, "res");
      ElMessage.success(msg);
      isSuccess.value = 3;
    })
    .catch((err) => {
      console.log(err, "err");
      if (err.code == 2113) {
        ElMessage.success(err.message);
        router.push("/login");
        return;
      }
      ElMessage.error(err.message);
      router.push("/login");
    });
}

onMounted(() => {
  console.log(query, "query");
  if (query.ticket || query.email) {
    doActivateByTicket();
  } else {
    router.push("/login");
  }
});
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  height: 100%;
  padding: 100px 0 0 40px;
  background-color: #000000;
  color: #ffffff;
  .logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .lanSelect {
    position: absolute;
    top: 40px;
    right: 40px;
  }

  .success {
    font-size: 25px;
    text-align: center;
    margin-bottom: 28px;
  }
  .welcome {
    font-size: 30px;
    text-align: center;
    margin: 28px;
  }
  .login {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(270deg, #4b61dc, #15d1b8);
    border-radius: 10px;
    transition: all 0.3s;
    margin: auto;
    &:hover {
      transform: scale(1.1);
    }
  }
}
</style>
