<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="frame">
          <!--头标-->
          <div class="d-flex jc-center bg-title nav-box">
            <div class="nav">
              <span class="timersty">{{ dateDay }}</span>
              <div class="navkk1">
                <span>{{ dateWeek }}</span>
                <span class="navktext">{{ dateYear }}</span>
              </div>
            </div>
            <div class="d-flex jc-center">
              <div class="title">
              </div>
            </div>
            <div class="nav">
              <span><img src="../assets/image/u1623.png" alt="" class="nav-img"></span>
              <div class="F11" @click="F11" :class="isFullscreen ? 'screen' : 'full'"></div>
            </div>
          </div>


          <!--  主体部分 -->
          <div class="body-box">
            <div class="mainTop">
              <!-- 第一行 数据展示 -->
              <topbox :countObj="countObj" />
            </div>

            <div class="mainCenter">
              <centerbox :countObj="countObj" />
            </div>

            <div class="mainBtm">
              <bottombox />
            </div>

          </div>

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

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from "../utils/index.js";
import topbox from "./largebox/topbox.vue";
import centerbox from "./largebox/centerbox.vue";
import bottombox from "./largebox/bottombox.vue";
import { request } from "@/utils/request.js";

export default {
  components: {
    topbox,
    centerbox,
    bottombox,
  },
  mixins: [drawMixin],
  data() {
    return {
      isFullscreen: false,
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      countObj: {},
      intervalId: null,
    };
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
    this.setData();
    this.startInterval(); // 开启定时器（取消注释）

  },
  beforeDestroy() {
    clearInterval(this.timing);
    if (this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
  },
  methods: {
    F11() {
      this.isFullscreen = !this.isFullscreen;
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy年MM月dd日");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    startInterval() {
      const _this = this;
      const time = 5 * 60 * 1000;
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        _this.setData();
      }, time);
    },
    // 根据自己的业务情况修改
    setData() {
      const _this = this;
      request({
        url: "/admin-api/heli/screen/searchUnfinished",
        method: "get",
        headers: {
          "tenant-id": 2
        }
      }).then((res) => {
        _this.countObj = res.data
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/largcss/largindex.scss";

.bototm-box {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.F11 {
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
}
</style>
