<template>
  <div class="app">
    <div
      id="index"
      ref="appRef"
    >
      <div class="bg">
        <dv-loading v-if="loading">Loading ...</dv-loading>
        <div
          v-else
          class="host-body"
        >
          <div class="d-flex jc-center">
            <dv-decoration-10 class="dv-dec-10" />
            <div class="d-flex jc-center">
              <dv-decoration-8
                class="dv-dec-8"
                :color="decorationColors"
              />
              <div class="title">
                <span class="title-text">{{ title }}</span>
                <dv-decoration-6
                  class="dv-dec-6"
                  :reverse="true"
                  :color="['#50e3c2', '#67a1e5']"
                />
              </div>
              <dv-decoration-8
                class="dv-dec-8"
                :reverse="true"
                :color="decorationColors"
              />
            </div>
            <dv-decoration-10 class="dv-dec-10-s" />
          </div>

          <!-- 第二行 -->
          <div class="d-flex jc-between px-2">
            <div class="d-flex aside-width">
              <div class="react-left ml-4 react-l-s">
                <span class="react-before"></span>
                <span class="text">{{ subtitle[0] }}</span>
              </div>
              <div class="react-left ml-3">
                <span class="text">{{ subtitle[1] }}</span>
              </div>
            </div>
            <div class="d-flex aside-width">
              <div class="react-right bg-color-blue mr-3">
                <span class="text fw-b">{{ subtitle[2] }}</span>
              </div>
              <div class="react-right mr-4 react-l-s">
                <span class="react-after"></span>
                <span class="text">
                  {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
                  {{ timeInfo.dateDay }}
                </span>
              </div>
            </div>
          </div>

          <div class="body-box">
            <!-- 第三行数据 -->
            <div class="content-box">
              <div>
                <dv-border-box-12>
                  <!-- <CenterLeft1 /> -->
                </dv-border-box-12>
              </div>
              <div>
                <dv-border-box-12>
                  <!-- <CenterLeft2 /> -->
                </dv-border-box-12>
              </div>
              <!-- 中间 -->
              <div>
                <!-- <Center /> -->
              </div>
              <!-- 中间 -->
              <div>
                <!-- <CenterRight1 /> -->
              </div>
              <div>
                <dv-border-box-13>
                  <CenterRight2 />
                </dv-border-box-13>
              </div>
            </div>

            <!-- 第四行数据 -->
            <div class="bototm-box">
              <dv-border-box-13>
                <BottomLeft />
              </dv-border-box-13>
              <dv-border-box-12>
                <!-- <BottomRight /> -->
              </dv-border-box-12>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, onUnmounted } from "vue";
  import { formatTime } from "./utils/index";
  import { WEEK } from "./constant/index";
  import useDraw from "./utils/useDraw.ts";
  import { title, subtitle, moduleInfo } from "./constant/index";

  // 有用的 已修改的组件
  import BottomLeft from "./components/bottomLeft/index.vue";
  import CenterRight2 from "./components/centerRight2/index.vue";

  // 未修改的组件
  import CenterLeft1 from "./components/centerLeft1/index.vue";
  import CenterLeft2 from "./components/centerLeft2/index.vue";
  import Center from "./components/center/index.vue";
  import CenterRight1 from "./components/centerRight1/index.vue";
  import BottomRight from "./components/bottomRight/index.vue";

  // * 颜色
  const decorationColors = ["#568aea", "#000000"];

  // * 加载标识
  const loading = ref<boolean>(true);

  // * 时间内容
  const timeInfo = reactive({
    setInterval: 0,
    dateDay: "",
    dateYear: "",
    dateWeek: "",
  });

  // * 适配处理
  const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();

  // 生命周期
  onMounted(() => {
    cancelLoading();
    handleTime();
    windowDraw();
    calcRate();
  });

  onUnmounted(() => {
    unWindowDraw();
    clearInterval(timeInfo.setInterval);
  });

  // 处理 loading 展示
  const cancelLoading = () => {
    setTimeout(() => {
      loading.value = false;
    }, 500);
  };

  // 处理时间监听
  const handleTime = () => {
    timeInfo.setInterval = setInterval(() => {
      const date = new Date();
      timeInfo.dateDay = formatTime(date, "HH: mm: ss");
      timeInfo.dateYear = formatTime(date, "yyyy-MM-dd");
      timeInfo.dateWeek = WEEK[date.getDay()];
    }, 1000);
  };
</script>

<style lang="scss" scoped>
  * {
    box-sizing: border-box;
  }
  .app {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    background-color: #020308;
    overflow: hidden;
    #index {
      color: #d3d6dd;
      width: 1920px;
      height: 1080px;

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform-origin: left top;
      /* transform-origin: center center; */
      .bg {
        width: 100%;
        height: 100%;
        padding: 16px 16px 0 16px;
        background-image: url("./assets/pageBg.png");
        background-size: cover;
        background-position: center center;
      }

      .host-body {
        .dv-dec-10,
        .dv-dec-10-s {
          width: 33.3%;
          height: 5px;
        }
        .dv-dec-10-s {
          transform: rotateY(180deg);
        }
        .dv-dec-8 {
          width: 200px;
          height: 50px;
        }
        .title {
          position: relative;
          width: 500px;
          text-align: center;
          background-size: cover;
          background-repeat: no-repeat;

          .title-text {
            font-size: 24px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
          }

          .dv-dec-6 {
            position: absolute;
            bottom: -30px;
            left: 50%;
            width: 250px;
            height: 8px;
            transform: translate(-50%);
          }
        }

        // 第二行
        .aside-width {
          width: 40%;
        }
        .react-r-s,
        .react-l-s {
          background-color: #0f1325;
        }

        // 平行四边形
        .react-right {
          &.react-l-s {
            text-align: right;
            width: 500px;
          }
          font-size: 18px;
          width: 300px;
          line-height: 50px;
          text-align: center;
          transform: skewX(-45deg);

          .react-after {
            position: absolute;
            right: -25px;
            top: 0;
            height: 50px;
            width: 50px;
            background-color: #0f1325;
            transform: skewX(45deg);
          }

          .text {
            display: inline-block;
            transform: skewX(45deg);
          }
        }

        .react-left {
          &.react-l-s {
            width: 500px;
            text-align: left;
          }
          font-size: 18px;
          width: 300px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          transform: skewX(45deg);
          background-color: #0f1325;

          .react-before {
            position: absolute;
            left: -25px;
            top: 0;
            height: 50px;
            width: 50px;
            background-color: #0f1325;
            transform: skewX(-45deg);
          }

          .text {
            display: inline-block;
            transform: skewX(-45deg);
          }
        }

        .body-box {
          margin-top: 16px;
          display: flex;
          flex-direction: column;

          //下方区域的布局
          .content-box {
            display: grid;
            grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
          }

          // 底部数据
          .bototm-box {
            margin-top: 10px;
            display: grid;
            grid-template-columns: repeat(2, 50%);
          }
        }
      }
    }
  }
</style>
