<template>
  <div class="command-center-container">
    <div class="command-center__header">
      <div class="date-time">
        <span>{{ currentDate }}</span>
        <span class="time">{{ currentTime }}</span>
      </div>
      <div class="title">{{ eventTitle }}应急处置指挥中心</div>
    </div>
    <div class="command-center__body">
      <div class="emergency-info">
        <EmergencySupply class="emergency-supplies" />
        <EmergencyOrganization class="emergency-organization" />
      </div>
      <MonitorCameras class="monitor-cameras" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import EmergencySupply from './components/EmergencySupply.vue';
  import EmergencyOrganization from './components/EmergencyOrganization.vue';
  import MonitorCameras from './components/MonitorCameras.vue';
  import { getEmergencyProcedureById } from '@/api/emergency-procedure';

  const route = useRoute();
  const emergencyEventId = Number(route.params.id);

  const eventTitle = ref('');

  let timer: NodeJS.Timeout;
  const currentDate = ref('');
  const currentTime = ref('');

  const updateDateTime = () => {
    const now = dayjs();
    currentDate.value = now.format('YYYY年MM月DD日');
    currentTime.value = now.format('HH:mm:ss');
  };

  onMounted(() => {
    updateDateTime();
    timer = setInterval(updateDateTime, 1000);
    getEmergencyProcedureById(emergencyEventId).then((res) => {
      eventTitle.value = res.eventName;
    });
  });

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

<style lang="scss" scoped>
  .command-center-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #d8e3f4;
    z-index: 3;
    overflow: hidden;
  }

  .command-center__header {
    width: 100%;
    height: 50px;
    background: url('assets/images/home/nav-bg@1X.png');
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .date-time {
      position: absolute;
      left: 0;
      top: 0;
      width: 182px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      opacity: 0.6;
      font-size: 12px;
      color: #666666;

      .time {
        font-weight: 500;
        font-size: 14px;
        color: #000000;
        margin-left: 4px;
      }
    }

    .title {
      font-weight: 500;
      font-size: 18px;
      color: #000000;
    }
  }

  .command-center__body {
    width: 100%;
    height: calc(100% - 50px);
    padding: 10px;
    display: flex;
    justify-content: space-between;

    .emergency-info {
      width: 380px;
      height: 100%;
      display: flex;
      flex-direction: column;

      .emergency-supplies {
        width: 100%;
        height: 55%;
        background-color: #fff;
        border-radius: 8px;
      }

      .emergency-organization {
        width: 100%;
        height: calc(45% - 10px);
        margin-top: 10px;
        background-color: #fff;
        border-radius: 8px;
      }
    }

    .monitor-cameras {
      width: calc(100% - 390px);
      height: 100%;
      background: #ffffff;
      border-radius: 8px;
    }
  }
</style>
