<template>
  <div class="fullscreen-container">
    <myHeader ref="myHeaderRef" place="0"></myHeader>
    <div style="position: absolute; width: 100%; display: flex; justify-content: space-between; top: 102px">
      <img style="width: 846px" src="/static/screen/img/header-aside-left.png" alt="" />
      <img style="width: 845px" src="/static/screen/img/header-aside-right.png" alt="" />
    </div>
    <main v-if="ready">
      <!-- 页面左边模块 -->
      <div>
        <div class="main-left">
          <div style="display: flex">
            <div class="peapleNum myborder">
              <peopeleNum ref="peopeleNumRef" :screenData="screenData"></peopeleNum>
            </div>
            <div class="videoBox myborder">
              <myVideo ref="myVideoRef" :screenData="screenData"></myVideo>
            </div>
          </div>
          <div class="todayNotice myborder">
            <todayNotice ref="todayNoticeRef" :screenData="screenData"></todayNotice>
          </div>
        </div>
      </div>
      <!-- 页面右边模块 -->
      <div>
        <div class="main-right myborder">
          <todayInfo ref="todayInfoRef" :screenData="screenData"></todayInfo>
        </div>
      </div>
    </main>
  </div>
</template>
<script setup>
import myHeader from "./component/header.vue";
import peopeleNum from "./component/index/peopeleNum.vue";
import myVideo from "./component/index/video.vue";
import todayNotice from "./component/index/todayNotice.vue";
import todayInfo from "./component/index/todayInfo.vue";
import { screenApi } from "@/api";
const screenData = ref({});
const ready = ref(false);
const myHeaderRef = ref(null);
const peopeleNumRef = ref(null);
const myVideoRef = ref(null);
const todayNoticeRef = ref(null);
const todayInfoRef = ref(null);
onMounted(() => {
  getData();
  refresh(async () => {
    await getData();
    peopeleNumRef.value.init();
    myVideoRef.value.init();
    todayNoticeRef.value.init();
    todayInfoRef.value.init();
  }, 60000);
});
const getData = () => {
  return screenApi.getHomeData().then(res => {
    if (res.code == 200) {
      screenData.value = res.data;
      console.log(res.data);
      ready.value = true;
      nextTick(() => {
        myHeaderRef.value.setBoder();
      });
    }
  });
};
// 定时刷新
var timer = "";
const refresh = (fn = () => {}, time = 5000) => {
  timer = setInterval(fn, time);
};
onUnmounted(() => {
  timer && clearInterval(timer);
});
</script>
<style lang="scss" scoped>
main {
  padding: 41px 53px 0px 58px;
  display: flex;
  justify-content: space-between;
  .main-left {
    .peapleNum {
      padding: 28px 36px;
      box-sizing: border-box;
      display: inline-block;
      width: 661px;
      height: 608.896px;
      margin-right: 26px;
    }
    .videoBox {
      padding: 32px 36px;
      box-sizing: border-box;
      display: inline-block;
      width: 1070px;
      height: 609px;
    }
    .todayNotice {
      padding: 32px 45px;
      box-sizing: border-box;
      display: inline-block;
      width: 1760px;
      height: 617px;
      margin-top: 24px;
    }
  }
  .main-right {
    width: 661px;
    height: 1249px;
    padding: 36px;
    box-sizing: border-box;
  }
}
</style>
