<script lang="ts" setup>
import { VITE_CONFIG_FILE_SEVER_URL } from "@/constants/constants";
import { httpApp } from "@/plugins/axiosApp";
import { onMounted, onUnmounted } from "vue";

let clicked = $ref(false);
let fetchInterval = -1;
onMounted(() => {
  void fetchNotice();
  fetchInterval = window.setInterval(() => {
    void fetchNotice();
  }, 60 * 1000);
});
onUnmounted(() => {
  clearInterval(fetchInterval);
});

let notice = $ref({
  title: "",
  content: "",
  enable: false,
});

async function fetchNotice() {
  const url =
    VITE_CONFIG_FILE_SEVER_URL +
    "/sys_notice/org_all.json?" +
    Date.now() +
    Math.random();
  const res = await httpApp.get(url, { withCredentials: false });

  notice = res.data;
  // notice.title = "停服通知";
  // notice.content =
  //   "网考服务计划于 2020-09-20 22:00:00 ~ 2020-09-21 01:00:00 期间停服升级。请合理安排考试时间。";
}

function clickBtn() {
  logger({
    cnl: ["local", "server", "console"],
    pgn: "GlobalNotice",
    act: "点击-确定按钮",
  });
  clicked = true;
}

const show = $computed(() => !clicked && notice.enable);
</script>

<template>
  <teleport to="body">
    <div
      v-if="show"
      style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: white;
      "
      class="tw-flex tw-justify-center tw-items-center tw-opacity-95"
    >
      <div
        style="
          width: 600px;
          border: 1px solid #999;
          border-radius: 5px;
          padding: 20px;
          color: black;
          text-align: center;
        "
      >
        <div style="font-size: 28px">{{ notice.title }}</div>
        <div style="font-size: 18px; text-align: left">
          {{ notice.content.repeat(1) }}
        </div>
        <div>
          <n-button
            size="large"
            type="success"
            class="qm-primary-button"
            style="margin-top: 30px; width: 160px"
            long
            @click="clickBtn"
          >
            确定
          </n-button>
        </div>
      </div>
    </div>
  </teleport>
</template>

<style></style>
