<template>
  <div></div>
</template>

<script>
import { VUE_APP_CONFIG_FILE_SEVER_URL } from "@/constants/constants";
export default {
  name: "GlobalNotice",
  data() {
    return {
      clicked: false,
    };
  },
  watch: {
    clicked(val) {
      if (val) {
        this.$Spin.hide();
      }
    },
    $route(to) {
      // 因为此时正在离开，应该不会影响到新页面的Spin。但是最好的办法确实是限制在本组件，也许vue3的 target 能帮助这里。
      if (to.name !== "Login") {
        this.$Spin.hide();
      }
    },
  },
  async created() {
    this.fetchNotice();
    this.fetchInterval = setInterval(() => {
      this.fetchNotice();
    }, 60 * 1000);
  },
  beforeDestroy() {
    clearInterval(this.fetchInterval);
  },
  methods: {
    async fetchNotice() {
      const url =
        VUE_APP_CONFIG_FILE_SEVER_URL +
        "/sys_notice/org_all.json?" +
        Date.now() +
        Math.random();
      const res = await this.$http.get(url, {
        withCredentials: false,
      });

      const notice = res.data;
      // notice.title = "停服通知";
      // notice.content =
      //   "网考服务计划于 2020-09-20 22:00:00 ~ 2020-09-21 01:00:00 期间停服升级。请合理安排考试时间。";
      if (!this.clicked && notice.enable) {
        this.$Spin.show({
          render: () => {
            return (
              <div style="width: 600px; border: 1px solid #999; border-radius: 5px; padding: 20px; color: black">
                <div style="font-size: 28px">{notice.title}</div>
                <div style="font-size: 18px; text-align: left">
                  {notice.content.repeat(1)}
                </div>
                <div>
                  <i-button
                    size="large"
                    class="qm-primary-button"
                    style="margin-top: 30px; width: 160px"
                    long
                    on-click={this.clickBtn}
                  >
                    确定
                  </i-button>
                </div>
              </div>
            );
          },
        });
      }
    },
    clickBtn() {
      this.logger({
        page: "GlobalNotice",
        button: "确定按钮",
        action: "点击",
      });
      this.clicked = true;
    },
  },
};
</script>

<style></style>
