<template>
  <div class="dashboard-container">
    <!-- 左侧面板 -->
    <aside class="dashboard-left">
    <!-- 存栏总数统计 -->
    <div class="panel livestock-panel">
      <div class="panel-header">
        <h3> 存栏总数统计</h3>
      </div>
      <div class="echarts-container">
        <div class="total-display">
          <!-- <div class="total-number">{{ totalLivestock.toLocaleString() }}</div> -->
          <!-- <div class="total-label">总存栏</div> -->
        </div>
        <v-chart 
          class="livestock-chart" 
          :option="livestockChartOption" 
          autoresize
        />
      </div>
    </div>

    <!-- 出售统计 -->
    <div class="panel sales-panel">
      <div class="panel-header">
        <h3> 出售统计(头)</h3>
      </div>
      <div class="sales-chart">
        <v-chart
          class="chart"
          :option="salesChartOption"
          autoresize
        />
      </div>
    </div>

    <!-- 活体抵押业务担保情况 -->
    <div class="panel mortgage-panel">
      <div class="panel-header">
        <h3> 活体抵押业务担保情况</h3>
      </div>
      <div class="mortgage-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="item in mortgageData" :key="item.id">
            <div class="cell farm-name">{{ item.farmName }}</div>
            <div class="cell level" :class="`level-${item.level}`">{{ item.levelText }}</div>
            <div class="cell amount">{{ item.amount }}</div>
            <div class="cell period" style="color:w ;font-size: 12px;">{{ item.period }}</div>
          </div>
        </div>
      </div>
    </div>
  </aside>
  
  <!-- 中间地图区域 -->
  <section class="dashboard-center">
    <div class="map-container">
      <!-- 统计牌区域 -->
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-number">{{ totalLivestock.toLocaleString() }}</div>
          <div class="stat-label">总存栏数</div>
          <!-- <div class="stat-unit">头</div> -->
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ totalSales.toLocaleString() }}</div>
          <div class="stat-label">总出售头数</div>
          <!-- <div class="stat-unit">头</div> -->
        </div>
      </div>
      <Map3D />
    </div>
  </section>
  
  <!-- 右侧面板 -->
  <aside class="dashboard-right">
    <!-- 防疫统计 -->
    <div class="panel epidemic-panel">
      <div class="panel-header">
        <h3> 防疫统计(万头)</h3>
      </div>
      <div class="epidemic-content">
        <v-chart 
          class="epidemic-chart" 
          :option="epidemicChartOption" 
          autoresize
        />
      </div>
    </div>

    <!-- 牛只耳标佩戴统计 -->
    <div class="panel ear-tag-panel">
      <div class="panel-header">
        <h3> 牛只耳标佩戴统计</h3>
      </div>
      <div class="ear-tag-stats">
        <div class="flip-cards">
          <div class="flip-card">
            <div class="flip-card-inner">
              <div class="flip-card-front">
                <div class="card-number">{{ earTagStats.completed }}</div>
                <div class="card-label">已佩戴耳标数</div>
              </div>
            </div>
          </div>
          <div class="flip-card">
            <div class="flip-card-inner">
              <div class="flip-card-front">
                <div class="card-number">{{ earTagStats.planned }}</div>
                <div class="card-label">计划佩戴耳标数</div>
              </div>
            </div>
          </div>
        </div>
        <div class="chart-container">
          <v-chart 
            class="ear-tag-chart" 
            :option="earTagChartOption" 
            autoresize
          />
        </div>
      </div>
    </div>

    <!-- 牛只参保统计 -->
    <div class="panel cattle-insurance-panel">
      <div class="panel-header">
        <h3> 牛只参保统计</h3>
      </div>
      <div class="insurance-stats">
        <div class="insurance-circle" style="display: flex; align-items: center;">
          <v-chart 
            class="insurance-chart" 
            :option="insuranceChartOption" 
            autoresize
          />
          <div class="insurance-center">
            <div class="insurance-number">160,000</div>
            <div class="insurance-label">参保总数(头)</div>
          </div>
        </div>
        <div class="insurance-companies">
          <div class="company-item">
            <div class="company-bar">
              <div class="company-fill" style="width: 35%; background: #4169E1"></div>
            </div>
            <span class="company-name">中国人民财产保险公司平凉支公司</span>
          </div>
          <div class="company-item">
            <div class="company-bar">
              <div class="company-fill" style="width: 25%; background: #00CED1"></div>
            </div>
            <span class="company-name">中国太平洋保险平凉支公司</span>
          </div>
          <div class="company-item">
            <div class="company-bar">
              <div class="company-fill" style="width: 20%; background: #00CED1"></div>
            </div>
            <span class="company-name">中国人寿财产保险股份有限公司平凉支公司</span>
          </div>
          <div class="company-item">
            <div class="company-bar">
              <div class="company-fill" style="width: 20%; background: #708090"></div>
            </div>
            <span class="company-name">中国太平洋财产保险平凉支公司</span>
          </div>
        </div>
      </div>
    </div>
  </aside>
  </div>
</template>

<style scoped>
.dashboard-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px;
  box-sizing: border-box;
}

.dashboard-left,
.dashboard-center,
.dashboard-right {
  flex: 1;
  min-width: 300px;
}

@media (max-width: 768px) {
  .dashboard-left,
  .dashboard-center,
  .dashboard-right {
    flex: 100%;
  }
}
</style>

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

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

export default {
  name: 'Home',
  components: {
    Map3D,
    VChart
  },
  data() {
    return {
      // 防疫统计柱状图配置
      epidemicChartOption: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: {
            color: '#ffffff'
          },
          formatter: '{b}: {c}万头'
        },
        legend: {
          data: ['口蹄疫防疫', '猪瘟防疫', '其他类型防疫'],
          right: '10%',
          top: '10%',
          orient: 'vertical',
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 8
        },
        grid: {
          left: '15%',
          right: '35%',
          bottom: '15%',
          top: '15%'
        },
        xAxis: {
          type: 'category',
          data: ['口蹄疫防疫', '猪瘟防疫', '其他类型防疫'],
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 10,
            rotate: 0,
            margin: 10
          },
          axisTick: {
            alignWithLabel: true,
            show: true
          },
          boundaryGap: true
        },
        yAxis: {
          type: 'value',
          name: '头数(万)',
          nameTextStyle: {
            color: '#00ffff',
            fontSize: 12
          },
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 10
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 255, 255, 0.2)'
            }
          }
        },
        series: [{
          name: '防疫统计',
          type: 'bar',
          data: [
            { value: 32.67, itemStyle: { color: '#00ffff' } },
            { value: 20.3, itemStyle: { color: '#84acf0' } },
            { value: 1.91, itemStyle: { color: '#96ceb4' } }
          ],
          barWidth: '30%',
          itemStyle: {
            color: function(params) {
              const colors = ['#00ffff', '#84acf0', '#96ceb4'];
              return colors[params.dataIndex];
            }
          }
        }]
      },
      // 出售统计柱状图配置
      salesChartOption: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: {
            color: '#ffffff'
          },
          formatter: '{b}月: {c}头'
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '10%',
          top: '10%'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          name: '出售头数',
          nameTextStyle: {
            color: '#00ffff',
            fontSize: 0
          },
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 255, 255, 0.2)'
            }
          }
        },
        series: [{
          name: '出售统计',
          type: 'bar',
          data: [3000, 3500, 400, 425, 450, 4750],
          barWidth: '30%', 
          itemStyle: {
            color: '#00ffff'
          },
          emphasis: {
            itemStyle: {
              color: '#00ffff'
            }
          }
        }]
      },
      // 存栏总数饼图配置
      livestockChartOption: {
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b}: {c}头 ({d}%)',
           backgroundColor: 'rgba(0, 0, 0, 0.8)',
           borderColor: '#00ffff',
           borderWidth: 1,
           textStyle: {
             color: '#ffffff'
           }
         },
         legend: {
           orient: 'vertical',
           left: '5%',
           top: 'center',
           textStyle: {
             color: '#ffffff',
             fontSize: 11
           },
           itemWidth: 12,
           itemHeight: 8
         },
         series: [
           {
             name: '存栏统计',
             type: 'pie',
             radius: ['25%', '70%'],
             center: ['65%', '50%'],
             avoidLabelOverlap: false,
             roseType: 'area',
             label: {
               show: true,
               position: 'outside',
               formatter: '{b}\n{d}%',
               fontSize: 10,
               color: '	#F5F5F5'
             },
             emphasis: {
               label: {
                 show: true,
                 fontSize: '14',
                 fontWeight: 'bold',
                 color: '#00ffff'
               },
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 255, 255, 0.5)'
               }
             },
             labelLine: {
               show: true,
               length: 15,
               length2: 8,
               lineStyle: {
                 color: '#ffffff',
                 width: 1
               }
             },
             data: [
               { value: 25234, name: '东方养殖场', itemStyle: { color: '#00ffff' } },
               { value: 32475, name: '西部牧场', itemStyle: { color: '#00d4ff' } },
               { value: 28900, name: '南山农场', itemStyle: { color: '#40e0d0' } },
               { value: 21100, name: '北岭牧业', itemStyle: { color: '#20b2aa' } },
               { value: 19000, name: '中心养殖基地', itemStyle: { color: '#48cae4' } }
             ]
           }
         ]
       },

       // 耳标统计数据
       earTagStats: {
         completed: 45678,
         planned: 52000
       },

       // 耳标佩戴统计堆叠柱状图配置
       earTagChartOption: {
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
           },
           backgroundColor: 'rgba(0, 0, 0, 0.8)',
           borderColor: '#00ffff',
           borderWidth: 1,
           textStyle: {
             color: '#ffffff'
           },
           formatter: function(params) {
             let result = params[0].name + '<br/>';
             params.forEach(function(item) {
               result += item.marker + item.seriesName + ': ' + item.value + '头<br/>';
             });
             return result;
           }
         },
         legend: {
           data: ['已佩戴', '未佩戴'],
           top: '5%',
           textStyle: {
             color: '#ffffff',
             fontSize: 12
           },
           itemWidth: 12,
           itemHeight: 8
         },
         grid: {
           left: '15%',
           right: '10%',
           bottom: '15%',
           top: '25%'
         },
         xAxis: {
           type: 'value',
           name: '数量(头)',
           nameTextStyle: {
             color: '#00ffff',
             fontSize: 12
           },
           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'
             }
           }
         ]
       },

       // 牛只参保统计圆形进度图配置
       insuranceChartOption: {
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b}: {c}头 ({d}%)',
           backgroundColor: 'rgba(0, 0, 0, 0.8)',
           borderColor: '#00ffff',
           borderWidth: 1,
           textStyle: {
             color: '#ffffff'
           }
         },
         series: [
           {
             name: '参保统计',
             type: 'pie',
             radius: ['70%', '90%'],
             center: ['50%', '50%'],
             startAngle: 90,
             avoidLabelOverlap: false,
             label: {
               show: false
             },
             labelLine: {
               show: false
             },
             data: [
               {
                 value: 160000,
                 name: '已参保',
                 itemStyle: {
                   color: {
                     type: 'linear',
                     x: 0,
                     y: 0,
                     x2: 1,
                     y2: 1,
                     colorStops: [{
                       offset: 0, color: '#00ffff'
                     }, {
                       offset: 1, color: '#0080ff'
                     }]
                   }
                 }
               },
               {
                 value: 40000,
                 name: '未参保',
                 itemStyle: {
                   color: 'rgba(255, 255, 255, 0.1)'
                 }
               }
             ]
           }
         ]
       },

       // 活体抵押业务担保情况数据
       mortgageData: [
         {
           id: 1,
           farmName: '东方养殖场',
           level: 'high',
           levelText: 'AAA级',
           amount: '500万元',
           period: '2025-12-11'
         },
         {
           id: 2,
           farmName: '瑞丰养殖场',
           level: 'high',
           levelText: 'AA级',
           amount: '380万元',
           period: '2025-12-11'
         },
         {
           id: 3,
           farmName: '晟世鸿鑫养殖场',
           level: 'medium',
           levelText: 'A级',
           amount: '260万元',
           period: '2025-12-11'
         },
         {
           id: 4,
           farmName: '和谐养殖场',
           level: 'medium',
           levelText: 'BBB级',
           amount: '180万元',
           period: '2025-12-11'
         },
         {
           id: 5,
           farmName: '生态养殖场',
           level: 'low',
           levelText: 'BB级',
           amount: '120万元',
           period: '2025-12-11'
         }
       ]

     }
   },
   computed: {
    totalLivestock() {
      return this.livestockChartOption.series[0].data.reduce((sum, item) => sum + item.value, 0)
    },
    totalSales() {
      return this.salesChartOption.series[0].data.reduce((sum, value) => sum + value, 0)
    }
  }
}
</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 {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 60px;
  z-index: 10;
  padding: 0 20px;
}

.stat-card {
  background: rgba(0, 212, 255, 0.1);
  border: none;
  border-radius: 8px;
  padding: 20px 30px;
  text-align: center;
  position: relative;
  min-width: 180px;
  backdrop-filter: blur(5px);
  box-shadow: 
    0 0 15px rgba(58, 170, 170, 0.4),
    inset 0 0 15px rgba(0, 212, 255, 0.1);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #1B5776;
  border-radius: 8px;
  z-index: -1;
  /* animation: borderGlow 2s ease-in-out infinite alternate; */
}

/* @keyframes borderGlow {
  0% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
  }
} */
/* 
@keyframes borderGlow {
  0% {
    box-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.8);
  }
} */

.stat-card::after {
  /* 移除内边框 */
  display: none;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #00ffff;
  /* text-shadow: 0 0 10px rgba(0, 255, 255, 0.6); */
  margin-bottom: 8px;
  font-family: 'Arial', monospace;
}

.stat-label {
  font-size: 14px;
  color: #00d4ff;
  margin-bottom: 4px;
  /* text-shadow: 0 0 5px rgba(0, 212, 255, 0.3); */
}

/* .stat-unit {
  font-size: 12px;
  color: #cccccc;
  opacity: 0.8;
} */

/* 左右侧面板容器边框 */
.dashboard-left::before,
.dashboard-right::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 10px;
  right: 10px;
  bottom: 0px;
  border: 2px solid #00d4ff;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 
    0 0 10px rgba(0, 212, 255, 0.3),
    inset 0 0 10px rgba(0, 212, 255, 0.1);
}

.dashboard-left::after,
.dashboard-right::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  /* bottom: 10px; */
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 6px;
  pointer-events: none;
}

.panel {
  background: rgba(7, 59, 68, 0.15);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 6px;
  margin-bottom: 15px;
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden; /* 防止内容溢出 */
  box-shadow: 
    0 0 8px rgba(0, 212, 255, 0.2),
    inset 0 0 8px rgba(0, 212, 255, 0.05);
}

/* 面板内部发光边框 */
/* .panel::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 4px;
  pointer-events: none;
} */

/* 面板角落装饰 */
/* .panel::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 20px;
  height: 20px;
  border-top: 2px solid #00d4ff;
  border-left: 2px solid #00d4ff;
  border-radius: 6px 0 0 0;
} */

.panel-header {
  position: relative;
  /* padding: 10px 15px 8px 15px; */
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  margin-bottom: 10px;
}

.panel-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15px;
  width: 30px;
  height: 2px;
  background: #00d4ff;
  box-shadow: 0 0 4px rgba(0, 212, 255, 0.6);
}

.panel-header h3 {
  /* margin-bottom: 5px; */
  color: #ffffff;
  font-size: 16px;
  padding-bottom: 5px;
  font-weight: bold;
  /* text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); */
  position: relative;
  z-index: 1;
}

.panel-header h3::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: #00d4ff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.8);
}

/* 存栏总数统计样式 */
.livestock-panel .echarts-container {
  display: flex;
  flex-direction: column;
  height: 250px;
  padding: 0 10px 10px 10px;
}

.total-display {
  text-align: center;
  /* margin-bottom: 1px; */
}

.total-number {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
}

.total-label {
  font-size: 12px;
  color: #cccccc;
  margin-top: 5px;
}

.livestock-chart {
  flex: 1;
  width: 100%;
  height: 230px;
}

/* 出售统计样式 */
.sales-panel .sales-chart {
  height: 280px;
  padding: 10px 0px 0px 0px;
}

.sales-panel .sales-chart .chart {
  width: 100%;
  height: 78%;
}

/* 活体抵押业务担保情况样式 */
.mortgage-panel .mortgage-table {
  /* padding: 0 15px 15px 15px; */
  height: 270px;
  overflow: hidden;
}

.mortgage-table .table-header {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.3fr 1.2fr;
  gap: 5px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
  margin-bottom: 8px;
}

.mortgage-table .header-cell {
  font-size: 14px;
  color: rgb(191, 237, 243);
  font-weight: bold;
  text-align: left;
  padding: 2px;
  display: flex;
  align-items: center;
}

.mortgage-table .header-cell.amount-header {
  justify-content: flex-end;
}

.mortgage-table .header-cell.period-header {
  justify-content: center;
}

.mortgage-table .table-body {
  height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 255, 0.3) transparent;
}

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

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

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

.mortgage-table .table-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.3fr 1.2fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}

.mortgage-table .table-row:hover {
  background-color: rgba(0, 255, 255, 0.1);
}

.mortgage-table .cell {
  font-size: 14px;
  color: #dbd9d9;
  text-align: left;
  padding: 2px;
  display: flex;
  align-items: center;
}

.mortgage-table .farm-name {
  text-align: left;
  font-weight: 500;
}

.mortgage-table .level {
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 9px;
  text-align: center;
  display: inline-block;
  min-width: 40px;
  align-self: center;
}

.mortgage-table .level-high {
  background: #0099cc;
  color: #ffffff;
}

.mortgage-table .level-medium {
  background: #00ccff;
  color: #ffffff;
}

.mortgage-table .level-low {
  background: #33ddff;
  color: #ffffff;
}

.mortgage-table .amount {
  color: white;
  font-weight: bold;
  justify-content: flex-end;
}

.mortgage-table .period {
  color: #cccccc;
  justify-content: center;
}

/* 牛只耳标佩戴统计样式 */
.ear-tag-panel .ear-tag-stats {
  display: flex;
  gap: 15px;
  height: 280px;
  padding: 8px 15px 15px 15px;
}

.flip-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 100px;
  padding-top: 20px;
}

.flip-card {
  background-color: transparent;
  width: 100px;
  height: 90px;
  perspective: 1000px;
}

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

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

.flip-card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: rgba(0, 255, 255, 0.15);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
}

.card-number {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
  margin-bottom: 8px;
}

.card-label {
  font-size: 12px;
  color: #cccccc;
  text-align: center;
  line-height: 1.2;
}

.chart-container {
  flex: 1;
  min-height: 200px;
}

.ear-tag-chart {
  width: 100%;
  height:93%;
}

/* 防疫统计样式 */
.epidemic-panel .epidemic-content {
  height: 200px;
  padding: 0 15px 15px 15px;
}

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

/* 牛只参保统计样式 */
.cattle-insurance-panel .insurance-stats {
  display: flex;
  align-items: center;
  height: 220px;
  padding: 10px 15px 15px 15px;
}

.insurance-circle {
  position: relative;
  width: 120px;
  height: 120px;
  margin-right: 20px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 15px;
}

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

.insurance-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}

.insurance-number {
  font-size: 16px;
  font-weight: bold;
  color: #00ffff;
  margin-bottom: 4px;
}

.insurance-label {
  font-size: 10px;
  color: #cccccc;
  line-height: 1.2;
}

.insurance-companies {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.company-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.company-bar {
  width: 80px;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-right: 10px;
  overflow: hidden;
}

.company-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.company-name {
  font-size: 10px;
  color: #ffffff;
  flex: 1;
  line-height: 1.2;
}
</style>