<template>
  <div class="alarm-report-container">
    <el-card class="operate-card">
      <!-- 顶部操作区 -->
      <div class="operate-area">
        <el-button-group>
          <!-- <el-button v-for="month in months" :key="month.value"
            :type="currentMonth === month.value ? 'primary' : 'default'" @click="handleMonthChange(month.value)">
            {{ month.label }}
          </el-button> -->
          <el-select v-model="currentMonth" clearable placeholder="请选择 " @change="handleMonthChange(currentMonth)">
            <el-option v-for="item in months" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-button-group>
        <el-button type="default" @click="handleRefresh">
          <i class="el-icon-refresh"></i> 刷新
        </el-button>
        <el-button type="default" @click="handleExport">
          <i class="el-icon-download"></i> 导出
        </el-button>
      </div>
    </el-card>
    <!-- 中部系统总览区 -->
    <el-card class="overall-card">
      <div slot="header" class="card-header">
        <span>系统概览</span>
      </div>
      <div class="overall-content">
        <div v-for="(item, index) in overviewData" :key="index" class="overall-item">
          <el-statistic :value="item.value" :precision="0" :value-style="{ color: '#409EFF' }">
            <template slot="prefix">
              <el-icon class="el-icon-info"></el-icon>
            </template>
            <template slot="suffix">条 </template>
          </el-statistic>
          <div class="overall-label">{{ item.label }}</div>
        </div>
      </div>
    </el-card>

    <!-- 底部各系统告警统计展示区 -->
    <el-card class="system-stats-card">
      <div slot="header" class="card-header">
        <span>各系统告警统计</span>
      </div>
      <el-table :data="systemStatsData" style="width: 100%" v-loading="loadingsystemStats">
        <el-table-column prop="systemName" label="系统名称" width="120" />
        <el-table-column prop="totalAlarms" label="告警总数" align="center" />
        <el-table-column prop="processedAlarms" label="已处理告警总数" align="center" />
        <el-table-column prop="unprocessedAlarms" label="未处理告警总数" align="center" />
        <el-table-column prop="contentAlarms" label="内容类告警总数" align="center" />
        <el-table-column prop="thresholdAlarms" label="阈值类告警总数" align="center" />
        <el-table-column prop="existenceAlarms" label="存在性告警总数" align="center" />

        <el-table-column prop="indicator_dataNoDeliveredCount" label="数据未送达告警总数" align="center" />
        <el-table-column prop="indicator_internalConnetCount" label="内部连接性告警总数" align="center" />
        <el-table-column prop="indicator_interfaceFrequencyCount" label="访问接口频率告警总数" align="center" />
        <el-table-column prop="indicator_databaseConnectCount" label="数据库连接数告警总数" align="center" />
        <el-table-column prop="indicator_pageTamperProofCount" label="页面防篡改告警总数" align="center" />
        <el-table-column prop="indicator_networkBoundaryConnectCount" label="网络边界连通性告警总数" align="center" />
        <el-table-column prop="indicator_scheduledTaskCount" label="定时任务告警总数" align="center" />
        <el-table-column prop="indicator_ossUseCount" label="OSS使用情况告警总数" align="center" />
        <el-table-column prop="indicator_abnormalAccessCount" label="异常访问告警总数" align="center" />
        <!-- <el-table-column prop="indicator" label="各指标的告警总数" align="center" /> -->
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getAlarmStats, exportAlarmData } from '@/api/newApi/alarm'

export default {
  data() {
    return {
      // monthsSelect: '2026-01',
      loadingsystemStats: false,
      currentMonth: '2026-01',
      months: [],
      alarmData: {//告警统计数据
        overall: {},
        indicatorStats: []
      }
    }
  },
  computed: {
    // 根据当前选择的月份获取系统总览数据
    overviewData() {
      const overall = this.alarmData.overall || {};
      return [
        { label: '告警总数', value: overall.total },
        { label: '已处理告警总数', value: overall.processed },
        { label: '未处理告警总数', value: overall.unprocessed },
        { label: '内容类告警总数', value: overall.contentCount },
        { label: '阈值类告警总数', value: overall.thresholdCount },
        { label: '存在性告警总数', value: overall.existenceCount }
      ];
    },
    // 根据当前选择的月份获取各系统告警统计数据
    systemStatsData() {
      return (this.alarmData.indicatorStats || []).map(item => ({
        systemName: item.system_name,
        totalAlarms: item.total,
        processedAlarms: item.processed,
        unprocessedAlarms: item.unprocessed,
        contentAlarms: item.contentCount,
        thresholdAlarms: item.thresholdCount,
        existenceAlarms: item.existenceCount,
        indicator: item.total,
        dataNoDeliveredCount: item.dataNoDeliveredCount,
        internalConnectCount: item.internalConnectCount,
        interfaceFrequencyCount: item.interfaceFrequencyCount,
        databaseConnectCount: item.databaseConnectCount,
        pageTamperProofCount: item.pageTamperProofCount,
        networkBoundaryConnectCount: item.networkBoundaryConnectCount,
        scheduledTaskCount: item.scheduledTaskCount,
        ossUseCount: item.indicator_ossUseCount,
        abnormalAccessCount: item.abnormalAccessCount,

        indicator_abnormalAccessCount: item.indicator_abnormalAccessCount,
        indicator_dataNoDeliveredCount: item.indicator_dataNoDeliveredCount,
        indicator_internalConnetCount: item.indicator_internalConnetCount,
        indicator_interfaceFrequencyCount: item.indicator_interfaceFrequencyCount,
        indicator_databaseConnectCount: item.indicator_databaseConnectCount,
        indicator_pageTamperProofCount: item.indicator_pageTamperProofCount,
        indicator_networkBoundaryConnectCount: item.indicator_networkBoundaryConnectCount,
        indicator_scheduledTaskCount: item.indicator_scheduledTaskCount,
        indicator_ossUseCount: item.indicator_ossUseCount,



      }));
    }
  },
  created() {
    this.getAlarmEven();
  },
  methods: {
    //获取告警统计数据
    getAlarmEven() {
      this.loadingsystemStats = true;
      getAlarmStats(this.currentMonth).then(res => {
        if (res.code === 200) {
          this.alarmData = {
            overall: res.data.overall || {},
            indicatorStats: res.data.indicatorStats || []
          };
          console.log(this.alarmData, ' this.alarmData')
          // 更新月份列表
          if (res.data.months && Array.isArray(res.data.months)) {
            this.months = res.data.months.map(month => {
              const [year, monthNum] = month.split('-');
              return {
                // label: `${monthNum}月`,
                label: month,
                value: month
              };
            });
          }
          this.loadingsystemStats = false;
        } else {
          this.$message.error('获取告警统计数据失败');
        }
      })
    },
    // 处理月份切换
    handleMonthChange(month) {
      console.log(month)
      this.currentMonth = month;
      // 切换月份后重新获取数据
      this.getAlarmEven();
    },
    // 处理刷新
    handleRefresh() {
      // 刷新时重新获取数据
      this.getAlarmEven()
    },
    // 处理导出
    handleExport() {
      const loading = this.$loading({
        lock: true,
        text: '正在下载...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      exportAlarmData(this.currentMonth).then(res => {
        // 处理导出成功逻辑
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `告警数据_${this.currentMonth}.xlsx`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
        this.$message.success('导出成功');
      }).finally(() => {
        loading.close();
      })
    }
  }
}
</script>

<style scoped>
.alarm-report-container {
  padding: 20px;
}

.operate-card {
  margin-bottom: 20px;
}

.operate-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.overall-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
}

.overall-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.overall-item {
  text-align: center;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #f9fafc;
}

.overall-label {
  margin-top: 10px;
  font-size: 14px;
  color: #666666;
}

.system-stats-card {
  margin-bottom: 20px;
}

.el-table {
  margin-top: 20px;
}
</style>