<script setup lang="ts">
import {
  ref,
  onMounted,
  reactive,
  onBeforeUnmount,
  computed,
  nextTick,
  watch,
} from 'vue';
import {
  ExclamationCircleOutlined,
  WarningOutlined,
  InfoCircleOutlined,
  BellOutlined,
} from '@ant-design/icons-vue';
import * as echarts from 'echarts';
import { useRouter } from 'vue-router';
import { origGet } from '@/api/faultManage/actAlarm';

import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
import { useFullscreen } from '@vueuse/core';

const { t } = useI18n();

const router = useRouter();

const viewportDom = ref<HTMLElement | null>(null);
const { isFullscreen, toggle } = useFullscreen(viewportDom);

const trendRange = ref('1'); // '1'：今天，'7'：7天，'30'：30天

// 加载状态
const loading = ref(false);

// 定时器引用
let refreshTimer: number | null = null;

// 最新告警列表
const allLatestAlarmsAct: any = ref([]);

const allLatestAlarmsHis: any = ref([]);

const newHistoryAlarms = ref(new Set());
const newActiveAlarms = ref(new Set());

const alarmTypeType = ref<any>([
  {
    value: 0,
    name: t('views.index.Critical'),
  },
  {
    value: 0,
    name: t('views.index.Major'),
  },
  {
    value: 0,
    name: t('views.index.Minor'),
  },
  {
    value: 0,
    name: t('views.index.Warning'),
  },
  // {
  //   value: 0,
  //   name: t('views.index.Event'),
  // },
]);

// 使用计算属性确保显示固定数量的告警
const latestAlarmsAct: any = computed(() => {
  return allLatestAlarmsAct.value.slice(0, 10); // 始终显示前5条
});

const latestAlarmsHis: any = computed(() => {
  return allLatestAlarmsHis.value.slice(0, 10); // 始终显示前5条
});

// 告警数据
const alarmData = reactive({
  critical: 0,
  major: 0,
  minor: 0,
  warning: 0,
});

// 图表引用
const trendChart = ref(null);
const typeChart = ref(null);

let trendChartInstance: echarts.ECharts | null = null;

// 跳转到告警页面
function fnToRouter(name: string, query?: any) {
  router.push({ name, query });
}

function getFullHourAxis() {
  const hours: string[] = [];
  for (let i = 0; i < 24; i++) {
    hours.push(i.toString().padStart(2, '0') + ':00');
  }
  return hours;
}

function getFullDayAxis(days: number) {
  const daysArr: string[] = [];
  const today = new Date();
  for (let i = days - 1; i >= 0; i--) {
    const d = new Date(today);
    d.setDate(today.getDate() - i);
    daysArr.push(d.toISOString().slice(0, 10));
  }
  return daysArr;
}

function getFull4HourAxis() {
  const hours: string[] = [];
  for (let i = 0; i < 24; i += 4) {
    hours.push(i.toString().padStart(2, '0') + ':00');
  }
  return hours;
}

function fillTrendData(rawData: any[], axis: string[]) {
  const map = new Map(rawData.map(item => [item.time, item]));
  return axis.map(time => ({
    time,
    Critical: map.get(time)?.Critical ?? 0,
    Major: map.get(time)?.Major ?? 0,
    Minor: map.get(time)?.Minor ?? 0,
    Warning: map.get(time)?.Warning ?? 0,
  }));
}

const isFirstLoad = ref(true);

// 修改获取最新活动告警的方法
async function fetchLatestAlarmsAct() {
  try {
    const res = { code: 0, rows: [] }; // await alarmDashGetAct();
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
      // 只有非首次加载才检查新告警
      if (!isFirstLoad.value) {
        // 获取当前告警ID集合
        const currentIds = new Set(
          allLatestAlarmsAct.value.map((alarm: any) => alarm.alarmId)
        );
        console.log('currentIds', currentIds);

        // 找出新告警
        res.rows.forEach((alarm: any) => {
          if (!currentIds.has(alarm.alarmId)) {
            console.log('新活动告警:', alarm.alarmId, alarm.alarmTitle);
            newActiveAlarms.value.add(alarm.alarmId);
            // 3秒后移除新告警标记
            setTimeout(() => {
              newActiveAlarms.value.delete(alarm.alarmId);
            }, 3000);
          }
        });
      }

      // 更新告警列表
      allLatestAlarmsAct.value = res.rows;
    }
  } catch (error) {
    console.error('Get Act-Data List error:', error);
  }
}

async function fetchLatestAlarmsHis() {
  try {
    const res = { code: 0, rows: [] }; //await alarmDashGetHis();
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
      // 只有非首次加载才检查新告警
      if (!isFirstLoad.value) {
        // 获取当前告警ID集合
        const currentIds = new Set(
          allLatestAlarmsHis.value.map((alarm: any) => alarm.alarmId)
        );
        // 找出新告警
        res.rows.forEach((alarm:any) => {
          if (!currentIds.has(alarm.alarmId)) {
            console.log('新历史告警:', alarm.alarmId, alarm.alarmTitle);
            newHistoryAlarms.value.add(alarm.alarmId);
            // 3秒后移除新告警标记
            setTimeout(() => {
              newHistoryAlarms.value.delete(alarm.alarmId);
            }, 3000);
          }
        });
      }

      // 更新告警列表
      allLatestAlarmsHis.value = res.rows;
    }
  } catch (error) {
    console.error('Get His-Data List error:', error);
  }
}

// 获取告警数据
async function fetchAlarmData() {
  try {
    loading.value = true;
    const res = await origGet();
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
      // 重置告警数据
      alarmData.critical = 0;
      alarmData.major = 0;
      alarmData.minor = 0;
      alarmData.warning = 0;
      console.log('Get Data Success:', res.data);
      // 解析告警数据
      res.data.forEach((item: any) => {
        if (item.severity === 'Critical') {
          alarmData.critical = item.total;
        } else if (item.severity === 'Major') {
          alarmData.major = item.total;
        } else if (item.severity === 'Minor') {
          alarmData.minor = item.total;
        } else if (item.severity === 'Warning') {
          alarmData.warning = item.total;
        }
      });

      await fetchLatestAlarmsAct();
      await fetchLatestAlarmsHis();

      if (isFirstLoad.value) {
        isFirstLoad.value = false;
      }
    }
  } catch (error) {
    console.error('Get Data Er r:', error);
  } finally {
    loading.value = false;
  }
}

const trendData: any = ref([]);

async function fetchAlarmTrend() {
  try {
    const res = { code: 0, rows: [] }; //await getAlarmTrend({ days: trendRange.value }); // 你需要让后端支持days参数
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
      trendData.value = res.rows;
      updateTrendChart();
    }
  } catch (e) {
    console.error('Get Trend Data Error:', e);
  }
}

function updateTrendChart() {
  if (!trendChartInstance) return;

  let xAxisData: string[];
  if (trendRange.value === '1') {
    xAxisData = getFullHourAxis();
  } else {
    xAxisData = getFullDayAxis(Number(trendRange.value));
  }
  const filledData = fillTrendData(trendData.value, xAxisData);

  const critical = filledData.map(item => item.Critical);
  const major = filledData.map(item => item.Major);
  const minor = filledData.map(item => item.Minor);
  const warning = filledData.map(item => item.Warning);

  trendChartInstance.setOption({
    xAxis: {
      data: xAxisData,
      axisLabel: {
        color: '#00fcff',
        interval: xAxisData.length > 12 ? 2 : 0, // 超过12个点就隔2个显示
        // rotate: 45 // 如果你想斜着显示
      },
    },
    series: [
      {
        name: t('views.index.Critical'),
        type: 'line',
        data: critical,
        showSymbol: true,
        itemStyle: { color: '#f5222d' },
      },
      {
        name: t('views.index.Major'),
        type: 'line',
        data: major,
        showSymbol: true,
        itemStyle: { color: '#fa8c16' },
      },
      {
        name: t('views.index.Minor'),
        type: 'line',
        data: minor,
        showSymbol: true,
        itemStyle: { color: '#faad14' },
      },
      {
        name: t('views.index.Warning'),
        type: 'line',
        data: warning,
        showSymbol: true,
        itemStyle: { color: '#52c41a' },
      },
    ],
  });
}

watch(trendRange, () => {
  fetchAlarmTrend();
});

// 初始化图表
onMounted(() => {
  fetchAlarmData();
  fetchAlarmTrend(); // 定时刷新趋势数据

  // 设置定时刷新 - 每10秒刷新一次
  refreshTimer = window.setInterval(() => {
    fetchAlarmData();
    fetchAlarmTrend(); // 定时刷新趋势数据
  }, 10000);

  // 初始化告警趋势图
  nextTick(() => {
    trendChartInstance = echarts.init(trendChart.value);
    const trendOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },
      },
      legend: {
        data: alarmTypeType.value.map((item: any) => item.name),
        textStyle: {
          color: '#00fcff',
        },
        right: 10,
        top: 10,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
        axisLine: {
          lineStyle: {
            color: '#0a73ff',
          },
        },
        axisLabel: {
          color: '#00fcff',
        },
      },
      yAxis: {
        type: 'value',
        min: 0, // 设置最小值为0
        minInterval: 1, // 最小间隔为1，确保刻度是整数
        axisLine: {
          lineStyle: {
            color: '#0a73ff',
          },
        },
        axisLabel: {
          color: '#00fcff',
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(10, 115, 255, 0.2)',
          },
        },
      },
      series: [
        {
          name: t('views.index.Critical'),
          type: 'line',
          emphasis: {
            focus: 'series',
          },
          data: [0, 0, 0, 0, 0, 0],
          itemStyle: {
            color: '#f5222d',
          },
          symbol: 'none',
          symbolSize: 6,
          smooth: 0.6,
          showSymbol: true,
          sampling: 'lttb',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(250,140,22,0.4)' },
              { offset: 1, color: 'rgba(250,140,22,0.05)' },
            ]),
          },
        },
        {
          name: t('views.index.Major'),
          type: 'line',
          emphasis: {
            focus: 'series',
          },
          data: [0, 0, 0, 0, 0, 0],
          itemStyle: {
            color: '#fa8c16',
          },
          symbol: 'none',
          symbolSize: 6,
          smooth: 0.6,
          showSymbol: true,
          sampling: 'lttb',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(250,140,22,0.4)' },
              { offset: 1, color: 'rgba(250,140,22,0.05)' },
            ]),
          },
        },
        {
          name: t('views.index.Minor'),
          type: 'line',
          emphasis: {
            focus: 'series',
          },
          data: [0, 0, 0, 0, 0, 0],
          itemStyle: {
            color: '#faad14',
          },
          symbol: 'none',
          symbolSize: 6,
          smooth: 0.6,
          showSymbol: true,
          sampling: 'lttb',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(250,173,20,0.4)' },
              { offset: 1, color: 'rgba(250,173,20,0.05)' },
            ]),
          },
        },
        {
          name: t('views.index.Warning'),
          type: 'line',
          emphasis: {
            focus: 'series',
          },
          data: [0, 0, 0, 0, 0, 0],
          itemStyle: {
            color: '#52c41a',
          },
          symbol: 'none',
          symbolSize: 6,
          smooth: 0.6,
          showSymbol: true,
          sampling: 'lttb',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(82,196,26,0.4)' },
              { offset: 1, color: 'rgba(82,196,26,0.05)' },
            ]),
          },
        },
      ],
    };
    trendChartInstance.setOption(trendOption);
    trendChartInstance.resize();
  });

  // 响应式调整
  window.addEventListener('resize', handleResize);
});

// 处理窗口大小变化
function handleResize() {
  trendChartInstance?.resize();
}

// 组件销毁前清理
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);

  // 清除定时器
  if (refreshTimer !== null) {
    clearInterval(refreshTimer);
    refreshTimer = null;
  }

  // 销毁图表实例
  trendChartInstance?.dispose();
});
</script>

<template>
  <div class="viewport" ref="viewportDom">
    <div class="alarm-dashboard">
      <div class="dashboard-header">
        <div
          class="header-title"
          @click="toggle"
          :title="t('views.dashboard.overview.fullscreen')"
        >
          告警监控大屏
          <FullscreenExitOutlined v-if="isFullscreen" />
          <FullscreenOutlined v-else />
        </div>
      </div>

      <div class="dashboard-content">
        <!-- 告警概览卡片 -->
        <div class="alarm-overview">
          <div class="alarm-card Critical">
            <div class="card-border-top"></div>
            <div class="card-border-right"></div>
            <div class="card-border-bottom"></div>
            <div class="card-border-left"></div>
            <div class="alarm-icon">
              <ExclamationCircleOutlined />
            </div>
            <div class="alarm-info">
              <div class="alarm-count">{{ alarmData.critical || 0 }}</div>
              <div class="alarm-title">{{ t('views.index.Critical') }}</div>
            </div>
          </div>
          <div class="alarm-card Major">
            <div class="card-border-top"></div>
            <div class="card-border-right"></div>
            <div class="card-border-bottom"></div>
            <div class="card-border-left"></div>
            <div class="alarm-icon">
              <WarningOutlined />
            </div>
            <div class="alarm-info">
              <div class="alarm-count">{{ alarmData.major || 0 }}</div>
              <div class="alarm-title">{{ t('views.index.Major') }}</div>
            </div>
          </div>
          <div class="alarm-card Minor">
            <div class="card-border-top"></div>
            <div class="card-border-right"></div>
            <div class="card-border-bottom"></div>
            <div class="card-border-left"></div>
            <div class="alarm-icon">
              <InfoCircleOutlined />
            </div>
            <div class="alarm-info">
              <div class="alarm-count">{{ alarmData.minor || 0 }}</div>
              <div class="alarm-title">{{ t('views.index.Minor') }}</div>
            </div>
          </div>
          <div class="alarm-card Warning">
            <div class="card-border-top"></div>
            <div class="card-border-right"></div>
            <div class="card-border-bottom"></div>
            <div class="card-border-left"></div>
            <div class="alarm-icon">
              <BellOutlined />
            </div>
            <div class="alarm-info">
              <div class="alarm-count">{{ alarmData.warning || 0 }}</div>
              <div class="alarm-title">{{ t('views.index.Warning') }}</div>
            </div>
          </div>
        </div>

        <div class="dashboard-main">
          <div class="main-left">
            <!-- 告警趋势图 -->
            <div class="alarm-trend panel">
              <div class="panel-header">
                <div class="panel-title">历史告警趋势分析</div>
                <a-radio-group
                  v-model:value="trendRange"
                  size="small"
                  class="trend-range-radio"
                >
                  <a-radio-button value="1">今天</a-radio-button>
                  <a-radio-button value="3">3天</a-radio-button>
                  <a-radio-button value="7">7天</a-radio-button>
                </a-radio-group>
              </div>
              <div class="panel-content">
                <div ref="trendChart" class="trend-chart"></div>
              </div>
              <div class="panel-corner panel-corner-lt"></div>
              <div class="panel-corner panel-corner-rt"></div>
              <div class="panel-corner panel-corner-lb"></div>
              <div class="panel-corner panel-corner-rb"></div>
            </div>
          </div>

          <div class="main-right">
            <!-- 告警分布图 -->
            <div class="alarm-distribution">
              <div class="distribution-right panel">
                <div class="panel-header">
                  <div class="panel-title">最新活动告警</div>
                  <div
                    class="header-more"
                    @click="fnToRouter('HistoryAlarm_2097')"
                  >
                    更多
                  </div>
                </div>
                <div class="panel-content">
                  <div class="alarm-list">
                    <transition-group name="alarm-fade">
                      <div
                        v-for="(item, index) in latestAlarmsAct"
                        :key="item.alarmId || index"
                        class="alarm-item"
                        :class="[
                          item.origSeverity,
                          { 'new-alarm': newActiveAlarms.has(item.alarmId) },
                        ]"
                      >
                        <div class="alarm-time">{{ item.eventTime }}</div>
                        <a-tooltip
                          style="
                            max-width: 300px;
                            overflow: hidden;
                            display: block;
                          "
                          :title="item.neType + '-' + item.alarmTitle"
                          placement="top"
                        >
                          <div class="alarm-content">
                            {{ item.neType + '-' + item.alarmTitle }}
                          </div>
                        </a-tooltip>
                        <div class="alarm-level">{{ item.origSeverity }}</div>
                      </div>
                    </transition-group>
                  </div>
                </div>
                <div class="panel-corner panel-corner-lt"></div>
                <div class="panel-corner panel-corner-rt"></div>
                <div class="panel-corner panel-corner-lb"></div>
                <div class="panel-corner panel-corner-rb"></div>
              </div>

              <div class="distribution-right panel">
                <div class="panel-header">
                  <div class="panel-title">最新历史告警</div>
                  <div
                    class="header-more"
                    @click="fnToRouter('HistoryAlarm_2097')"
                  >
                    更多
                  </div>
                </div>
                <div class="panel-content">
                  <div class="alarm-list">
                    <transition-group name="alarm-fade">
                      <div
                        v-for="(item, index) in latestAlarmsHis"
                        :key="item.alarmId || index"
                        class="alarm-item"
                        :class="[
                          item.origSeverity,
                          { 'new-alarm': newHistoryAlarms.has(item.alarmId) },
                        ]"
                      >
                        <div class="alarm-time">{{ item.eventTime }}</div>
                        <a-tooltip
                          style="
                            max-width: 300px;
                            overflow: hidden;
                            display: block;
                          "
                          :title="item.neType + '-' + item.alarmTitle"
                          placement="top"
                        >
                          <div class="alarm-content">
                            {{ item.neType + '-' + item.alarmTitle }}
                          </div>
                        </a-tooltip>
                        <div class="alarm-level">{{ item.origSeverity }}</div>
                      </div>
                    </transition-group>
                  </div>
                </div>
                <div class="panel-corner panel-corner-lt"></div>
                <div class="panel-corner panel-corner-rt"></div>
                <div class="panel-corner panel-corner-lb"></div>
                <div class="panel-corner panel-corner-rb"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
@keyframes borderFlash {
  0% {
    box-shadow: 0 0 5px #0a73ff;
  }

  50% {
    box-shadow: 0 0 15px #0a73ff;
  }

  100% {
    box-shadow: 0 0 5px #0a73ff;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.alarm-dashboard {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #00fcff;
  background-image: url(./images/bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 10, 50, 0.8);
    z-index: 0;
  }
}

.dashboard-header {
  position: relative;
  z-index: 1;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;

  .header-title {
    font-size: 28px;
    font-weight: bold;
    color: #00fcff;
    text-shadow: 0 0 10px rgba(0, 252, 255, 0.5);
    position: relative;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 100px;
      height: 2px;
      background: linear-gradient(to right, transparent, #0a73ff, transparent);
    }

    &::before {
      right: 120%;
    }

    &::after {
      left: 120%;
    }
  }
}

.dashboard-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
}

.alarm-overview {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}

.alarm-card {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 4px;
  background-color: rgba(0, 26, 87, 0.7);
  box-shadow: 0 0 10px rgba(10, 115, 255, 0.3);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;

  .card-border-top,
  .card-border-right,
  .card-border-bottom,
  .card-border-left {
    position: absolute;
    background-color: #0a73ff;
  }

  .card-border-top,
  .card-border-bottom {
    height: 2px;
    width: 30%;
  }

  .card-border-left,
  .card-border-right {
    width: 2px;
    height: 30%;
  }

  .card-border-top {
    top: 0;
    left: 0;
  }

  .card-border-right {
    top: 0;
    right: 0;
  }

  .card-border-bottom {
    bottom: 0;
    right: 0;
  }

  .card-border-left {
    bottom: 0;
    left: 0;
  }

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(10, 115, 255, 0.5);

    .card-border-top,
    .card-border-right,
    .card-border-bottom,
    .card-border-left {
      background-color: #00fcff;
    }
  }

  .alarm-icon {
    font-size: 28px;
    margin-right: 15px;
  }

  .alarm-info {
    .alarm-count {
      font-size: 28px;
      font-weight: bold;
      line-height: 1.2;
    }

    .alarm-title {
      font-size: 14px;
      opacity: 0.9;
    }
  }

  &.Critical {
    .alarm-icon {
      color: #f5222d;
    }
  }

  &.Major {
    .alarm-icon {
      color: #fa8c16;
    }
  }

  &.Minor {
    .alarm-icon {
      color: #faad14;
    }
  }

  &.Warning {
    .alarm-icon {
      color: #52c41a;
    }
  }
}

.dashboard-main {
  flex: 1;
  display: flex;
  gap: 20px;
}

.main-left {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.main-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.panel {
  background-color: rgba(0, 26, 87, 0.7);
  border: 1px solid rgba(10, 115, 255, 0.3);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(10, 115, 255, 0.3);
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 20px;

  .panel-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: #0a73ff;

    &.panel-corner-lt {
      top: -1px;
      left: -1px;
      border-top: 2px solid;
      border-left: 2px solid;
    }

    &.panel-corner-rt {
      top: -1px;
      right: -1px;
      border-top: 2px solid;
      border-right: 2px solid;
    }

    &.panel-corner-lb {
      bottom: -1px;
      left: -1px;
      border-bottom: 2px solid;
      border-left: 2px solid;
    }

    &.panel-corner-rb {
      bottom: -1px;
      right: -1px;
      border-bottom: 2px solid;
      border-right: 2px solid;
    }
  }

  .panel-header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid rgba(10, 115, 255, 0.3);

    .panel-title {
      font-size: 16px;
      font-weight: bold;
      color: #00fcff;
      position: relative;
      padding-left: 15px;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: #0a73ff;
      }
    }
  }

  .panel-content {
    flex: 1;
    width: 100%;
    max-width: 100%;
    padding: 15px;
    overflow: hidden;
  }
}

.alarm-trend {
  flex: 1;
  min-height: 300px;

  .trend-chart {
    width: 100%;
    height: 100%;
  }
}

.alarm-distribution {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .distribution-left {
    flex: 1;
    min-height: 300px;

    .type-chart {
      width: 100%;
      height: 100%;
    }
  }

  .distribution-right {
    flex: 1;
    min-height: 300px;
    min-width: 0;
    max-width: 100%;

    .header-more {
      color: #00fcff;
      cursor: pointer;
      font-size: 14px;

      &:hover {
        text-decoration: underline;
      }
    }

    .alarm-list {
      height: calc(100% - 40px); // 固定高度，减去标题高度
      max-height: 300px; // 设置最大高度
      width: 100%;
      max-width: 100%;
      overflow-y: auto;
      overflow-x: hidden; // 防止水平滚动
      padding-right: 6px; // 为滚动条预留空间
      margin-right: -2px; // 补偿滚动条空间
      position: relative; // 确保滚动条位置固定

      /* 始终显示滚动条，防止出现/消失导致的抖动 */
      &::-webkit-scrollbar {
        width: 4px;
        background-color: rgba(0, 26, 87, 0.3);
      }

      &::-webkit-scrollbar-thumb {
        background-color: rgba(10, 115, 255, 0.5);
        border-radius: 2px;
      }

      &::-webkit-scrollbar-track {
        background-color: rgba(0, 26, 87, 0.3);
        border-radius: 2px;
      }

      .alarm-item {
        display: flex;
        justify-content: space-between;
        align-items: center; // 新增这一行
        padding: 0 10px 0 0; // 只保留右侧padding
        border-radius: 2px;
        margin-bottom: 8px;
        background-color: rgba(0, 26, 87, 0.5);
        border-left: 3px solid transparent;
        transition: all 0.3s;
        height: 40px; // 固定每个告警项的高度
        box-sizing: border-box; // 确保padding不会增加元素实际高度
        min-width: 0; //防止flex子项撑开

        &:last-child {
          margin-bottom: 0; // 最后一项不需要底部间距
        }

        &:hover {
          background-color: rgba(10, 115, 255, 0.2);
          transform: translateX(3px);
        }

        &.Critical {
          border-left-color: #f5222d;
        }

        &.Major {
          border-left-color: #fa8c16;
        }

        &.Minor {
          border-left-color: #faad14;
        }

        &.Warning {
          border-left-color: #52c41a;
        }

        .alarm-time {
          flex: 0 0 100px;
          padding-left: 10px; // 只给时间内容加左间距
          color: #0a73ff;
          min-width: 100px;
        }

        .alarm-content {
          flex: 1;
          margin: 0 10px;
          min-width: 0;
          max-width: 300px; // 限制最大宽度，和 tooltip max-width 保持一致
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .alarm-level {
          flex: 0 0 50px;
          text-align: right;
          min-width: 40px;
        }
      }
    }
  }
}

.trend-range-radio {
  margin-left: 16px;

  .ant-radio-button-wrapper {
    background: rgba(0, 26, 87, 0.7);
    color: #00fcff;
    border: 1px solid #0a73ff;
    transition: all 0.2s;
    font-weight: bold;

    &:not(:last-child) {
      border-right: none;
    }

    &:hover {
      color: #fff;
      background: #0a73ff;
      border-color: #00fcff;
    }
  }

  .ant-radio-button-wrapper-checked {
    background: linear-gradient(90deg, #0a73ff 0%, #00fcff 100%);
    color: #001a57;
    border-color: #00fcff !important;
    box-shadow: 0 0 8px #00fcff;
  }
}

/* 确保新告警动画样式足够明显 */
.alarm-item.new-alarm {
  position: relative;
  z-index: 3;
  animation: newAlarmAppear 1.2s ease-out;
  box-shadow: 0 0 15px rgba(0, 252, 255, 0.7);
  transform: translateX(0) !important;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      90deg,
      rgba(10, 115, 255, 0.2),
      rgba(0, 252, 255, 0.3)
    );
    z-index: -1;
    border-radius: 2px;
    animation: gradientShift 3s infinite alternate;
  }

  &::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid rgba(0, 252, 255, 0.7);
    border-radius: 3px;
    animation: borderPulse 1.5s infinite;
    z-index: -1;
  }

  .alarm-content {
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 252, 255, 0.7);
  }

  .alarm-time,
  .alarm-level {
    color: #00fcff;
    text-shadow: 0 0 3px rgba(0, 252, 255, 0.5);
  }
}

/* 告警项目进入动画 */
.alarm-fade-enter-active {
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.alarm-fade-leave-active {
  transition: all 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
  position: absolute;
  width: 100%;
}

.alarm-fade-enter-from {
  opacity: 0;
  transform: translateX(-30px) scale(0.9);
}

.alarm-fade-leave-to {
  opacity: 0;
  transform: translateX(30px) scale(0.9);
}

/* 新告警出现动画 */
@keyframes newAlarmAppear {
  0% {
    transform: translateX(-20px) scale(0.95);
    opacity: 0;
    box-shadow: 0 0 0 rgba(0, 252, 255, 0);
  }

  30% {
    transform: translateX(0) scale(1.05);
    opacity: 1;
    box-shadow: 0 0 20px rgba(0, 252, 255, 0.8);
  }

  100% {
    transform: translateX(0) scale(1);
    box-shadow: 0 0 15px rgba(0, 252, 255, 0.7);
  }
}

/* 边框脉冲动画 */
@keyframes borderPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 252, 255, 0.7);
  }

  70% {
    box-shadow: 0 0 0 5px rgba(0, 252, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 252, 255, 0);
  }
}

/* 渐变背景动画 */
@keyframes gradientShift {
  0% {
    background: linear-gradient(
      90deg,
      rgba(10, 115, 255, 0.2),
      rgba(0, 252, 255, 0.3)
    );
  }

  100% {
    background: linear-gradient(
      90deg,
      rgba(0, 252, 255, 0.3),
      rgba(10, 115, 255, 0.2)
    );
  }
}

@media (max-width: 1400px) {
  .dashboard-main {
    flex-direction: column;
  }

  .main-left,
  .main-right {
    width: 100%;
  }

  .alarm-distribution {
    flex-direction: row;

    .distribution-left,
    .distribution-right {
      min-height: 250px;
    }
  }
}

@media (max-width: 768px) {
  .alarm-overview {
    flex-wrap: wrap;

    .alarm-card {
      flex: 0 0 calc(50% - 8px);
    }
  }

  .alarm-distribution {
    flex-direction: column;
  }
}
</style>
