<script setup lang="ts">
import router from "@/router";
import { store } from "@/store/store";
import { onUnmounted, watch } from "vue";
import PhoneVerifyForDD from "./PhoneVerifyForDD.vue";
import PrivacyDialog from "./PrivacyDialog.vue";

let phonePassed = $ref(false);
let privacyPassed = $ref(false);

let autoCloseModal = $ref(10);
let interval = -1;

function goOnlineExam() {
  void router.push({ name: "OnlineExam" });
}

function modalMounted() {
  interval = window.setInterval(() => autoCloseModal--, 1000);
}

watch(
  () => autoCloseModal,
  () => {
    if (autoCloseModal < 0) {
      goOnlineExam();
    }
  }
);

onUnmounted(() => clearInterval(interval));
</script>

<template>
  <PrivacyDialog v-model="privacyPassed" />
  <PhoneVerifyForDD v-if="privacyPassed" v-model="phonePassed" />
  <n-modal
    v-if="privacyPassed && phonePassed"
    :show="true"
    :closable="false"
    preset="card"
    title="欢迎"
    style="width: 400px"
    @vnodeMounted="modalMounted"
  >
    <div class="welcome-modal tw-mb-6">
      <div class="smile-png tw-mr-4" />
      <div>
        <div class="tw-mb-4">欢迎使用考试系统，祝顺利完成考试！</div>
        <div class="em-text">
          姓名：{{ store.user.name }} - {{ " " }}
          {{ store.user.studentCodeList.join(",") }}
        </div>
        <div class="em-text">专业：{{ store.user.specialty }}</div>
      </div>
    </div>

    <n-button class="tw-float-right" type="success" @click="goOnlineExam">
      确定
    </n-button>
  </n-modal>
</template>

<style scoped>
.welcome-modal {
  display: flex;
  margin-left: 20px;
}
.smile-png {
  min-width: 40px;
  height: 40px;
  background: url(./smile-icon.png);
}

.em-text {
  font-weight: bold;
  line-height: 25px;
}
</style>
