<template>
  <div class="app">
    <!-- 左侧区域 -->
    <div class="sidebar">
      <!-- 树形结构 -->
      <div class="tree-container">
        <el-table
            ref="tableRef"
            v-loading="loading"
            :data="topologyList"
            @current-change="handleNodeClick"
            row-key="itemId"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            :default-expand-all="true"
            :indent="24"
            class="custom-table"
            :show-header="false"
            :highlight-current-row="true"
            :border="false"
        >
          <el-table-column align="left" prop="itemName">
            <template #default="{ row }">
              <i
                  v-if="row.children && row.children.length > 0"
                  :class="row.expanded ? 'el-icon-folder-opened' : 'el-icon-folder'"
                  style="margin-right: 5px"
              ></i>
              <i v-else class="el-icon-document" style="margin-right: 5px"></i>
              {{ row.itemName }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 右侧区域 -->
    <div class="main-content">
      <!-- 空状态提示 -->
      <div v-if="!selectedNode" class="empty-state">
        <el-empty description="请选择左侧节点查看能耗详情">
          <template #image>
            <i class="el-icon-data-line" style="font-size: 64px; color: #409eff;"></i>
          </template>
        </el-empty>
      </div>

      <!-- 选中节点的详细信息 -->
      <div v-else class="content-wrapper">
        <!-- 头部信息卡片 -->
        <div class="header-card">
          <div class="node-info">
            <h2 class="node-title">
              <i class="el-icon-office-building"></i>
              {{ selectedNode.itemName }}
            </h2>
            <p class="node-desc">{{ getNodeTypeDesc(selectedNode) }}</p>
          </div>
          <div class="quick-stats">
            <div class="stat-item">
              <span class="stat-value">{{ electricityUsage }}</span>
              <span class="stat-label">总用电量 (kWh)</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ waterUsage }}</span>
              <span class="stat-label">总用水量 (t)</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ totalEnergyConsumption }}</span>
              <span class="stat-label">综合能耗 (kgce)</span>
            </div>
          </div>
        </div>

        <!-- 时间范围选择器 -->
        <div class="time-selector">
          <el-radio-group v-model="timeRange" @change="handleTimeRangeChange">
            <el-radio-button label="today">今日</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
            <el-radio-button label="year">本年</el-radio-button>
          </el-radio-group>
          <el-date-picker
              v-model="customDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="handleCustomDateChange"
              style="margin-left: 20px;"
          />
        </div>

        <!-- 能耗统计表格 -->
        <div class="energy-table-card">
          <div class="card-header">
            <h3>能耗统计详情</h3>
            <el-button type="primary" size="small" @click="exportData">
              <i class="el-icon-download"></i>
              导出数据
            </el-button>
          </div>
          <el-table
              :data="energyStatistics"
              border
              style="width: 100%"
              :loading="tableLoading"
              class="energy-table"
          >
            <el-table-column prop="category" label="能耗类型" width="120">
              <template #default="{ row }">
                <div class="category-cell">
                  <i :class="getCategoryIcon(row.category)"></i>
                  {{ row.category }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="value" label="当前数值" width="150">
              <template #default="{ row }">
                <span class="value-text">{{ row.value }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ringRatio" label="环比" width="120">
              <template #default="{ row }">
                <span :class="getRatioClass(row.ringRatio)">
                  <i :class="getRatioIcon(row.ringRatio)"></i>
                  {{ row.ringRatio }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="yearOnYearRatio" label="同比" width="120">
              <template #default="{ row }">
                <span :class="getRatioClass(row.yearOnYearRatio)">
                  <i :class="getRatioIcon(row.yearOnYearRatio)"></i>
                  {{ row.yearOnYearRatio }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="trend" label="趋势" width="100">
              <template #default="{ row }">
                <el-tag :type="getTrendType(row.trend)" size="small">
                  {{ row.trend }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button type="text" size="small" @click="viewDetails(row)">
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 峰值信息卡片 -->
        <div class="peak-info-card">
          <h3>峰值信息</h3>
          <div class="peak-grid">
            <div class="peak-item">
              <div class="peak-icon electricity">
                <i class="el-icon-lightning"></i>
              </div>
              <div class="peak-content">
                <h4>峰值用电量</h4>
                <p class="peak-value">{{ peakElectricity }} kW</p>
                <p class="peak-time">时间: {{ peakTime }}</p>
              </div>
            </div>
            <div class="peak-item">
              <div class="peak-icon water">
                <i class="el-icon-water-cup"></i>
              </div>
              <div class="peak-content">
                <h4>峰值用水量</h4>
                <p class="peak-value">{{ peakWater }} t/h</p>
                <p class="peak-time">时间: {{ peakWaterTime }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 能耗分析图表 -->
        <!-- 能耗分析图表 -->
        <div class="chart-card">
          <div class="card-header">
            <h3>能耗趋势分析</h3>
            <el-radio-group v-model="chartType" size="small" @change="updateChart">
              <el-radio-button label="line">折线图</el-radio-button>
              <el-radio-button label="bar">柱状图</el-radio-button>
              <el-radio-button label="pie">饼图</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container" ref="chartContainer" id="energyChart"></div>
        </div>

        <!-- 告警信息 -->
        <div class="alert-card" v-if="alerts.length > 0">
          <h3>能耗告警</h3>
          <div class="alert-list">
            <div
                v-for="alert in alerts"
                :key="alert.id"
                class="alert-item"
                :class="alert.level"
            >
              <i :class="getAlertIcon(alert.level)"></i>
              <div class="alert-content">
                <p class="alert-message">{{ alert.message }}</p>
                <p class="alert-time">{{ alert.time }}</p>
              </div>
              <el-button type="text" size="small" @click="handleAlert(alert)">
                处理
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { listTopology } from '@/api/device/topology';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
import * as echarts from 'echarts';

// 数据定义
const topologyList = ref([]);
const loading = ref(true);
const selectedNode = ref(null);
const tableLoading = ref(false);

// 时间范围
const timeRange = ref('today');
const customDateRange = ref([]);

// 图表类型
const chartType = ref('line');

// 总体能耗数据
const energyStatistics = ref([]);
const electricityUsage = ref('');
const peakElectricity = ref('');
const peakTime = ref('');
const waterUsage = ref('');
const totalEnergyConsumption = ref('');
const peakWater = ref('');
const peakWaterTime = ref('');

// 告警数据
const alerts = ref([]);

const chartContainer = ref(null);
let chartInstance = null;

// 模拟图表数据
const chartData = ref({
  dates: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
  electricity: [120, 132, 101, 134, 90, 230, 210],
  water: [20, 25, 18, 30, 22, 35, 28],
  gas: [15, 18, 12, 22, 16, 28, 24],
  comprehensive: [155, 175, 131, 186, 128, 293, 262]
});

// 图表配置
const getLineChartOption = () => ({
  title: {
    text: '能耗趋势分析',
    left: 'center',
    textStyle: {
      fontSize: 16,
      color: '#333'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['用电量', '用水量', '燃气量', '综合能耗'],
    top: 30
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: chartData.value.dates
  },
  yAxis: {
    type: 'value',
    name: '能耗值'
  },
  series: [
    {
      name: '用电量',
      type: 'line',
      stack: false,
      smooth: true,
      data: chartData.value.electricity,
      itemStyle: {
        color: '#409EFF'
      },
      areaStyle: {
        opacity: 0.3,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#409EFF' },
          { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
        ])
      }
    },
    {
      name: '用水量',
      type: 'line',
      stack: false,
      smooth: true,
      data: chartData.value.water,
      itemStyle: {
        color: '#67C23A'
      },
      areaStyle: {
        opacity: 0.3,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#67C23A' },
          { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
        ])
      }
    },
    {
      name: '燃气量',
      type: 'line',
      stack: false,
      smooth: true,
      data: chartData.value.gas,
      itemStyle: {
        color: '#E6A23C'
      },
      areaStyle: {
        opacity: 0.3,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#E6A23C' },
          { offset: 1, color: 'rgba(230, 162, 60, 0.1)' }
        ])
      }
    },
    {
      name: '综合能耗',
      type: 'line',
      stack: false,
      smooth: true,
      data: chartData.value.comprehensive,
      itemStyle: {
        color: '#F56C6C'
      },
      lineStyle: {
        width: 3
      }
    }
  ]
});

const getBarChartOption = () => ({
  title: {
    text: '能耗对比分析',
    left: 'center',
    textStyle: {
      fontSize: 16,
      color: '#333'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['用电量', '用水量', '燃气量'],
    top: 30
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: chartData.value.dates
  },
  yAxis: {
    type: 'value',
    name: '能耗值'
  },
  series: [
    {
      name: '用电量',
      type: 'bar',
      data: chartData.value.electricity,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#409EFF' },
          { offset: 1, color: '#79bbff' }
        ])
      }
    },
    {
      name: '用水量',
      type: 'bar',
      data: chartData.value.water,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#67C23A' },
          { offset: 1, color: '#95d475' }
        ])
      }
    },
    {
      name: '燃气量',
      type: 'bar',
      data: chartData.value.gas,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#E6A23C' },
          { offset: 1, color: '#eebe77' }
        ])
      }
    }
  ]
});

const getPieChartOption = () => {
  const totalElectricity = chartData.value.electricity.reduce((a, b) => a + b, 0);
  const totalWater = chartData.value.water.reduce((a, b) => a + b, 0);
  const totalGas = chartData.value.gas.reduce((a, b) => a + b, 0);

  return {
    title: {
      text: '能耗占比分析',
      left: 'center',
      textStyle: {
        fontSize: 16,
        color: '#333'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'middle'
    },
    series: [
      {
        name: '能耗占比',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['60%', '50%'],
        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: [
          {
            value: totalElectricity,
            name: '用电量',
            itemStyle: { color: '#409EFF' }
          },
          {
            value: totalWater,
            name: '用水量',
            itemStyle: { color: '#67C23A' }
          },
          {
            value: totalGas,
            name: '燃气量',
            itemStyle: { color: '#E6A23C' }
          }
        ]
      }
    ]
  };
};

// 初始化图表
const initChart = async () => {
  await nextTick();
  if (chartContainer.value) {
    chartInstance = echarts.init(chartContainer.value);
    updateChart();

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      chartInstance?.resize();
    });
  }
};

// 更新图表
const updateChart = () => {
  if (!chartInstance) return;

  let option;
  switch (chartType.value) {
    case 'line':
      option = getLineChartOption();
      break;
    case 'bar':
      option = getBarChartOption();
      break;
    case 'pie':
      option = getPieChartOption();
      break;
    default:
      option = getLineChartOption();
  }

  chartInstance.setOption(option, true);
};

// 生成随机数据（模拟实时更新）
const generateRandomData = () => {
  chartData.value = {
    dates: Array.from({ length: 7 }, (_, i) => {
      const date = new Date();
      date.setDate(date.getDate() - 6 + i);
      return `${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    }),
    electricity: Array.from({ length: 7 }, () => Math.floor(Math.random() * 200) + 100),
    water: Array.from({ length: 7 }, () => Math.floor(Math.random() * 30) + 15),
    gas: Array.from({ length: 7 }, () => Math.floor(Math.random() * 25) + 10),
    comprehensive: []
  };

  // 计算综合能耗
  chartData.value.comprehensive = chartData.value.electricity.map((elec, index) =>
      elec + chartData.value.water[index] * 2 + chartData.value.gas[index] * 1.5
  );
};

// 修改原有的 loadFloorEnergyData 函数
const loadFloorEnergyData = () => {
  tableLoading.value = true;

  // 生成新的图表数据
  generateRandomData();

  // 模拟异步加载
  setTimeout(() => {
    // 原有的表格数据生成代码...
    energyStatistics.value = [
      {
        category: '用电量',
        value: `${(Math.random() * 1000 + 1000).toFixed(2)} kWh`,
        ringRatio: `${(Math.random() * 10).toFixed(2)}%↑`,
        yearOnYearRatio: `${(Math.random() * 15 + 100).toFixed(2)}%↑`,
        trend: '上升'
      },
      {
        category: '用水量',
        value: `${(Math.random() * 50).toFixed(2)} t`,
        ringRatio: `${(Math.random() * 10).toFixed(2)}%↓`,
        yearOnYearRatio: `${(Math.random() * 15 + 100).toFixed(2)}%↑`,
        trend: '稳定'
      },
      {
        category: '综合能耗',
        value: `${(Math.random() * 300).toFixed(2)} kgce`,
        ringRatio: `${(Math.random() * 10).toFixed(2)}%↑`,
        yearOnYearRatio: `${(Math.random() * 15 + 100).toFixed(2)}%↑`,
        trend: '下降'
      },
      {
        category: '燃气用量',
        value: `${(Math.random() * 100).toFixed(2)} m³`,
        ringRatio: `${(Math.random() * 10).toFixed(2)}%↓`,
        yearOnYearRatio: `${(Math.random() * 15 + 100).toFixed(2)}%↓`,
        trend: '稳定'
      }
    ];

    electricityUsage.value = (Math.random() * 1000 + 1000).toFixed(2);
    peakElectricity.value = (Math.random() * 100 + 200).toFixed(2);
    peakTime.value = `${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 30) + 1} 14:30`;
    waterUsage.value = (Math.random() * 50).toFixed(2);
    totalEnergyConsumption.value = (Math.random() * 300).toFixed(2);
    peakWater.value = (Math.random() * 10 + 5).toFixed(2);
    peakWaterTime.value = `${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 30) + 1} 10:15`;

    tableLoading.value = false;

    // 更新图表
    if (chartInstance) {
      updateChart();
    }
  }, 500);
};

// 修改点击节点函数
const handleNodeClick = (node) => {
  selectedNode.value = node;
  loadFloorEnergyData();
  loadAlerts();

  // 初始化图表（如果还没初始化）
  if (!chartInstance) {
    setTimeout(() => {
      initChart();
    }, 100);
  }
};

// 组件卸载时清理
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener('resize', () => {
    chartInstance?.resize();
  });
});


// 获取树形数据
const getList = async () => {
  try {
    loading.value = true;
    const response = await listTopology({ pageNum: 1, pageSize: 10000 });
    topologyList.value = handleTree(response.rows, 'itemId', 'parentId', 'children');
    loading.value = false;
  } catch (error) {
    ElMessage.error('加载数据失败');
    loading.value = false;
  }
};

// 处理树形结构的方法
const handleTree = (data, id, parentId, childrenName = 'children') => {
  const config = {
    id: id || 'id',
    parentId: parentId || 'parentId',
    childrenName: childrenName || 'children'
  };
  const tree = [];
  const map = {};
  data.forEach(item => (map[item[config.id]] = item));
  data.forEach(item => {
    const parent = map[item[config.parentId]];
    if (parent) {
      (parent[config.childrenName] || (parent[config.childrenName] = [])).push(item);
    } else {
      tree.push(item);
    }
  });
  return tree;
};

// 加载楼层总体能耗数据
// 加载告警数据
const loadAlerts = () => {
  const alertTypes = ['warning', 'error', 'info'];
  const alertMessages = [
    '用电量超过预设阈值',
    '用水量异常增长',
    '设备运行异常',
    '能耗效率偏低'
  ];

  alerts.value = Array.from({ length: Math.floor(Math.random() * 3) + 1 },
      (_, index) => ({
        id: index + 1,
        level: alertTypes[Math.floor(Math.random() * alertTypes.length)],
        message: alertMessages[Math.floor(Math.random() * alertMessages.length)],
        time: `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')} ${String(Math.floor(Math.random() * 24)).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`
      }));
};

// 获取节点类型描述
const getNodeTypeDesc = (node) => {
  if (node.children && node.children.length > 0) {
    return `包含 ${node.children.length} 个子节点`;
  }
  return '终端节点';
};

// 获取分类图标
const getCategoryIcon = (category) => {
  const iconMap = {
    '用电量': 'el-icon-lightning',
    '用水量': 'el-icon-water-cup',
    '综合能耗': 'el-icon-data-analysis',
    '燃气用量': 'el-icon-hot-water'
  };
  return iconMap[category] || 'el-icon-data-line';
};

// 获取比率样式类
const getRatioClass = (ratio) => {
  if (ratio.includes('↑')) return 'ratio-up';
  if (ratio.includes('↓')) return 'ratio-down';
  return 'ratio-stable';
};

// 获取比率图标
const getRatioIcon = (ratio) => {
  if (ratio.includes('↑')) return 'el-icon-top';
  if (ratio.includes('↓')) return 'el-icon-bottom';
  return 'el-icon-minus';
};

// 获取趋势标签类型
const getTrendType = (trend) => {
  const typeMap = {
    '上升': 'danger',
    '下降': 'success',
    '稳定': 'info'
  };
  return typeMap[trend] || 'info';
};

// 获取告警图标
const getAlertIcon = (level) => {
  const iconMap = {
    'error': 'el-icon-error',
    'warning': 'el-icon-warning',
    'info': 'el-icon-info'
  };
  return iconMap[level] || 'el-icon-info';
};

// 时间范围变化处理
const handleTimeRangeChange = (value) => {
  customDateRange.value = [];
  loadFloorEnergyData();
  ElMessage.success(`已切换到${getTimeRangeText(value)}数据`);
};

// 自定义日期范围变化处理
const handleCustomDateChange = (dates) => {
  if (dates && dates.length === 2) {
    timeRange.value = '';
    loadFloorEnergyData();
    ElMessage.success(`已切换到自定义时间范围: ${dates[0]} 至 ${dates[1]}`);
  }
};

// 获取时间范围文本
const getTimeRangeText = (range) => {
  const textMap = {
    'today': '今日',
    'week': '本周',
    'month': '本月',
    'year': '本年'
  };
  return textMap[range] || '自定义';
};

// 查看详情
const viewDetails = (row) => {
  ElMessageBox.alert(
      `${row.category}的详细信息:\n当前值: ${row.value}\n环比: ${row.ringRatio}\n同比: ${row.yearOnYearRatio}\n趋势: ${row.trend}`,
      '详细信息',
      {
        confirmButtonText: '确定',
        type: 'info'
      }
  );
};

// 导出数据
const exportData = () => {
  ElMessage.success('数据导出功能开发中...');
  // 这里可以实现真实的导出逻辑
};

// 处理告警
const handleAlert = (alert) => {
  ElMessageBox.confirm(
      `确定要处理这个${alert.level}级别的告警吗？`,
      '处理告警',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    alerts.value = alerts.value.filter(item => item.id !== alert.id);
    ElMessage.success('告警已处理');
  }).catch(() => {
    ElMessage.info('已取消处理');
  });
};

// 页面初始化时加载数据
onMounted(() => {
  getList();
});
</script>

<style scoped>
/* 原有样式保持不变 */
:deep(.custom-table .el-table__body tr.current-row > td) {
  background-color: #a6b9dd !important;
  border-radius: 12px !important;
  margin: 8px 0 !important;
}

:deep(.custom-table .el-table__body tr.current-row > td .cell) {
  color: #fff !important;
}

.custom-table :deep(.el-table__row) {
  background: transparent !important;
}

.custom-table :deep(.el-table__cell) {
  padding: 6px 0 !important;
  border: none !important;
}

.custom-table :deep(.el-table__cell .cell) {
  line-height: 15px !important;
  height: 15px !important;
}

.custom-table :deep(.el-table__inner-wrapper::before) {
  display: none;
}

.tree-container {
  height: 90vh;
  overflow-y: auto;
  background-color: white;
  color: #000000;
}

.app {
  display: flex;
  height: 90vh;
}

.sidebar {
  width: 300px;
  height: 88%;
  overflow: auto;
  background-color: white;
  border-right: 1px solid #e6e6e6;
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f7fa;
}

/* 新增样式 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.header-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 24px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.node-info .node-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.node-info .node-desc {
  margin: 0;
  opacity: 0.8;
  font-size: 14px;
}

.quick-stats {
  display: flex;
  gap: 32px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.8;
}

.time-selector {
  background: white;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.energy-table-card,
.peak-info-card,
.chart-card,
.alert-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

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

.energy-table {
  margin-top: 0;
}

.category-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.value-text {
  font-weight: 600;
  color: #409eff;
}

.ratio-up {
  color: #f56c6c;
}

.ratio-down {
  color: #67c23a;
}

.ratio-stable {
  color: #909399;
}

.peak-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.peak-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.peak-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.peak-icon.electricity {
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  color: #333;
}

.peak-icon.water {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
}

.peak-content h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
}

.peak-value {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: bold;
  color: #409eff;
}

.peak-time {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border-radius: 8px;
  border: 2px dashed #ddd;
}

.chart-placeholder {
  text-align: center;
  color: #999;
}

.alert-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid;
}

.alert-item.error {
  background: #fef0f0;
  border-left-color: #f56c6c;
}

.alert-item.warning {
  background: #fdf6ec;
  border-left-color: #e6a23c;
}

.alert-item.info {
  background: #f4f4f5;
  border-left-color: #909399;
}

.alert-content {
  flex: 1;
}

.alert-message {
  margin: 0 0 4px 0;
  font-weight: 500;
  color: #303133;
}

.alert-time {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: 300px;
  }

  .header-card {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .quick-stats {
    justify-content: center;
  }

  .time-selector {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .peak-grid {
    grid-template-columns: 1fr;
  }
}

/* 动画效果 */
.content-wrapper > * {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 滚动条样式 */
.main-content::-webkit-scrollbar {
  width: 6px;
}

.main-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.main-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.main-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.chart-container {
  height: 400px;
  width: 100%;
  background: white;
  border-radius: 8px;
  border: none;
}

/* 移除原来的占位符样式 */
.chart-placeholder {
  display: none;
}

/* 图表加载状态 */
.chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

/* 图表工具栏样式优化 */
.card-header .el-radio-group {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 2px;
}

.card-header .el-radio-button__inner {
  border: none;
  background: transparent;
  padding: 8px 16px;
  font-size: 12px;
}

.card-header .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 响应式图表 */
@media (max-width: 768px) {
  .chart-container {
    height: 300px;
  }

  .card-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}
</style>
