<template>
  <div class="emergency-procedure-container">
    <div class="container-title">
      <span class="line"></span>
      <span class="title">应急处置</span>
    </div>
    <YearSelector
      class="year-selector"
      :years="yearsList"
      :default-year="yearSelected"
      @year-change="handleYearChange"
    />
    <div class="event-counts">
      <div v-if="yearSelected === defaultYear">
        <span>本月应急事件</span>
        <span class="event-count">{{ monthCount }}</span>
      </div>
      <div>
        <span>本年应急事件</span>
        <span class="event-count">{{ yearCount }}</span>
      </div>
    </div>
    <EmergencyEventsChart class="events-echarts" :data="chartData" v-loading="loading" />
    <div class="container-title">
      <span class="line"></span>
      <span class="title">应急事件</span>
    </div>
    <div class="events-list" v-loading="loading">
      <div
        class="event-item"
        :class="{ 'event-item-inprogress': item.status === EMERGENCY_PROCEDURE_STATUS.INPROGRESS }"
        v-for="(item, index) in eventsList"
        :key="index"
      >
        <div class="event-name" :title="item.eventName">{{ item.eventName }}</div>
        <div class="event-time">{{ item.startTime }}</div>
        <div class="event-status" v-if="item.status === EMERGENCY_PROCEDURE_STATUS.INPROGRESS">启动中</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref, watch } from 'vue';
  import YearSelector from './YearSelector.vue';
  import EmergencyEventsChart from './EmergencyEventsChart.vue';
  import { EMERGENCY_PROCEDURE_STATUS } from '@/views/emergency/emergency-procedure/constant';
  import {
    QueryEmergencyHandleOverviewRes,
    HandleTaskByMonthList,
    HandleTaskList,
    getOverviewEmergencyProcedure,
  } from '@/api/emergency-overview';

  const loading = ref(true);

  const emergencyProcedureData = ref<QueryEmergencyHandleOverviewRes[]>([]);
  const chartData = ref<HandleTaskByMonthList[]>([]);
  const eventsList = ref<HandleTaskList[]>([]);

  const defaultYear = ref<number>(new Date().getFullYear()); // 默认为当前年份
  const yearsList = ref<number[]>([]);
  const yearSelected = ref<number | undefined>();

  const monthCount = ref<number | undefined>(0);
  const yearCount = ref<number | undefined>(0);

  const handleYearChange = (year: number) => {
    yearSelected.value = year;
  };

  watch(
    () => yearSelected.value,
    (newValue) => {
      loading.value = true;
      const targetYearData = emergencyProcedureData.value.find((item) => item.year === newValue);
      if (!targetYearData) return;
      monthCount.value = targetYearData.currentMonthCount;
      yearCount.value = targetYearData.currentYearCount;
      chartData.value = targetYearData.handleTaskByMonthList;
      eventsList.value = targetYearData.handleTaskList;
      loading.value = false;
    },
    { immediate: true },
  );

  onMounted(() => {
    getOverviewEmergencyProcedure().then((res) => {
      emergencyProcedureData.value = res.handleTaskByYearList;
      if (emergencyProcedureData.value && emergencyProcedureData.value.length > 0) {
        yearsList.value = emergencyProcedureData.value.map((item) => item.year);
        yearSelected.value = emergencyProcedureData.value[emergencyProcedureData.value.length - 1].year;
      }
    });
  });
</script>

<style scoped lang="scss">
  .container-title {
    height: 24px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #000000;

    .line {
      width: 3px;
      height: 16px;
      background: #1777ff;
      margin-right: 10px;
    }

    .title {
      margin-right: 12px;
    }
  }

  .emergency-procedure-container {
    width: 100%;
    height: 100%;
    padding: 10px 0;
    position: relative;

    .year-selector {
      position: absolute;
      top: 11px;
      right: 16px;
    }

    .event-counts {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 20px 7px 10px 7px;
      padding: 12px 0px;
      background: #e7f1ff;
      border-radius: 8px;
      font-weight: 400;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);

      .event-count {
        color: #1777ff;
        margin-left: 4px;
      }
    }

    .events-echarts {
      margin: 15px 10px;
    }

    .events-list {
      width: 100%;
      height: calc(100% - 387px);
      margin-top: 20px;
      padding: 0 10px;
      overflow: auto;

      .event-item {
        width: 100%;
        height: 82px;
        background: #f4faff;
        margin-bottom: 10px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 16px;
        position: relative;

        .event-name {
          font-weight: 500;
          font-size: 16px;
          color: #333333;
          margin-bottom: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .event-time {
          font-size: 14px;
          color: #666666;
        }

        .event-status {
          position: absolute;
          top: 0;
          right: 0;
          background: #ff4d4f;
          border-radius: 0px 8px 0px 8px;
          font-size: 10px;
          color: #ffffff;
          padding: 2px 6px;
        }
      }

      .event-item-inprogress {
        background: #dcfaff;
      }
    }
  }
</style>
