<template>
  <div class="eco-container">
    <h1>生态指标</h1>
    <div v-if="loading" class="loading-indicator">数据加载中...</div>
    <div v-if="error" class="error-message">数据加载失败，请稍后重试。</div>
    <div v-if="!loading && !error" class="eco-content">
      <!-- 环保数据展示 -->
      <div class="environment-section">
        <h3>环保数据</h3>
        <div class="eco-grid">
          <div class="eco-card" v-for="(item, index) in ecoData" :key="index">
            <div class="eco-icon">{{ item.icon }}</div>
            <div class="eco-info">
              <div class="eco-title">{{ item.title }}</div>
              <div class="eco-value">{{ item.value }}</div>
              <div class="eco-change" :class="item.change > 0 ? 'positive' : 'negative'">
                {{ item.change > 0 ? '↑' : '↓' }} {{ Math.abs(item.change) }}%
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 可持续发展指标 -->
      <div class="sustainability-section">
        <h3>可持续发展指标</h3>
        <div class="sustainability-content">
          <div class="balance-chart">
            <h4>草畜平衡</h4>
            <div ref="balanceChart" class="chart-placeholder" style="width: 100%; height: 300px;"></div>
          </div>
          <div class="benefit-chart">
            <h4>生态效益</h4>
            <div ref="benefitChart" class="chart-placeholder" style="width: 100%; height: 300px;"></div>
          </div>
        </div>
      </div>
      
      <!-- 环保趋势分析 -->
      <div class="trend-section">
        <h3>环保趋势分析</h3>
        <div class="chart-container">
          <div ref="trendChart" class="chart-placeholder" style="width: 100%; height: 300px;"></div>
        </div>
      </div>
      
      <!-- 生态效益评估 -->
      <div class="assessment-section">
        <h3>生态效益评估</h3>
        <div class="assessment-content">
          <div class="economic-benefit">
            <h4>经济效益</h4>
            <div class="benefit-value">¥28.6亿</div>
            <div class="benefit-desc">年度总产值</div>
          </div>
          <div class="ecological-benefit">
            <h4>生态效益</h4>
            <div class="benefit-value">+12.3%</div>
            <div class="benefit-desc">生态改善率</div>
          </div>
          <div class="balance-indicator">
            <h4>效益平衡</h4>
            <div class="balance-chart-container">
              <div ref="balanceIndicator" class="chart-placeholder" style="width: 100%; height: 200px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'Eco',
  setup() {
    const ecoData = ref([]);
    const loading = ref(true);
    const error = ref(false);
    const balanceChart = ref(null);
    const benefitChart = ref(null);
    const trendChart = ref(null);
    const balanceIndicator = ref(null);
    
    let balanceChartInstance = null;
    let benefitChartInstance = null;
    let trendChartInstance = null;
    let indicatorInstance = null;
    
    // 环保数据
    ecoData.value = [
      { icon: '🌱', title: '碳排放', value: '12,500吨', change: -5.2 },
      { icon: '💧', title: '水资源使用', value: '850,000吨', change: -3.1 },
      { icon: '🌾', title: '饲料消耗', value: '2,300吨', change: -2.8 },
      { icon: '🏞️', title: '草地覆盖率', value: '86.5%', change: 1.2 }
    ];

    // 初始化草畜平衡图表
    const initBalanceChart = () => {
      if (balanceChart.value) {
        balanceChartInstance = echarts.init(balanceChart.value);
        balanceChartInstance.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '0'
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'],
              data: [
                { value: 65, name: '草场承载力' },
                { value: 35, name: '牲畜需求量' }
              ],
              itemStyle: {
                color: function(params) {
                  const colorList = ['#4CAF50', '#2196F3'];
                  return colorList[params.dataIndex];
                }
              }
            }
          ]
        });
      }
    };
    
    // 初始化生态效益图表
    const initBenefitChart = () => {
      if (benefitChart.value) {
        benefitChartInstance = echarts.init(benefitChart.value);
        benefitChartInstance.setOption({
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: ['2018', '2019', '2020', '2021', '2022', '2023']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [65, 70, 75, 78, 82, 86],
              type: 'bar',
              itemStyle: { color: '#4CAF50' }
            }
          ]
        });
      }
    };
    
    // 初始化趋势分析图表
    const initTrendChart = () => {
      if (trendChart.value) {
        trendChartInstance = echarts.init(trendChart.value);
        trendChartInstance.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['碳排放', '水资源使用', '饲料消耗']
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '碳排放',
              type: 'line',
              data: [2200, 2100, 2000, 1950, 1850, 1750],
              itemStyle: { color: '#f44336' }
            },
            {
              name: '水资源使用',
              type: 'line',
              data: [150000, 145000, 140000, 135000, 130000, 125000],
              itemStyle: { color: '#2196F3' }
            },
            {
              name: '饲料消耗',
              type: 'line',
              data: [4200, 4100, 4000, 3900, 3800, 3700],
              itemStyle: { color: '#FF9800' }
            }
          ]
        });
      }
    };
    
    // 初始化效益平衡指示器
    const initBalanceIndicator = () => {
      if (balanceIndicator.value) {
        indicatorInstance = echarts.init(balanceIndicator.value);
        indicatorInstance.setOption({
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              type: 'gauge',
              progress: {
                show: true
              },
              axisLine: {
                lineStyle: {
                  color: [
                    [0.3, '#f44336'],
                    [0.7, '#FF9800'],
                    [1, '#4CAF50']
                  ],
                  width: 15
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}',
                color: 'auto'
              },
              data: [
                {
                  value: 85,
                  name: '生态效益指数'
                }
              ]
            }
          ]
        });
      }
    };

    // 窗口大小改变时重绘图表
    const resizeCharts = () => {
      if (balanceChartInstance) balanceChartInstance.resize();
      if (benefitChartInstance) benefitChartInstance.resize();
      if (trendChartInstance) trendChartInstance.resize();
      if (indicatorInstance) indicatorInstance.resize();
    };

    onMounted(() => {
      loading.value = false;
      initBalanceChart();
      initBenefitChart();
      initTrendChart();
      initBalanceIndicator();
      window.addEventListener('resize', resizeCharts);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeCharts);
      if (balanceChartInstance) balanceChartInstance.dispose();
      if (benefitChartInstance) benefitChartInstance.dispose();
      if (trendChartInstance) trendChartInstance.dispose();
      if (indicatorInstance) indicatorInstance.dispose();
    });

    return {
      ecoData,
      loading,
      error,
      balanceChart,
      benefitChart,
      trendChart,
      balanceIndicator
    };
  }
};
</script>

<style scoped>
.eco-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

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

.environment-section,
.sustainability-section,
.trend-section,
.assessment-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.environment-section h3,
.sustainability-section h3,
.trend-section h3,
.assessment-section h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

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

.eco-card {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.eco-icon {
  font-size: 24px;
  margin-right: 15px;
}

.eco-info {
  flex: 1;
}

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

.eco-value {
  font-size: 20px;
  font-weight: bold;
  color: #4CAF50;
  margin-bottom: 5px;
}

.eco-change {
  font-size: 12px;
}

.eco-change.positive {
  color: #4CAF50;
}

.eco-change.negative {
  color: #f44336;
}

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

.balance-chart h4,
.benefit-chart h4 {
  margin-top: 0;
  color: #333;
}

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

.economic-benefit,
.ecological-benefit,
.balance-indicator {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.economic-benefit h4,
.ecological-benefit h4,
.balance-indicator h4 {
  margin-top: 0;
  color: #333;
}

.benefit-value {
  font-size: 24px;
  font-weight: bold;
  color: #4CAF50;
  margin: 10px 0;
}

.benefit-desc {
  font-size: 14px;
  color: #666;
}

.loading-indicator,
.error-message {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: #666;
}

.error-message {
  color: #ff4d4f;
}

@media (max-width: 768px) {
  .eco-container {
    padding: 10px;
  }
  
  .eco-grid,
  .sustainability-content,
  .assessment-content {
    grid-template-columns: 1fr;
  }
}
</style>