<template>
  <div class="dashboard-container">
    <!-- 左侧面板 -->
    <aside class="dashboard-left">
    <!-- 日常预警 -->
    <div class="panel alert-panel">
      <div class="panel-header">
        <h3> 日常预警</h3>
      </div>
      <div class="alert-stats">
        <div class="alert-item total-alert">
          <div class="alert-number">{{ alertStats.total }}</div>
          <div class="alert-label">设备预警总数量</div>
        </div>
        <div class="alert-item offline-alert">
          <div class="alert-number">{{ alertStats.offline }}</div>
          <div class="alert-label">离线预警</div>
        </div>
        <div class="alert-item battery-alert">
          <div class="alert-number">{{ alertStats.lowBattery }}</div>
          <div class="alert-label">低电量预警</div>
        </div>
        <div class="alert-item movement-alert">
          <div class="alert-number">{{ alertStats.abnormalMovement }}</div>
          <div class="alert-label">运动异常预警</div>
        </div>
      </div>
    </div>

    <!-- 监管项目清单 -->
    <div class="panel projects-panel">
      <div class="panel-header">
        <h3> 监管项目清单</h3>
      </div>
      <div class="projects-table">
        <div class="table-header">
          <div class="header-cell">项目名称</div>
          <div class="header-cell">项目状态</div>
          <div class="header-cell amount-header">贷款金额</div>
          <div class="header-cell period-header">到期日期</div>
        </div>
        <div class="table-body">
          <div class="table-row" v-for="project in projectsData" :key="project.id">
            <div class="cell project-name">{{ project.name }}</div>
            <div class="cell status" :class="`status-${project.status}`">{{ project.statusText }}</div>
            <div class="cell amount">{{ project.amount }}</div>
            <div class="cell period">{{ project.expiryDate }}</div>
          </div>
          <div v-if="projectsData.length === 0" class="no-data">
            暂无项目数据
          </div>
        </div>
      </div>
    </div>
  </aside>
  
  <!-- 中间地图区域 -->
  <section class="dashboard-center">
    <div class="map-container">
      <Map3D />
    </div>
  </section>
  
  <!-- 右侧面板 -->
  <aside class="dashboard-right">
    <!-- 监管生资总量统计 -->
    <div class="panel materials-panel">
      <div class="panel-header">
        <h3> 监管生资总量统计</h3>
      </div>
      <div class="materials-stats">
        <div class="stat-card" v-for="material in materialsData" :key="material.id">
          <div class="stat-number">{{ material.value }}</div>
          <div class="stat-unit">{{ material.unit }}</div>
          <div class="stat-label">{{ material.name }}</div>
          <div class="stat-progress">
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: material.percentage + '%', background: material.color }"></div>
            </div>
            <span class="progress-text">{{ material.percentage }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 牛只耳标佩戴统计 -->
    <div class="panel ear-tag-panel">
      <div class="panel-header">
        <h3> 牛只耳标佩戴统计</h3>
      </div>
      <div class="ear-tag-chart">
        <v-chart
          class="chart"
          :option="earTagChartOption"
          autoresize
        />
      </div>
    </div>

    <!-- 监管硬件配置统计 -->
    <div class="panel hardware-panel">
      <div class="panel-header">
        <h3> 监管硬件配置统计</h3>
      </div>
      <div class="hardware-stats">
        <div class="hardware-item" v-for="hardware in hardwareData" :key="hardware.id">
          <div class="hardware-info">
            <div class="hardware-name">{{ hardware.name }}</div>
            <div class="hardware-count">{{ hardware.count }}</div>
          </div>
          <div class="hardware-icon">
            <div class="icon-circle" :style="{ background: hardware.color }">
              <i :class="hardware.icon"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </aside>
  </div>
</template>

<script>
import Map3D from './Map3D.vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default {
  name: 'Home',
  components: {
    Map3D,
    VChart
  },
  data() {
    return {
      // 日常预警数据
      alertStats: {
        total: 0,
        lowBattery: 0,
        offline: 0,
        highTemperature: 0,
        abnormalMovement: 0,
        wearOff: 0
      },
      // 监管生资总量数据
      materialsData: [
        {
          id: 1,
          name: '饲料总量',
          value: '8,500',
          unit: '吨',
          percentage: 76,
          color: '#4CC9F0'
        },
        {
          id: 2,
          name: '兽药总量',
          value: '3,200',
          unit: '吨',
          percentage: 65,
          color: '#4895EF'
        },
        {
          id: 3,
          name: '疫苗总量',
          value: '1,500',
          unit: '万剂',
          percentage: 80,
          color: '#00CED1'
        },
        {
          id: 4,
          name: '消毒用品总量',
          value: '2,800',
          unit: '吨',
          percentage: 70,
          color: '#708090'
        }
      ],

      // 出售统计柱状图配置
      salesChartOption: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%',
          top: '15%'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 10,
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 10
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 255, 255, 0.2)'
            }
          }
        },
        series: [
          {
            type: 'line',
            data: [1200, 1900, 1300, 1500, 2000, 1800, 2200, 2500],
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: '#00ffff'
            },
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0, color: '#00ffff'
                }, {
                  offset: 1, color: '#0080ff'
                }]
              },
              width: 3
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 255, 255, 0.3)'
                }, {
                  offset: 1, color: 'rgba(0, 255, 255, 0.05)'
                }]
              }
            }
          }
        ]
      },

      // 牛只耳标佩戴统计堆叠柱状图配置
      earTagChartOption: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: {
            color: '#ffffff'
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['已佩戴', '未佩戴'],
          right: '5%',
          top: '10%',
          orient: 'vertical',
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 8
        },
        grid: {
          left: '15%',
          right: '30%',
          bottom: '15%',
          top: '15%'
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 10
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 255, 255, 0.2)'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['东方养殖场', '西部牧场', '南山农场', '北岭牧业', '中心养殖基地'],
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 10
          }
        },
        series: [
          {
            name: '已佩戴',
            type: 'bar',
            stack: '总量',
            data: [8500, 12000, 9800, 7200, 8178],
            itemStyle: {
              color: '#00ffff'
            }
          },
          {
            name: '未佩戴',
            type: 'bar',
            stack: '总量',
            data: [1500, 2200, 1800, 1300, 1322],
            itemStyle: {
              color: '#84acf0'
            }
          }
        ]
      },

      // 监管硬件配置统计数据
      hardwareData: [
        {
          id: 1,
          name: '主机',
          count: '0',
          percentage: 0,
          color: '#4CC9F0',
          icon: 'fas fa-server'
        },
        {
          id: 2,
          name: '耳标',
          count: '110',
          percentage: 85,
          color: '#4895EF',
          icon: 'fas fa-tags'
        },
        {
          id: 3,
          name: '项圈',
          count: '0',
          percentage: 0,
          color: '#00CED1',
          icon: 'fas fa-circle-dot'
        }
      ],

      // 监管项目数据
      projectsData: [],
      
      // 项目状态映射
      projectStatusMap: {
        'active': '进行中',
        'completed': '已完成',
        'overdue': '已逾期',
        'pending': '待审核'
      }
    }
  },
  computed: {},
  
  mounted() {
    // 页面加载时获取预警数据
    this.fetchAlertData();
    // 页面加载时获取项目数据
    this.fetchProjectsData();
    // 设置定时器，每隔一段时间更新一次数据
    this.intervalId = setInterval(() => {
      this.fetchAlertData();
      this.fetchProjectsData();
    }, 30000); // 30秒更新一次
  },
  beforeUnmount() {
    // 组件卸载时清除定时器
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
  methods: {
    async fetchAlertData() {
      try {
        // 使用简单的fetch请求，不添加可能触发预检请求的额外头信息
        const response = await fetch('https://ad.ningmuyun.com/farm/api/smart-alerts/public/collar?search=&alertType=&page=1&limit=10', {
          method: 'GET',
          mode: 'cors'
        });
        const data = await response.json();
        if (data.success && data.stats) {
          this.alertStats = {
            ...data.stats,
            total: data.total || 0 // 总预警数量使用data.total
          };
        }
      } catch (error) {
        console.error('获取预警数据失败:', error);
        // 出错时使用模拟数据
        this.alertStats = {
          total: 2,
          lowBattery: 1,
          offline: 0,
          highTemperature: 1,
          abnormalMovement: 0,
          wearOff: 0
        };
      }
    },
    
    async fetchProjectsData() {
      try {
        // 由于API存在CORS跨域限制和认证问题，直接使用模拟数据
        // 实际项目中应该使用下面注释的认证代码
        console.log('由于API存在CORS跨域限制和认证问题，使用模拟数据展示监管项目');
        
        // 模拟API数据返回的延迟，使体验更真实
        await new Promise(resolve => setTimeout(resolve, 500));
        
        // 使用增强版模拟数据
        this.setEnhancedMockProjectsData();
        
        /*
        // 实际项目中应该使用以下代码进行认证和API调用
        // 1. 首先导入认证服务
        // import { AuthService } from '../utils/api-auth-guide.js';
        
        // 2. 初始化认证服务
        // const authService = new AuthService();
        // authService.init();
        
        // 3. 检查是否已认证，未认证则尝试登录
        // if (!authService.isAuthenticated()) {
        //   try {
        //     // 这里应该使用用户输入的凭据，而不是硬编码
        //     await authService.login('admin', 'password');
        //   } catch (loginError) {
        //     console.error('登录失败:', loginError);
        //     this.setEnhancedMockProjectsData();
        //     return;
        //   }
        // }
        
        // 4. 使用认证服务调用API
        // try {
        //   const data = await authService.request('https://ad.ningmuyun.com/bank/api/projects?page=1&limit=12&search=&status=');
        //   
        //   if (data.success && data.data && data.data.items) {
        //     console.log('成功获取API数据，共', data.data.items.length, '条项目');
        //     this.projectsData = data.data.items.map(project => ({
        //       id: project.id,
        //       name: project.name || '未知项目',
        //       status: project.status || 'pending',
        //       statusText: this.projectStatusMap[project.status] || '未知状态',
        //       amount: project.amount ? `${project.amount}万元` : '0万元',
        //       expiryDate: project.expiryDate || '暂无日期'
        //     }));
        //   } else {
        //     console.warn('API返回数据格式不符合预期，使用模拟数据...');
        //     this.setEnhancedMockProjectsData();
        //   }
        // } catch (apiError) {
        //   console.error('API请求失败:', apiError);
        //   this.setEnhancedMockProjectsData();
        // }
        */
      } catch (error) {
        console.error('获取项目数据时发生异常:', error);
        // 出错时确保有数据展示
        this.setEnhancedMockProjectsData();
      }
    },
    
    setMockProjectsData() {
      // 基础模拟项目数据
      this.projectsData = [
        {
          id: 1,
          name: '东方养殖场贷款项目',
          status: 'active',
          statusText: '进行中',
          amount: '500万元',
          expiryDate: '2025-12-11'
        },
        {
          id: 2,
          name: '瑞丰养殖场升级改造',
          status: 'active',
          statusText: '进行中',
          amount: '380万元',
          expiryDate: '2025-10-20'
        },
        {
          id: 3,
          name: '晟世鸿鑫养殖扩建',
          status: 'pending',
          statusText: '待审核',
          amount: '260万元',
          expiryDate: '2025-11-30'
        },
        {
          id: 4,
          name: '和谐养殖场设备更新',
          status: 'completed',
          statusText: '已完成',
          amount: '180万元',
          expiryDate: '2024-06-15'
        },
        {
          id: 5,
          name: '生态养殖场环保改造',
          status: 'overdue',
          statusText: '已逾期',
          amount: '120万元',
          expiryDate: '2024-03-10'
        }
      ];
    },
    
    setEnhancedMockProjectsData() {
      // 增强版模拟项目数据，按指定格式修改
      this.projectsData = [
        {
          id: 1,
          name: '宁夏银川肉牛养殖基地项目',
          status: 'active',
          statusText: '正常运行',
          amount: '1280万元',
          expiryDate: '2025-12-31'
        },
        {
          id: 2,
          name: '中卫市活体羊抵押融资项目',
          status: 'warning',
          statusText: '即将到期',
          amount: '850万元',
          expiryDate: '2024-06-15'
        },
        {
          id: 3,
          name: '石嘴山市奶牛养殖扩建项目',
          status: 'pending',
          statusText: '待审核',
          amount: '650万元',
          expiryDate: '2025-09-30'
        },
        {
          id: 4,
          name: '吴忠市生态养殖示范基地建设',
          status: 'active',
          statusText: '正常运行',
          amount: '980万元',
          expiryDate: '2025-08-20'
        },
        {
          id: 5,
          name: '固原市肉牛产业链建设项目',
          status: 'completed',
          statusText: '已完成',
          amount: '520万元',
          expiryDate: '2024-04-10'
        },
        {
          id: 6,
          name: '贺兰山农牧区活体资产抵押项目',
          status: 'overdue',
          statusText: '已逾期',
          amount: '320万元',
          expiryDate: '2024-02-28'
        },
        {
          id: 7,
          name: '银川市智慧农业示范园建设',
          status: 'active',
          statusText: '正常运行',
          amount: '1560万元',
          expiryDate: '2025-11-30'
        },
        {
          id: 8,
          name: '宁东能源化工基地配套养殖项目',
          status: 'pending',
          statusText: '待审核',
          amount: '780万元',
          expiryDate: '2025-10-15'
        }
      ];
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  /* 移除flex布局，使用App.vue中的fixed布局 */
  background: transparent;
  color: #ffffff;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 地图容器样式 */
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 统计牌区域样式 */
.stats-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  min-width: 200px;
  padding: 15px;
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  background: rgba(0, 212, 255, 0.1);
  transform: translateY(-2px);
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #00ffff;
  font-family: 'Arial', monospace;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* 左侧面板样式 */
  .dashboard-left {
    width: 560px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
  }
  
  /* 中间地图区域样式 */
  .dashboard-center {
    flex: 1;
    min-width: 450px;
  }
  
  /* 右侧面板样式 */
  .dashboard-right {
    width: 560px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* 右侧面板内容容器 */
  .dashboard-right > .panel {
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .dashboard-left,
    .dashboard-center,
    .dashboard-right {
      flex: 100%;
      margin: 0 0 20px 0;
    }
  }

  /* 面板通用样式 */
  .panel {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .panel-header {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    padding: 0;
    border-bottom: none;
  }

  .panel-header h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
  }

  /* 生资总量统计样式 */
  .materials-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 10px 0;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.5) rgba(0, 0, 0, 0.1);
  }

  .materials-stats::-webkit-scrollbar {
    width: 6px;
  }

  .materials-stats::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
  }

  .materials-stats::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.5);
    border-radius: 3px;
  }

  .materials-stats::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.8);
  }

  .stat-card {
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .stat-card:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.4);
    transform: translateY(-2px);
  }

  .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #00ffff;
    font-family: 'Arial', monospace;
    line-height: 1.2;
  }

  .stat-unit {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 5px;
  }

  .stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 3px;
    margin-bottom: 8px;
  }

  .stat-progress {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease-in-out;
  }

  .progress-text {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    min-width: 25px;
    text-align: right;
  }

  /* 图表通用样式 */
  .ear-tag-chart {
    height: 250px;
  }

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

  /* 监管项目清单表格样式 */
  .projects-table {
    width: 100%;
  }

  .table-header {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
    background: none;
    position: static;
  }

  .header-cell {
    flex: 1;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    padding: 0 8px;
  }

  .amount-header {
    text-align: right;
  }

  .period-header {
    text-align: right;
  }

  .table-body {
    max-height: 400px;
    overflow-y: auto;
    /* 隐藏滚动条但保留滚动功能 */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .table-body::-webkit-scrollbar {
    display: none;
  }

  .table-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    background: none;
  }

  .table-row:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .cell {
    flex: 1;
    color: #fff;
    font-size: 12px;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-name {
    font-weight: 500;
  }

  .amount {
    text-align: right;
  }

  .period {
    text-align: right;
    color: rgba(255, 255, 255, 0.7);
  }

  /* 项目状态样式 */
  .status {
    text-align: center;
  }

  .status-active {
    color: #4CAF50;
    font-weight: 500;
  }

  .status-completed {
    color: #2196F3;
    font-weight: 500;
  }

  .status-overdue {
    color: #FF5252;
    font-weight: 500;
  }

  .status-pending {
    color: #FFC107;
    font-weight: 500;
  }

  /* 无数据状态 */
  .no-data {
    text-align: center;
    padding: 40px 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
  }

/* 日常预警样式 */
.alert-panel {
  height: 350px; /* 设置固定高度 */
  display: flex;
  flex-direction: column;
}

.alert-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  flex: 1;
  overflow-y: auto; /* 允许滚动但隐藏滚动条 */
  /* 隐藏滚动条 - Firefox */
  scrollbar-width: none;
}

/* 隐藏滚动条 - WebKit浏览器 (Chrome, Safari) */
.alert-stats::-webkit-scrollbar {
  display: none;
}





.alert-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: rgba(0, 212, 255, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  transition: all 0.3s ease;
}

.alert-item:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.4);
  transform: translateX(2px);
}

.alert-item.total-alert {
  border-left: 4px solid #ff6b6b;
}

.alert-item.offline-alert {
  border-left: 4px solid #f9c74f;
}

.alert-item.battery-alert {
  border-left: 4px solid #90be6d;
}

.alert-item.movement-alert {
  border-left: 4px solid #43aa8b;
}

.alert-number {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
  font-family: 'Arial', monospace;
}

.alert-label {
  font-size: 14px;
  color: #ffffff;
  text-align: right;
}

/* 抵押表格样式 */
.mortgage-table {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
}

.mortgage-table::-webkit-scrollbar {
  width: 6px;
}

.mortgage-table::-webkit-scrollbar-track {
  background: rgba(0, 212, 255, 0.1);
  border-radius: 3px;
}

.mortgage-table::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.5);
  border-radius: 3px;
}

.mortgage-table::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.8);
}

.table-header {
  display: flex;
  padding: 10px;
  background: rgba(0, 212, 255, 0.1);
  border-radius: 4px;
  margin-bottom: 8px;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 5;
}

.header-cell {
  flex: 1;
  text-align: center;
  color: #00ffff;
  font-size: 12px;
  padding: 0 5px;
}

.amount-header {
  text-align: right !important;
}

.period-header {
  text-align: center !important;
}

.table-body {
  padding-top: 5px;
}

.table-row {
  display: flex;
  padding: 10px;
  background: rgba(0, 212, 255, 0.05);
  border-radius: 4px;
  margin-bottom: 5px;
  transition: all 0.3s ease;
}

.table-row:hover {
  background: rgba(0, 212, 255, 0.1);
  transform: translateX(2px);
}

.cell {
  flex: 1;
  text-align: center;
  font-size: 12px;
  padding: 0 5px;
}

.farm-name {
  text-align: left !important;
}

.amount {
  text-align: right !important;
}

.period {
  color: #ffffff !important;
}

.level-high {
  color: #00ffff;
  font-weight: bold;
}

.level-medium {
  color: #f9c74f;
}

.level-low {
  color: #ff6b6b;
}

/* 耳标面板样式 */
.ear-tag-panel {
  background: rgba(255, 255, 255, 0.1);
}

/* 卡片翻转效果 */
.flip-cards {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.flip-card {
  flex: 1;
  perspective: 1000px;
  height: 150px;
  min-width: 150px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

.flip-card-front {
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.flip-card-back {
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  transform: rotateY(180deg);
}

.card-icon {
  font-size: 24px;
  margin-bottom: 10px;
  color: #00ffff;
}

.card-title {
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 5px;
}

.card-value {
  font-size: 20px;
  font-weight: bold;
  color: #00ffff;
}

/* 监管生资总量面板样式 */
  .materials-panel {
    background: rgba(255, 255, 255, 0.1);
  }

/* 监管硬件配置统计样式 */
.hardware-panel {
  background: rgba(255, 255, 255, 0.1);
}

.hardware-stats {
  padding: 15px;
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: space-between;
}

.hardware-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 15px 20px;
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.hardware-item:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.4);
  transform: translateY(-2px);
}

.hardware-icon {
  margin-left: 15px;
}

.icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ffffff;
}

.hardware-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.hardware-name {
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 8px;
}

.hardware-count {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
  font-family: 'Arial', monospace;
}


</style>