<template>
  <div class="overview-container">
    <header class="overview-container__header"> </header>
    <main class="overview-container__main">
      <section class="left-info-section">
        <div class="today-weather">
          <header class="today-weather__header">
            <div class="banner">
              <div class="line"></div>
              <span class="title">今日天气</span>
            </div>
            <div class="location-and-time">
              <span>上海市</span>
              <div class="time">
                <span>{{ currentDate }}</span>
                <span>{{ currentWeek }}</span>
                <span>{{ currentTime }}</span>
              </div>
            </div>
          </header>
          <div class="info-box"> </div>
        </div>
        <div class="left-info-section__bottom-box">
          <div class="disaster-warning-record">
            <header class="disaster-warning-record__header">
              <div class="banner">
                <div class="line"></div>
                <span class="title">灾害预警记录</span>
              </div>
            </header>
            <main class="disaster-warning-record__main">
              <DisasterWarning />
            </main>
          </div>
          <div class="bottom-box--right-item">
            <div class="disaster-loss-and-loss-record">
              <header class="disaster-loss-and-loss-record__header">
                <div class="banner">
                  <div class="line"></div>
                  <span class="title">灾害检查及损失记录</span>
                </div>
              </header>
            </div>
            <div class="defensive-notice-and-regulation">
              <header class="defensive-notice-and-regulation__header">
                <div class="banner">
                  <div class="line"></div>
                  <span class="title">防御通知和规定</span>
                </div>
              </header>
              <main class="defensive-notice-and-regulation__main">
                <DefenseNotice />
              </main>
            </div>
          </div>
        </div>
      </section>
      <section class="right-info-section">
        <header class="right-info-section__header">
          <div class="banner">
            <div class="line"></div>
            <span class="title">重点区域视频监控</span>
          </div>
        </header>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  import DisasterWarning from './src/components/DisasterWarning.vue';
  import DefenseNotice from './src/components/DefenseNotice.vue';
  import dayjs from 'dayjs';

  const currentDate = ref('');
  const currentWeek = ref('');
  const currentTime = ref('');

  // 更新时间函数
  const updateDateTime = () => {
    const now = dayjs();
    currentDate.value = now.format('MM月DD日');
    currentWeek.value = `星期${now.format('dd').slice(-1)}`;
    currentTime.value = now.format('HH:mm:ss');
  };

  let timer: NodeJS.Timeout;

  onMounted(() => {
    updateDateTime();
    timer = setInterval(updateDateTime, 1000);
  });

  onUnmounted(() => {
    clearInterval(timer);
  });
</script>

<style scoped lang="scss">
  .banner {
    display: flex;
    align-items: center;
    gap: 15cpx;
    .line {
      width: 3cpx;
      height: 16cpx;
      background-color: $primary-color;
    }
    .title {
      font-size: 16cpx;
      font-weight: 600;
      color: $text-color;
    }
  }
  .overview-container {
    @include flex-center;
    flex-direction: column;
    gap: 10cpx;
    width: 100%;
    height: 100%;
    background-color: $background-color;
    &__header {
      width: 100%;
      height: 40cpx;
      border-radius: 8cpx;
      background-color: #fff1b8;
    }
    &__main {
      @include flex-center;
      gap: 10cpx;
      width: 100%;
      flex: 1;
    }
  }
  .left-info-section,
  .right-info-section {
    height: 100%;
  }
  .left-info-section {
    display: flex;
    flex-direction: column;
    gap: 10cpx;
    flex: 1;
    &__bottom-box {
      display: flex;
      gap: 10cpx;
      width: 100%;
      flex: 1;
    }
  }
  .disaster-warning-record,
  .disaster-loss-and-loss-record,
  .defensive-notice-and-regulation,
  .right-info-section {
    display: flex;
    flex-direction: column;
    gap: 10cpx;
    padding-top: 20cpx;
    background-color: $white-color;
    &__main {
      width: 100%;
      flex: 1;
    }
  }
  .disaster-warning-record {
    width: 448cpx;
    height: 100%;
    &__main {
      padding-left: 26cpx;
    }
  }
  .disaster-loss-and-loss-record {
    width: 100%;
    flex: 1;
  }
  .defensive-notice-and-regulation {
    width: 100%;
    height: 220cpx;
  }
  .bottom-box--right-item {
    display: flex;
    flex-direction: column;
    gap: 10cpx;
    flex: 1;
    height: 100%;
  }
  .right-info-section {
    width: 406cpx;
  }
  .today-weather {
    position: relative;
    width: 100%;
    height: 267cpx;
    padding-top: 12cpx;
    border-radius: 4cpx;
    background: linear-gradient(90deg, #7ea7fe 0%, #a4cdc9 100%);
    &__header {
      display: flex;
      align-items: center;
      gap: 48cpx;
      color: $text-color;
      font-weight: 500;
      font-size: 16cpx;
    }
  }
  .info-box {
    position: absolute;
    right: 26cpx;
    bottom: 11cpx;
    width: 653cpx;
    height: 191cpx;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba($white-color, 0.2);
      backdrop-filter: blur(10px);
      border-radius: 4cpx;
    }
  }
  .location-and-time {
    display: flex;
    align-items: center;
    gap: 20cpx;
    .time {
      display: flex;
      gap: 5cpx;
    }
  }
</style>
