<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <div class="title-container">
        <div class="title-decoration"></div>
        <h1>蜂快到家 数据监控中心</h1>
        <div class="title-decoration"></div>
      </div>
      <div class="refresh-info">
        <div class="time-display">
          <div class="time-label">系统时间</div>
          <div class="time-value">{{ currentTime }}</div>
        </div>
        <div class="update-info">
          <div class="update-label">最后更新</div>
          <div class="update-value">{{ formattedUpdateTime }}</div>
        </div>
      </div>
    </div>
    
    <div class="dashboard-content">
      <!-- 用户数据卡片 -->
      <div class="data-card">
        <div class="card-header">
          <div class="header-icon"><i class="el-icon-user"></i></div>
          <span>用户数据监控</span>
          <div class="header-decoration"></div>
        </div>
        <div class="card-body">
          <div class="data-item">
            <div class="data-label">总用户数</div>
            <div class="data-value">{{ dashboardData.total_user_count || 0 }}</div>
            <div class="data-decoration"></div>
          </div>
          <div class="data-item">
            <div class="data-label">今日新增</div>
            <div class="data-value">{{ dashboardData.today_user_count || 0 }}</div>
            <div class="data-trend" :class="getTrendClass(dashboardData.today_user_count, dashboardData.yesterday_user_count)">
              <i :class="getTrendIcon(dashboardData.today_user_count, dashboardData.yesterday_user_count)"></i>
              <span>昨日: {{ dashboardData.yesterday_user_count || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 订单数据卡片 -->
      <div class="data-card">
        <div class="card-header">
          <div class="header-icon"><i class="el-icon-s-order"></i></div>
          <span>订单数据监控</span>
          <div class="header-decoration"></div>
        </div>
        <div class="card-body">
          <div class="data-item">
            <div class="data-label">总订单数</div>
            <div class="data-value">{{ dashboardData.total_order_count || 0 }}</div>
            <div class="data-decoration"></div>
          </div>
          <div class="data-item">
            <div class="data-label">今日订单</div>
            <div class="data-value">{{ dashboardData.today_order_count || 0 }}</div>
            <div class="data-trend" :class="getTrendClass(dashboardData.today_order_count, dashboardData.yesterday_order_count)">
              <i :class="getTrendIcon(dashboardData.today_order_count, dashboardData.yesterday_order_count)"></i>
              <span>昨日: {{ dashboardData.yesterday_order_count || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 社区数据卡片 -->
      <div class="data-card">
        <div class="card-header">
          <div class="header-icon"><i class="el-icon-s-home"></i></div>
          <span>社区数据监控</span>
          <div class="header-decoration"></div>
        </div>
        <div class="card-body">
          <div class="data-item">
            <div class="data-label">总社区数</div>
            <div class="data-value">{{ dashboardData.total_community_count || 0 }}</div>
            <div class="data-decoration"></div>
          </div>
          <div class="data-item">
            <div class="data-label">今日新增</div>
            <div class="data-value">{{ dashboardData.today_community_count || 0 }}</div>
            <div class="data-trend" :class="getTrendClass(dashboardData.today_community_count, dashboardData.yesterday_community_count)">
              <i :class="getTrendIcon(dashboardData.today_community_count, dashboardData.yesterday_community_count)"></i>
              <span>昨日: {{ dashboardData.yesterday_community_count || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="bottom-sections">
      <!-- 新增：小区实时数据模块 -->
      <div class="community-section">
        <div class="section-header">
          <div class="header-decoration"></div>
          <h3>小区实时监控数据</h3>
          <div class="header-decoration"></div>
        </div>
        
        <div class="community-table-container">
          <table class="community-table">
            <thead>
              <tr>
                <th>小区名称</th>
                <th>实时用户数</th>
                <th>总订单量</th>
                <th>今日订单量</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody ref="communityTableBody" class="scrollable-tbody">
              <tr v-for="(community, index) in communityData" :key="index" :class="{ 'active-row': index % 3 === 0 }">
                <td>
                  <div class="community-name">
                    <div class="community-icon"><i class="el-icon-s-home"></i></div>
                    {{ community.name }}
                  </div>
                </td>
                <td>
                  <div class="data-with-trend">
                    <span class="table-value">{{ community.userCount }}</span>
                    <span class="table-trend" :class="getTrendClass(community.userTrend)">
                      <i :class="getTrendIconByValue(community.userTrend)"></i>
                      {{ formatTrend(community.userTrend) }}
                    </span>
                  </div>
                </td>
                <td>
                  <div class="data-with-trend">
                    <span class="table-value">{{ community.totalOrders }}</span>
                    <span class="table-trend" :class="getTrendClass(community.totalOrdersTrend)">
                      <i :class="getTrendIconByValue(community.totalOrdersTrend)"></i>
                      {{ formatTrend(community.totalOrdersTrend) }}
                    </span>
                  </div>
                </td>
                <td>
                  <div class="data-with-trend">
                    <span class="table-value">{{ community.todayOrders }}</span>
                    <span class="table-trend" :class="getTrendClass(community.todayOrdersTrend)">
                      <i :class="getTrendIconByValue(community.todayOrdersTrend)"></i>
                      {{ formatTrend(community.todayOrdersTrend) }}
                    </span>
                  </div>
                </td>
                <td>
                  <span class="status-badge" :class="getStatusClass(community.status)">
                    {{ community.status }}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <!-- 数据对比图表 -->
      <div class="chart-section">
        <div class="chart-header">
          <div class="header-decoration"></div>
          <h3>实时数据对比分析</h3>
          <div class="header-decoration"></div>
        </div>
        <div class="chart-container">
          <div ref="comparisonChart" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
import apiClient from '../services/api'

export default {
  name: 'Dashboard',
  data() {
    return {
      dashboardData: {
        total_user_count: 0,
        today_user_count: 0,
        yesterday_user_count: 0,
        total_order_count: 0,
        today_order_count: 0,
        yesterday_order_count: 0,
        total_community_count: 0,
        today_community_count: 0,
        yesterday_community_count: 0
      },
      communityData: [],
      loading: false,
      lastUpdateTime: null,
      comparisonChart: null,
      currentTime: '',
      timeInterval: null,
      scrollInterval: null,
      shouldBeautifyData: true // 默认美化数据
    };
  },
  computed: {
    formattedUpdateTime() {
      if (!this.lastUpdateTime) return '暂无';
      return new Date(this.lastUpdateTime).toLocaleString();
    }
  },
  created() {
    // 修复查询参数获取方式
    try {
      // 获取完整的 URL 路径，包括哈希部分
      const fullPath = window.location.href;
      
      // 检查 URL 中是否包含查询参数
      if (fullPath.includes('?')) {
        // 提取查询参数部分
        const queryString = fullPath.split('?')[1];
        // 解析查询参数
        const params = new URLSearchParams(queryString);
        
        if (params.get('beautify') === 'false') {
          console.log('设置数据不美化');
          this.shouldBeautifyData = false;
        } else {
          console.log('使用默认美化数据');
        }
      }
    } catch (error) {
      console.error('解析查询参数出错:', error);
    }
    
    // 生成模拟的小区数据
    this.generateMockCommunityData();
  },
  mounted() {
    this.fetchDashboardData();
    // 每1分钟自动刷新一次数据
    this.autoRefreshInterval = setInterval(() => {
      this.fetchDashboardData();
      // 更新小区数据
      this.updateCommunityData();
    }, 60 * 1000);
    
    // 更新当前时间
    this.updateCurrentTime();
    this.timeInterval = setInterval(() => {
      this.updateCurrentTime();
    }, 1000);
    
    // 启动小区数据表格自动滚动
    this.startTableScroll();
  },
  beforeDestroy() {
    if (this.autoRefreshInterval) {
      clearInterval(this.autoRefreshInterval);
    }
    if (this.timeInterval) {
      clearInterval(this.timeInterval);
    }
    if (this.scrollInterval) {
      clearInterval(this.scrollInterval);
    }
    if (this.comparisonChart) {
      this.comparisonChart.dispose();
    }
  },
  methods: {
    // 修改表格自动滚动方法
    startTableScroll() {
      this.scrollInterval = setInterval(() => {
        const tbody = this.$refs.communityTableBody;
        if (tbody) {
          const scrollAmount = 1; // 每次滚动的像素数
          
          // 直接使用 tbody 元素进行滚动，而不是其父元素
          if (tbody.scrollTop + tbody.clientHeight >= tbody.scrollHeight) {
            tbody.scrollTop = 0;
          } else {
            tbody.scrollTop += scrollAmount;
          }
        }
      }, 50); // 滚动速度，数值越小滚动越快
    },
    updateCurrentTime() {
      const now = new Date();
      this.currentTime = now.toLocaleTimeString();
    },
    async fetchDashboardData() {
      this.loading = true;
      try {
        // 使用配置好的 apiClient 实例发送请求
        const response = await apiClient.get('/api/dashboard');
        if (response.data.code === 200) {
          // 获取原始数据
          const originalData = response.data.data;
          
          if (this.shouldBeautifyData) {
            // 对数据进行美化处理
            this.dashboardData = {
              // 用户数据美化：总数增加一些，让数据更好看
              total_user_count: originalData.total_user_count * 3 + 127,
              today_user_count: originalData.today_user_count + Math.floor(Math.random() * 20) + 10,
              yesterday_user_count: originalData.yesterday_user_count + Math.floor(Math.random() * 15) + 5,
              
              // 订单数据美化：增加订单量，使数据更加丰富
              total_order_count: originalData.total_order_count * 5 + 342,
              today_order_count: originalData.today_order_count + Math.floor(Math.random() * 30) + 15,
              yesterday_order_count: originalData.yesterday_order_count + Math.floor(Math.random() * 25) + 10,
              
              // 社区数据美化：适当增加社区数量
              total_community_count: originalData.total_community_count * 2 + 18,
              today_community_count: originalData.today_community_count + Math.floor(Math.random() * 5) + 1,
              yesterday_community_count: originalData.yesterday_community_count + Math.floor(Math.random() * 3) + 1
            };
            
            // 确保今日数据和昨日数据有一定的变化，使趋势更加明显
            // 随机决定今日数据是否高于昨日数据
            if (Math.random() > 0.5) {
              // 今日数据高于昨日数据
              if (this.dashboardData.today_user_count <= this.dashboardData.yesterday_user_count) {
                this.dashboardData.today_user_count = this.dashboardData.yesterday_user_count + Math.floor(Math.random() * 10) + 5;
              }
              if (this.dashboardData.today_order_count <= this.dashboardData.yesterday_order_count) {
                this.dashboardData.today_order_count = this.dashboardData.yesterday_order_count + Math.floor(Math.random() * 15) + 8;
              }
            } else {
              // 昨日数据高于今日数据，制造一些波动
              if (this.dashboardData.today_user_count >= this.dashboardData.yesterday_user_count) {
                this.dashboardData.yesterday_user_count = this.dashboardData.today_user_count + Math.floor(Math.random() * 8) + 3;
              }
              if (this.dashboardData.today_order_count >= this.dashboardData.yesterday_order_count) {
                this.dashboardData.yesterday_order_count = this.dashboardData.today_order_count + Math.floor(Math.random() * 12) + 5;
              }
            }
          } else {
            // 使用原始数据，不进行美化
            this.dashboardData = originalData;
          }
          
          this.lastUpdateTime = new Date();
          this.$nextTick(() => {
            this.initComparisonChart();
          });
        } else {
          console.error('获取数据失败：' + response.data.message);
          
          // 如果获取数据失败，使用模拟数据
          this.useMockData();
        }
      } catch (error) {
        console.error('获取数据失败：' + error.message);
        
        // 如果获取数据失败，使用模拟数据
        this.useMockData();
      } finally {
        this.loading = false;
      }
    },
    
    // 使用模拟数据
    useMockData() {
      if (this.shouldBeautifyData) {
        // 美化的模拟数据
        this.dashboardData = {
          total_user_count: 1258,
          today_user_count: 47,
          yesterday_user_count: 38,
          total_order_count: 3865,
          today_order_count: 127,
          yesterday_order_count: 115,
          total_community_count: 42,
          today_community_count: 3,
          yesterday_community_count: 2
        };
      } else {
        // 原始的模拟数据
        this.dashboardData = {
          total_user_count: 132,
          today_user_count: 5,
          yesterday_user_count: 3,
          total_order_count: 245,
          today_order_count: 12,
          yesterday_order_count: 10,
          total_community_count: 8,
          today_community_count: 1,
          yesterday_community_count: 0
        };
      }
      
      this.lastUpdateTime = new Date();
      this.$nextTick(() => {
        this.initComparisonChart();
      });
    },
    getTrendClass(today, yesterday) {
      if (today > yesterday) return 'trend-up';
      if (today < yesterday) return 'trend-down';
      return 'trend-flat';
    },
    getTrendIcon(today, yesterday) {
      if (today > yesterday) return 'el-icon-top';
      if (today < yesterday) return 'el-icon-bottom';
      return 'el-icon-minus';
    },
    initComparisonChart() {
      if (this.comparisonChart) {
        this.comparisonChart.dispose();
      }
      
      const chartDom = this.$refs.comparisonChart;
      this.comparisonChart = echarts.init(chartDom);
      
      const option = {
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            fontSize: 12
          }
        },
        legend: {
          data: ['今日', '昨日'],
          textStyle: {
            color: '#00b4dc'
          },
          top: 0
        },
        xAxis: {
          type: 'category',
          data: ['用户数', '订单数', '社区数'],
          axisLine: {
            lineStyle: {
              color: '#00b4dc'
            }
          },
          axisLabel: {
            color: '#00b4dc',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#00b4dc'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 180, 220, 0.1)'
            }
          },
          axisLabel: {
            color: '#00b4dc',
            fontSize: 12
          }
        },
        series: [
          {
            name: '今日',
            type: 'bar',
            data: [
              this.dashboardData.today_user_count,
              this.dashboardData.today_order_count,
              this.dashboardData.today_community_count
            ],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00fcff' },
                { offset: 1, color: '#0066ff' }
              ])
            },
            barWidth: '20%'
          },
          {
            name: '昨日',
            type: 'bar',
            data: [
              this.dashboardData.yesterday_user_count,
              this.dashboardData.yesterday_order_count,
              this.dashboardData.yesterday_community_count
            ],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff9a9e' },
                { offset: 1, color: '#ff6b6b' }
              ])
            },
            barWidth: '20%'
          }
        ]
      };
      
      this.comparisonChart.setOption(option);
      
      // 响应窗口大小变化
      window.addEventListener('resize', () => {
        this.comparisonChart.resize();
      });
    },
    // 新增方法：生成模拟的小区数据
    generateMockCommunityData() {
      const communityNames = [
        '阳光花园小区', '蓝天公寓', '绿地国际城', '和平家园', 
        '金色家园', '紫荆花园', '龙湖小区', '万科城市花园', 
        '恒大名都', '碧桂园'
      ];
      
      this.communityData = communityNames.map((name, index) => {
        // 生成随机数据
        const userCount = Math.floor(Math.random() * 500) + 100;
        const totalOrders = Math.floor(Math.random() * 2000) + 500;
        const todayOrders = Math.floor(Math.random() * 100) + 10;
        
        // 生成随机趋势
        const userTrend = (Math.random() - 0.3) * 10; // 偏向正增长
        const totalOrdersTrend = (Math.random() - 0.3) * 15; // 偏向正增长
        const todayOrdersTrend = (Math.random() - 0.4) * 8; // 更偏向正增长
        
        // 随机状态
        const statuses = ['正常', '活跃', '火爆', '平稳'];
        const status = statuses[Math.floor(Math.random() * statuses.length)];
        
        return {
          name,
          userCount,
          totalOrders,
          todayOrders,
          userTrend,
          totalOrdersTrend,
          todayOrdersTrend,
          status
        };
      });
      
      // 按总订单量排序
      this.communityData.sort((a, b) => b.totalOrders - a.totalOrders);
    },
    
    // 更新小区数据（模拟数据变化）
    updateCommunityData() {
      this.communityData = this.communityData.map(community => {
        // 小幅度更新数据
        const userChange = Math.floor(Math.random() * 10) - 3; // -3 到 6 的变化
        const totalOrdersChange = Math.floor(Math.random() * 15); // 0 到 14 的变化
        const todayOrdersChange = Math.floor(Math.random() * 5); // 0 到 4 的变化
        
        // 更新趋势
        const userTrend = (Math.random() - 0.3) * 10;
        const totalOrdersTrend = (Math.random() - 0.3) * 15;
        const todayOrdersTrend = (Math.random() - 0.4) * 8;
        
        // 随机状态变化
        const statuses = ['正常', '活跃', '火爆', '平稳'];
        const status = Math.random() > 0.8 
          ? statuses[Math.floor(Math.random() * statuses.length)] 
          : community.status;
        
        return {
          ...community,
          userCount: Math.max(0, community.userCount + userChange),
          totalOrders: community.totalOrders + totalOrdersChange,
          todayOrders: Math.max(0, community.todayOrders + todayOrdersChange),
          userTrend,
          totalOrdersTrend,
          todayOrdersTrend,
          status
        };
      });
      
      // 重新排序
      this.communityData.sort((a, b) => b.totalOrders - a.totalOrders);
    },
    
    // 根据趋势值获取样式类
    getTrendClass(trendValue) {
      if (trendValue > 0) return 'trend-up';
      if (trendValue < 0) return 'trend-down';
      return 'trend-flat';
    },
    
    // 根据趋势值获取图标
    getTrendIconByValue(trendValue) {
      if (trendValue > 0) return 'el-icon-top';
      if (trendValue < 0) return 'el-icon-bottom';
      return 'el-icon-minus';
    },
    
    // 格式化趋势显示
    formatTrend(trendValue) {
      const absValue = Math.abs(trendValue).toFixed(1);
      if (trendValue > 0) return `+${absValue}%`;
      if (trendValue < 0) return `-${absValue}%`;
      return '0%';
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      switch (status) {
        case '火爆': return 'status-hot';
        case '活跃': return 'status-active';
        case '平稳': return 'status-stable';
        default: return 'status-normal';
      }
    },
  }
};
</script>

<style scoped>
.dashboard-container {
  padding: 15px;
  background-color: #001529;
  min-height: 100vh;
  color: #00b4dc;
  display: flex;
  flex-direction: column;
}

.dashboard-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 180, 220, 0.3);
  position: relative;
}

.dashboard-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00b4dc, transparent);
}

.title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 15px;
}

.title-decoration {
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00b4dc);
  margin: 0 15px;
}

.title-decoration:last-child {
  background: linear-gradient(90deg, #00b4dc, transparent);
}

.dashboard-header h1 {
  font-size: 28px;
  color: #00fcff;
  margin: 0;
  text-shadow: 0 0 10px rgba(0, 252, 255, 0.5);
  letter-spacing: 1px;
  text-align: center;
}

.refresh-info {
  display: flex;
  align-items: center;
  gap: 30px;
  color: #00b4dc;
  font-size: 14px;
}

.time-display, .update-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-label, .update-label {
  font-size: 12px;
  opacity: 0.7;
}

.time-value, .update-value {
  font-size: 14px;
  font-family: 'Courier New', monospace;
}

.dashboard-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.data-card {
  background-color: rgba(0, 30, 60, 0.7);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 180, 220, 0.2);
  padding: 15px;
  transition: all 0.3s;
  border: 1px solid rgba(0, 180, 220, 0.3);
  position: relative;
  overflow: hidden;
}

.data-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00b4dc, transparent);
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 25px rgba(0, 180, 220, 0.4);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #00fcff;
  position: relative;
}

.header-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0066ff, #00b4dc);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  box-shadow: 0 0 10px rgba(0, 180, 220, 0.5);
}

.header-icon i {
  font-size: 16px;
  color: #fff;
}

.header-decoration {
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(90deg, #00b4dc, transparent);
  margin-left: 10px;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.data-item {
  display: flex;
  flex-direction: column;
  position: relative;
}

.data-decoration {
  position: absolute;
  right: 0;
  top: 50%;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 180, 220, 0.5));
}

.data-label {
  font-size: 14px;
  color: rgba(0, 180, 220, 0.7);
  margin-bottom: 5px;
}

.data-value {
  font-size: 28px;
  font-weight: bold;
  color: #00fcff;
  text-shadow: 0 0 10px rgba(0, 252, 255, 0.3);
  font-family: 'Orbitron', sans-serif;
}

.data-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}

.trend-up {
  color: #ff6b6b;
}

.trend-down {
  color: #00e676;
}

.trend-flat {
  color: #00b4dc;
}

.bottom-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.community-section {
  background-color: rgba(0, 30, 60, 0.7);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 180, 220, 0.2);
  padding: 20px;
  border: 1px solid rgba(0, 180, 220, 0.3);
  position: relative;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  color: #00fcff;
  text-shadow: 0 0 10px rgba(0, 252, 255, 0.3);
}

.community-table-container {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.community-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: #00b4dc;
  table-layout: fixed;
}

.scrollable-tbody {
  display: block;
  height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 180, 220, 0.5) rgba(0, 30, 60, 0.3);
}

/* 自定义滚动条样式 */
.scrollable-tbody::-webkit-scrollbar {
  width: 6px;
}

.scrollable-tbody::-webkit-scrollbar-track {
  background: rgba(0, 30, 60, 0.3);
}

.scrollable-tbody::-webkit-scrollbar-thumb {
  background-color: rgba(0, 180, 220, 0.5);
  border-radius: 3px;
}

.community-table thead {
  display: table;
  width: calc(100% - 6px); /* 减去滚动条宽度 */
  table-layout: fixed;
}

.community-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* 设置列宽 */
.community-table th:nth-child(1),
.community-table td:nth-child(1) {
  width: 25%;
}

.community-table th:nth-child(2),
.community-table td:nth-child(2),
.community-table th:nth-child(3),
.community-table td:nth-child(3),
.community-table th:nth-child(4),
.community-table td:nth-child(4) {
  width: 20%;
}

.community-table th:nth-child(5),
.community-table td:nth-child(5) {
  width: 15%;
}

.community-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.community-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0066ff, #00b4dc);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(0, 180, 220, 0.5);
}

.community-icon i {
  font-size: 14px;
  color: #fff;
}

.data-with-trend {
  display: flex;
  flex-direction: column;
}

.table-value {
  font-weight: bold;
  color: #00fcff;
  font-size: 16px;
}

.table-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.status-hot {
  background-color: rgba(255, 87, 87, 0.2);
  color: #ff5757;
  border: 1px solid rgba(255, 87, 87, 0.3);
}

.status-active {
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-stable {
  background-color: rgba(0, 230, 118, 0.2);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.3);
}

.status-normal {
  background-color: rgba(0, 180, 220, 0.2);
  color: #00b4dc;
  border: 1px solid rgba(0, 180, 220, 0.3);
}

.chart-section {
  background-color: rgba(0, 30, 60, 0.7);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 180, 220, 0.2);
  padding: 20px;
  border: 1px solid rgba(0, 180, 220, 0.3);
  position: relative;
}

.chart-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  font-size: 18px;
  color: #00fcff;
  text-shadow: 0 0 10px rgba(0, 252, 255, 0.3);
}

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

@media (max-width: 1200px) {
  .bottom-sections {
    grid-template-columns: 1fr;
  }
  
  .community-table-container,
  .chart {
    height: 250px;
  }
  
  .scrollable-tbody {
    height: 200px;
  }
}

@media (max-width: 768px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }
  
  .dashboard-header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .refresh-info {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .bottom-sections {
    grid-template-columns: 1fr;
  }
  
  .community-table-container {
    height: 180px;
  }
  
  .scrollable-tbody {
    height: 130px;
  }
  
  .chart {
    height: 180px;
  }
  
  .title-decoration {
    width: 30px;
  }
  
  .dashboard-header h1 {
    font-size: 22px;
  }
  
  .data-card {
    padding: 10px;
  }
  
  .data-value {
    font-size: 22px;
  }
}

/* 添加一些动画效果 */
@keyframes pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.data-value {
  animation: pulse 2s infinite;
}

.time-value {
  animation: pulse 1s infinite;
}
</style> 