<template>
  <div class="alarm-level-stat-page">
    <!-- 顶部导航栏 -->
    <header class="stat-header">
      <div class="header-inner">
        <h1 class="page-title">实时警报</h1>
      </div>
    </header>

    <!-- 功能按钮区 -->
    <div class="vant-buttons-top">
      <van-button type="primary" @click="handleSourceDistribution" round
        >来源分布</van-button
      >
      <van-button type="success" @click="handleAlarmLevel" round
        >告警级别统计</van-button
      >
      <van-button type="warning" @click="handleAlarmList" round
        >告警列表</van-button
      >
    </div>

    <!-- 核心内容区 -->
    <div class="content-container">
      <!-- 标签栏 -->
      <van-tabs
        v-model:active="activeTab"
        @change="handleTabChange"
        class="tabs-wrapper"
        color="#1890ff"
        title-active-color="#1890ff"
        title-inactive-color="#666"
      >
        <!-- 告警级别统计标签 -->
        <van-tab title="告警级别统计">
          <div class="tab-panel">
            <!-- 统计图表卡片 -->
            <div class="chart-card">
              <h3 class="card-title">告警级别分布</h3>
              <div class="chart-container" ref="chartRef"></div>
            </div>

            <!-- 统计表格卡片 -->
            <div class="table-card">
              <h3 class="card-title">告警级别明细</h3>
              <div class="table-container">
                <table class="alarm-table">
                  <thead>
                    <tr>
                      <th>告警级别</th>
                      <th>已处理</th>
                      <th>未处理</th>
                      <th>总数</th>
                      <th>处理率</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="(item, index) in alarmStats"
                      :key="index"
                      :class="`level-${item.levelEn}`"
                    >
                      <td class="level-name">
                        <span class="level-dot"></span>
                        {{ item.level }}
                      </td>
                      <td>{{ item.processed }}</td>
                      <td>{{ item.unprocessed }}</td>
                      <td>{{ item.total }}</td>
                      <td>
                        <div class="progress-bar">
                          <div
                            class="progress-fill"
                            :style="{ width: item.rate + '%' }"
                          ></div>
                        </div>
                        <span class="rate-text">{{ item.rate }}%</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import * as echarts from "echarts";

const router = useRouter();
const chartRef = ref(null);
let chartInstance = null;

// 告警统计数据
const alarmStats = ref([
  {
    level: "紧急",
    levelEn: "emergency",
    processed: 4,
    unprocessed: 3,
    total: 7,
    rate: 57,
  },
  {
    level: "重要",
    levelEn: "important",
    processed: 3,
    unprocessed: 2,
    total: 5,
    rate: 60,
  },
  {
    level: "次要",
    levelEn: "secondary",
    processed: 2,
    unprocessed: 3,
    total: 5,
    rate: 40,
  },
  {
    level: "通知",
    levelEn: "notice",
    processed: 0,
    unprocessed: 7,
    total: 7,
    rate: 0,
  },
]);

// 初始化图表
const initChart = () => {
  nextTick(() => {
    if (!chartRef.value) return;

    chartInstance = echarts.init(chartRef.value);
    const option = {
      tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
      legend: {
        data: ["已处理", "未处理"],
        bottom: 0,
        textStyle: { fontSize: 12 },
      },
      grid: {
        left: "3%",
        right: "4%",
        top: "10%",
        bottom: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: alarmStats.value.map((item) => item.level),
        axisLabel: { fontSize: 12 },
      },
      yAxis: { type: "value", axisLabel: { fontSize: 12 } },
      series: [
        {
          name: "已处理",
          type: "bar",
          data: alarmStats.value.map((item) => item.processed),
          itemStyle: { color: "green" },
          barWidth: "30%",
        },
        {
          name: "未处理",
          type: "bar",
          data: alarmStats.value.map((item) => item.unprocessed),
          itemStyle: { color: "red" },
          barWidth: "30%",
        },
      ],
    };

    chartInstance.setOption(option);
    window.addEventListener("resize", () => chartInstance.resize());
  });
};

onMounted(() => initChart());
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    window.removeEventListener("resize", () => chartInstance.resize());
  }
});

const handleSourceDistribution = () => router.push("/alarm");
const handleAlarmLevel = () => router.push({ name: "AlarmLevel" });
const handleAlarmList = () => router.push({ name: "AlarmList" });

// 标签切换逻辑
const handleTabChange = (index) => {
  activeTab.value = index;
  console.log("切换到标签：", index);
};
</script>

<style scoped>
.alarm-level-stat-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.stat-header {
  background-color: #2f4050;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header-inner {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.page-title {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  margin: 0;
}

.vant-buttons-top {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 12px 15px;
}
.van-button--round {
  --van-button-border-radius: 20px;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 30px;
}

.tabs-wrapper {
  --van-tabs-nav-background: transparent;
  --van-tabs-line-height: 36px;
  --van-tabs-font-size: 16px;
  margin-bottom: 20px;
}
.van-tabs-nav {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.chart-container {
  width: 100%;
  height: 300px;
}
.table-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.table-container {
  overflow-x: auto;
}
.alarm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: center;
  min-width: 500px;
}
.alarm-table th {
  background-color: #f8f9fa;
  color: #333;
  font-weight: 600;
  padding: 12px 8px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.alarm-table td {
  padding: 16px 8px;
  font-size: 14px;
  color: #fff;
}
.alarm-table tr:not(:last-child) td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.level-emergency {
  background-color: #ff4d4f;
}
.level-important {
  background-color: #ff9933;
}
.level-secondary {
  background-color: #ffd700;
  color: #333;
}
.level-notice {
  background-color: #66ccff;
}
.level-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.level-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
}
.level-secondary .level-dot {
  background-color: #333;
}

.progress-bar {
  width: 80px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto;
}
.progress-fill {
  height: 100%;
  background-color: #fff;
  transition: width 0.3s;
}
.rate-text {
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .chart-container {
    height: 220px;
  }
}
</style>