<template>
  <div class="driving-container" v-loading="loading" element-loading-text="数据加载中..."
    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2>告警数据驾驶舱</h2>
      <div class="header-right">
        <el-date-picker disabled v-model="currentDate" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss" style="width: 200px; margin-right: 10px">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
        <!-- <el-checkbox v-model="autoRefresh" style="margin-left: 10px">自动刷新</el-checkbox> -->
      </div>
    </div>

    <!-- 第一行：指标分类数据获取情况 + 实时告警列表 + 七日告警数据分布 -->
    <div class="row row-1">
      <!-- 指标分类数据获取情况 -->
      <div class="col col-1">
        <div class="card">
          <div class="card-header">
            <h3>指标分类数据获取情况</h3>
          </div>
          <div class="card-body">
            <div class="category-charts-container">
              <div class="chart-item">
                <div ref="contentChart" class="chart"></div>
                <div class="chart-title">内容类</div>
              </div>
              <div class="chart-item">
                <div ref="thresholdChart" class="chart"></div>
                <div class="chart-title">阈值类</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 实时告警列表 -->
      <div class="col col-2">
        <div class="card">
          <div class="card-header">
            <h3>实时告警列表</h3>
          </div>
          <div class="card-body">
            <div class="alarm-list" ref="alarmList">
              <div class="alarm-items-container">
                <div v-for="alarm in realTimeAlarms" :key="alarm.id" class="alarm-item">
                  <div class="alarm-indicator">{{ alarm.indicator }}</div>
                  <div class="alarm-time">{{ alarm.occurTime }}/{{ alarm.alarmType }}</div>
                  <div class="alarm-status">
                    <el-tag type="danger"> 未处理 </el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 七日告警数据分布 -->
      <div class="col col-3">
        <div class="card">
          <div class="card-header">
            <h3>七日告警数据分布</h3>
          </div>
          <div class="card-body">
            <!-- <div class="total-alarms">
              <div class="total-label">七日内总告警数</div>
              <div class="total-count">{{this.alarmDistribution.reduce((acc, item) => acc + item.value, 0)}}</div>
            </div> -->
            <div class="chart-wrapper">
              <div ref="distributionChart"></div>
            </div>
            <!-- <div class="legend">
              <div v-for="item in alarmDistribution" :key="item.name" class="legend-item">
                <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
                <span class="legend-text">{{ item.name }}: {{ item.value }}%</span>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <!-- 第二行：七日告警趋势分析 + 各系统七日告警 -->
    <div class="row row-2">
      <!-- 七日告警趋势分析 -->
      <div class="col col-4">
        <div class="card">
          <div class="card-header">
            <h3>七日告警趋势分析</h3>
          </div>
          <div class="card-body">
            <div class="chart-wrapper">
              <div ref="trendChart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 各系统七日告警 -->
      <div class="col col-5">
        <div class="card">
          <div class="card-header">
            <h3>各系统七日告警</h3>
          </div>
          <div class="card-body">
            <div class="chart-wrapper">
              <div ref="systemChart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import { getRealTimeAlarm, getAlarmDashboard } from '@/api/newApi/driving'
import { getDashboardDashboard } from '@/api/newApi/driving'

export default {
  data() {
    return {
      currentDate: new Date(),
      autoRefresh: false,
      refreshInterval: null,
      activeCategoryTab: 'content',


      loading: true,//全局加载状态
      realTimeAlarms: [],//实时告警列表


      sevenDayTotalAlarms: 365,

      distributionLegend: [
        { name: 'CPU使用率', value: 30, color: '#5470c6' },
        { name: '内存使用率', value: 25, color: '#91cc75' },
        { name: '磁盘空间', value: 20, color: '#fac858' },
        { name: '网络延迟', value: 15, color: '#ee6666' },
        { name: '服务可用性', value: 10, color: '#73c0de' }
      ],

      // 图表实例
      charts: {},


      alarmDistribution: [],//告警分布
      indicatorStatus: [],//指标状态 - 内容类
      thresholdStatus: [],//指标状态 - 阈值类

      alarmTrend: [],//七日告警趋势分析
      systemAlarms: [],//各系统七日告警
    }
  },
  mounted() {

    this.initCharts()
    // 只有在autoRefresh为true时才启动自动刷新
    if (this.autoRefresh) {
      this.startAutoRefresh()
    }
  },
  beforeDestroy() {
    this.stopAutoRefresh()
    this.destroyCharts()
  },
  watch: {
    autoRefresh(val) {
      if (val) {
        this.startAutoRefresh()
      } else {
        this.stopAutoRefresh()
      }
    }
  },
  methods: {
    // async getRealEvent() {
    //   // 初始化实时告警列表
    //   try {
    //     const res = await getRealTimeAlarm()
    //     if (res.code === 200) {
    //       this.realTimeAlarms = res.data || []
    //     }
    //   } catch (error) {
    //     console.error('获取实时告警失败:', error)
    //   }
    // },
    async initCharts() {
      this.loading = true
      try {
        await this.getAlarmEvent()
        this.initCategoryCharts()
        this.initDistributionChart()
        // this.initTrendChart()
        this.initSystemChart()
        // await this.getRealEvent()
      } finally {
        this.loading = false
      }
    },
    async getAlarmEvent() {
      try {
        // const res = await getAlarmDashboard()
        const res = await getDashboardDashboard()
        if (res) {
          console.log('告警数据驾驶舱全量数据:', res)
          let resData = res.data
          // if (res.alarmDistribution && res.alarmDistribution.length > 0) {
          //   this.alarmDistribution = res.alarmDistribution.map(item => ({
          //     value: item.count,
          //     name: item.indicator,
          //   }))
          //   console.log(this.alarmDistribution)
          // }
          if (resData.metricCategory) {
            this.indicatorStatus = resData.metricCategory.content
            console.log(this.indicatorStatus)
            console.log('按类型分组的指标状态:', this.indicatorStatus)
          }
          if (resData.alarmTrend && resData.alarmTrend.length > 0) {
            // 按照type分类
            const groupedTrend = {}
            resData.alarmTrend.forEach(item => {
              if (!groupedTrend[item.type]) {
                groupedTrend[item.type] = []
              }
              groupedTrend[item.type].push({
                value: item.count,
                name: item.date,
                type: item.type,
              })
            })
            this.alarmTrend = groupedTrend
            console.log('按类型分组的告警趋势:', this.alarmTrend)
          }
          if (resData.systemAlarms && resData.systemAlarms.length > 0) {
            // 按照systemName分类
            const groupedSystem = {}
            resData.systemAlarms.forEach(item => {
              if (!groupedSystem[item.systemName]) {
                groupedSystem[item.systemName] = {}
              }
              groupedSystem[item.systemName][item.type] = item.count
            })
            this.systemAlarms = groupedSystem
            console.log('按系统分组的系统告警:', this.systemAlarms)
          }
        }
      } catch (error) {
        console.error('获取告警数据失败:', error)
      }
    },
    initCategoryCharts() {
      // 同时初始化内容类和阈值类图表
      this.initCategoryChart('content')
      this.initCategoryChart('threshold')
    },

    initDistributionChart() {
      const chartRef = this.$refs.distributionChart
      // console.log('初始化分布图表:', chartRef)
      if (!chartRef) {
        console.error('未找到分布图表引用')
        return
      }

      // 确保容器有正确的尺寸
      chartRef.style.width = '100%'
      chartRef.style.height = '100%'
      chartRef.style.minHeight = '200px'

      try {
        const distributionChart = echarts.init(chartRef)
        // console.log('分布图表初始化成功')
        distributionChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'right'
          },
          series: [
            {
              name: '告警分布',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['25%', '50%'],
              label: {
                show: true,
                position: 'center',
                formatter: function () {
                  const total = this.alarmDistribution.reduce((sum, item) => sum + item.value, 0);
                  return total + '\n七日告警数分布';
                }.bind(this),
                fontSize: 16,
              },
              data: this.alarmDistribution,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
        this.charts.distributionChart = distributionChart
        // console.log('分布图表配置设置成功')
      } catch (error) {
        console.error('初始化分布图表时出错:', error)
      }
    },

    initTrendChart() {
      const chartRef = this.$refs.trendChart
      // console.log('初始化趋势图表:', chartRef)
      if (!chartRef) {
        console.error('未找到趋势图表引用')
        return
      }

      // 确保容器有正确的尺寸
      chartRef.style.width = '100%'
      chartRef.style.height = '100%'
      chartRef.style.minHeight = '200px'

      try {
        const trendChart = echarts.init(chartRef)
        // console.log('趋势图表初始化成功')
        trendChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: Object.keys(this.alarmTrend)
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: [...new Set(Object.values(this.alarmTrend).flat().map(item => item.name))]
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          // dataZoom: [
          //   {
          //     type: 'slider',
          //     orient: 'horizontal',
          //     xAxisIndex: 0,
          //     start: 0,
          //     end: 50
          //   }
          // ],
          series: [
            {
              name: '内容类',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: (this.alarmTrend['内容类'] || []).map(item => item.value),
              lineStyle: {
                color: '#ee6666'
              },
              itemStyle: {
                color: '#ee6666'
              }
            },
            {
              name: '阈值类',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: (this.alarmTrend['阈值类'] || []).map(item => item.value),
              lineStyle: {
                color: '#5470c6'
              },
              itemStyle: {
                color: '#5470c6'
              }
            },
            {
              name: '存在性',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: this.alarmTrend['存在性'].map(item => item.value),
              lineStyle: {
                color: '#91cc75'
              },
              itemStyle: {
                color: '#91cc75'
              }
            }
          ]
        })
        this.charts.trendChart = trendChart
        // console.log('趋势图表配置设置成功')
      } catch (error) {
        console.error('初始化趋势图表时出错:', error)
      }
    },

    initSystemChart() {
      const chartRef = this.$refs.systemChart
      // console.log('初始化系统图表:', chartRef)
      if (!chartRef) {
        console.error('未找到系统图表引用')
        return
      }

      // 确保容器有正确的尺寸
      chartRef.style.width = '100%'
      chartRef.style.height = '100%'
      chartRef.style.minHeight = '200px'

      try {
        const systemChart = echarts.init(chartRef)
        // console.log('系统图表初始化成功')
        systemChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['内容类', '阈值类', '存在性']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: Object.keys(this.systemAlarms || {})
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          dataZoom: [
            {
              type: 'slider',
              orient: 'horizontal',
              xAxisIndex: 0,
              start: 0,
              end: 50
            }
          ],
          series: [
            {
              name: '内容类',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: Object.keys(this.systemAlarms || {}).map(system => this.systemAlarms[system]['内容类'] || 0),
              itemStyle: {
                color: '#ee6666'
              }
            },
            {
              name: '阈值类',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: Object.keys(this.systemAlarms || {}).map(system => this.systemAlarms[system]['阈值类'] || 0),
              itemStyle: {
                color: '#5470c6'
              }
            },
            {
              name: '存在性',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: Object.keys(this.systemAlarms || {}).map(system => this.systemAlarms[system]['存在性'] || 0),
              itemStyle: {
                color: '#91cc75'
              }
            }
          ]
        })
        this.charts.systemChart = systemChart
        // console.log('系统图表配置设置成功')
      } catch (error) {
        console.error('初始化系统图表时出错:', error)
      }
    },

    handleTabClick(tab) {
      // 当切换选项卡时，确保图表能够正确显示
      setTimeout(() => {
        // 无论之前是否存在图表实例，都重新初始化图表
        if (tab.name === 'content' && this.$refs.contentChart) {
          // 销毁旧图表实例
          if (this.charts.contentChart) {
            this.charts.contentChart.dispose()
            this.charts.contentChart = null
          }
          // 创建新图表实例
          this.initCategoryChart('content')
        } else if (tab.name === 'threshold' && this.$refs.thresholdChart) {
          // 销毁旧图表实例
          if (this.charts.thresholdChart) {
            this.charts.thresholdChart.dispose()
            this.charts.thresholdChart = null
          }
          // 创建新图表实例
          this.initCategoryChart('threshold')
        } else if (tab.name === 'existence' && this.$refs.existenceChart) {
          // 销毁旧图表实例
          if (this.charts.existenceChart) {
            this.charts.existenceChart.dispose()
            this.charts.existenceChart = null
          }
          // 创建新图表实例
          this.initCategoryChart('existence')
        }
      }, 100)
    },

    initCategoryChart(type) {
      // 初始化单个分类图表
      const chartRef = this.$refs[`${type}Chart`]
      // console.log('初始化图表类型:', type, '图表引用:', chartRef)
      if (!chartRef) {
        console.error('未找到图表引用，类型:', type)
        return
      }

      // 确保容器有正确的尺寸
      chartRef.style.width = '100%'
      chartRef.style.height = '100%'
      chartRef.style.minHeight = '200px'

      try {
        const chart = echarts.init(chartRef)
        // console.log('图表初始化成功:', type)
        let option = {}

        if (type === 'content') {
          option = {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'horizontal',
              bottom: 0,
              data: ['正常', '无数据', '未配置'],
              width: '100%',
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                fontSize: 12
              }
            },
            series: [
              {
                name: '内容类',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 0,
                  borderColor: '#fff',
                  borderWidth: 0
                },
                label: {
                  show: false
                },
                emphasis: {
                  label: {
                    show: false
                  }
                },
                labelLine: {
                  show: false
                },
                data:
                  this.indicatorStatus,
                color: ['#F44336', '#BDBDBD', '#8BC34A']
              }
            ]
          }
        } else if (type === 'threshold') {
          option = {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'horizontal',
              bottom: 0,
              data: ['正常', '无数据', '未配置'],
              width: '100%',
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                fontSize: 12
              }
            },
            series: [
              {
                name: '阈值类',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 0,
                  borderColor: '#fff',
                  borderWidth: 0
                },
                label: {
                  show: false
                },
                emphasis: {
                  label: {
                    show: false
                  }
                },
                labelLine: {
                  show: false
                },
                data:
                  this.indicatorStatus['阈值类'] || [
                    { value: 4, name: '正常' },
                    { value: 0, name: '无数据' },
                    { value: 6, name: '未配置' }
                  ],
                color: ['#F44336', '#BDBDBD', '#8BC34A']

              }
            ]
          }
        } else if (type === 'existence') {
          option = {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 10,
              data: ['正常', '无数据', '未配置']
            },
            series: [
              {
                name: '存在性',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '18',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.indicatorStatus['存在性']
              }
            ]
          }
        }

        if (option && chart) {
          chart.setOption(option)
          this.charts[`${type}Chart`] = chart
          // console.log('图表配置设置成功:', type)
        }
      } catch (error) {
        console.error('初始化图表时出错:', type, error)
      }
    },

    async refreshData() {
      // 模拟数据刷新
      console.log('刷新数据...')
      this.currentDate = new Date().toISOString().slice(0, 19).replace('T', ' ')
      this.loading = true

      try {
        // 随机更新实时告警列表
        await this.getRealEvent()

        // 重新初始化图表以确保正确显示
        this.destroyCharts()
        await this.initCharts()
      } finally {
        this.loading = false
      }
    },

    startAutoRefresh() {
      this.stopAutoRefresh()
      this.refreshInterval = setInterval(() => {
        this.refreshData()
      }, 5000)
    },

    stopAutoRefresh() {
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval)
        this.refreshInterval = null
      }
    },

    resizeCharts() {
      Object.values(this.charts).forEach(chart => {
        chart.resize()
      })
    },

    destroyCharts() {
      Object.values(this.charts).forEach(chart => {
        chart.dispose()
      })
    },

    formatTime(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    }
  }
}
</script>

<style scoped>
.driving-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
}

.row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex: 1;
  min-height: 0;
}

.row-1 {
  flex: 1;
  min-height: 300px;
}

.row-2 {
  flex: 1;
  min-height: 350px;
}

.col {
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.category-charts-container {
  display: flex;
  gap: 20px;
  padding: 10px;
  height: 100%;
  min-height: 250px;
}

.chart-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 200px;
}

.chart-title {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: flex;
  flex-direction: column;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5 {
  flex: 1;
}

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.card-header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fafafa;
  flex-shrink: 0;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.card-body {
  flex: 1;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.el-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.el-tabs__header {
  flex-shrink: 0;
}

.el-tabs__content {
  flex: 1;
  overflow: hidden;
  display: flex;
}

.el-tab-pane {
  flex: 1;
  display: flex;
}

.chart-wrapper {
  flex: 1;
  min-height: 200px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-wrapper>div {
  width: 100%;
  height: 100%;
  min-height: 200px;
}

.alarm-list {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.alarm-items-container {
  height: 100%;
  animation: scroll 20s linear infinite;
}

.alarm-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.alarm-indicator {
  flex: 1;
  font-weight: 500;
}

.alarm-time {
  width: 180px;
  font-size: 12px;
  color: #909399;
}

.alarm-status {
  width: 80px;
  text-align: right;
}

.total-alarms {
  text-align: center;
  margin-bottom: 20px;
}

.total-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.total-count {
  font-size: 36px;
  font-weight: bold;
  color: #303133;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 5px;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
  .driving-container {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }

  .row {
    flex-direction: column;
    height: auto;
    min-height: 400px;
  }

  .row-1,
  .row-2 {
    min-height: 400px;
  }

  .col {
    min-height: 400px;
    margin-bottom: 20px;
  }

  .chart-wrapper {
    min-height: 300px;
  }
}

@media screen and (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header-right {
    width: 100%;
    justify-content: space-between;
  }

  .driving-container {
    padding: 10px;
  }

  .card-body {
    padding: 15px;
  }

  .chart-wrapper {
    min-height: 250px;
  }
}
</style>