<template>
  <el-container style="height: 90vh; border: 1px solid #eee; padding: 20px;">
    <el-header style="text-align: right; margin-bottom: 20px;">
      <el-button type="primary" @click="toggleChartType">切换图表类型</el-button>
    </el-header>
    <el-main style="height: calc(100% - 60px);">
      <el-tabs v-model="activeTab" type="card" style="height: 100%;">
        <el-tab-pane label="碳排放趋势分析" name="trend-analysis">
          <h1>碳排放趋势分析</h1>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card style="height: 100%;">
                <div id="chart" style="width: 100%; height: 400px;"></div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card style="height: 100%;">
                <h2>详细数据</h2>
                <el-table :data="tableData" style="width: 100%;">
                  <el-table-column prop="year" label="年份" width="180"></el-table-column>
                  <el-table-column prop="emission" label="碳排放量" width="180"></el-table-column>
                  <el-table-column prop="energy" label="能源消耗" width="180"></el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="数据分析报告" name="report">
          <h1>数据分析报告</h1>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card style="height: 100%;">
                <h2>报告概要</h2>
                <p>本报告基于过去几年的碳排放和能源消耗数据，对碳排放趋势进行了详细分析，并提出了相应的建议。</p>
                <el-divider></el-divider>
                <h3>主要发现</h3>
                <ul>
                  <li>碳排放量在过去几年呈上升趋势。</li>
                  <li>能源消耗量与碳排放量呈正相关。</li>
                  <li>工业部门是碳排放的主要来源之一。</li>
                </ul>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card style="height: 100%;">
                <h2>详细分析</h2>
                <p>通过对数据的深入分析，我们发现以下几点：</p>
                <el-divider></el-divider>
                <h3>数据解读</h3>
                <ul>
                  <li>2015年至2021年，碳排放量逐年增加。</li>
                  <li>能源消耗量的增长是导致碳排放量增加的主要因素之一。</li>
                  <li>工业部门的碳排放量占总排放量的比重最大。</li>
                </ul>
                <el-divider></el-divider>
                <h3>行业分析</h3>
                <ul>
                  <li>制造业：碳排放量增长最快，需重点治理。</li>
                  <li>交通运输业：碳排放量稳定增长，需推广新能源汽车。</li>
                  <li>电力行业：碳排放量较高，需提高清洁能源比例。</li>
                </ul>
              </el-card>
            </el-col>
          </el-row>
          <el-button type="success" @click="downloadReport" style="margin-top: 20px;">下载报告</el-button>
        </el-tab-pane>
        <el-tab-pane label="预测与建议" name="predictions">
          <h1>预测与建议</h1>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card style="height: 100%;">
                <h2>未来碳排放预测</h2>
                <p>根据当前数据和模型，预计未来几年的碳排放量将有所下降。</p>
                <el-divider></el-divider>
                <h3>预测模型</h3>
                <p>我们使用了线性回归模型来预测未来的碳排放量。模型考虑了多种因素，包括经济发展、政策调控和技术进步。</p>
                <el-divider></el-divider>
                <h3>预测结果</h3>
                <ul>
                  <li>2022年：预计碳排放量为200万吨。</li>
                  <li>2023年：预计碳排放量为190万吨。</li>
                  <li>2024年：预计碳排放量为180万吨。</li>
                </ul>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card style="height: 100%;">
                <h2>减排建议</h2>
                <ul>
                  <li>提高能效，减少能源消耗。</li>
                  <li>推广可再生能源的使用。</li>
                  <li>加强碳捕捉和存储技术的应用。</li>
                  <li>鼓励企业采用低碳生产技术。</li>
                </ul>
                <el-divider></el-divider>
                <h3>实施步骤</h3>
                <ol>
                  <li>制定详细的能效提升计划，包括设备更新和技术改造。</li>
                  <li>投资可再生能源项目，如太阳能和风能发电站。</li>
                  <li>开展碳捕捉和存储技术研发，降低技术成本。</li>
                  <li>出台相关政策，鼓励企业采用低碳生产技术。</li>
                </ol>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';
import html2pdf from 'html2pdf.js';

const activeTab = ref('trend-analysis');
const chart = ref(null);
const chartType = ref('line');
const tableData = ref([
  { year: '2015', emission: 120, energy: 220 },
  { year: '2016', emission: 132, energy: 182 },
  { year: '2017', emission: 101, energy: 191 },
  { year: '2018', emission: 134, energy: 234 },
  { year: '2019', emission: 90, energy: 290 },
  { year: '2020', emission: 230, energy: 330 },
  { year: '2021', emission: 210, energy: 310 },
  { year: '2022', emission: 200, energy: 320 }, // 预测数据
  { year: '2023', emission: 190, energy: 310 }, // 预测数据
  { year: '2024', emission: 180, energy: 300 }  // 预测数据
]);

const initChart = () => {
  chart.value = echarts.init(document.getElementById('chart'));
  updateChart();
};

const updateChart = () => {
  const option = {
    title: {
      text: '碳排放趋势分析',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['碳排放量', '能源消耗'],
      bottom: '10px'
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: tableData.value.map(item => item.year),
        axisLabel: {
          interval: 0,
          rotate: 45
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数值',
        min: 0,
        max: 400,
        interval: 50,
        axisLabel: {
          formatter: '{value} '
        }
      }
    ],
    series: [
      {
        name: '碳排放量',
        type: chartType.value,
        data: tableData.value.map(item => item.emission),
        areaStyle: {}
      },
      {
        name: '能源消耗',
        type: chartType.value,
        data: tableData.value.map(item => item.energy),
        areaStyle: {}
      }
    ]
  };

  if (chartType.value === 'pie') {
    option.series = [
      {
        name: '碳排放量',
        type: 'pie',
        radius: '50%',
        data: tableData.value.map(item => ({ value: item.emission, name: item.year })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      {
        name: '能源消耗',
        type: 'pie',
        radius: '50%',
        data: tableData.value.map(item => ({ value: item.energy, name: item.year })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ];
  }

  chart.value.setOption(option);
};

const toggleChartType = () => {
  const types = ['line', 'bar', 'pie'];
  const currentIndex = types.indexOf(chartType.value);
  chartType.value = types[(currentIndex + 1) % types.length];
  updateChart();
};

const downloadReport = () => {
  const element = document.querySelector('.el-tab-pane[name="report"]');
  html2pdf().from(element).save('数据分析报告.pdf');
  ElMessage.success('报告已成功下载');
};

onMounted(() => {
  initChart();
});

onBeforeUnmount(() => {
  if (chart.value) {
    chart.value.dispose();
  }
});
</script>


<style scoped>
.el-main {
  padding: 20px;
  height: 100%;
  transition: background-color 0.3s ease;
}

.el-tabs__content {
  height: calc(100% - 40px);
}

.el-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.el-card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.el-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.el-table {
  width: 100%;
  transition: background-color 0.3s ease;
  border-radius: 10px;
  overflow: hidden;
}

.el-divider {
  margin: 20px 0;
  border-color: #e0e0e0;
}

h2, h3 {
  margin-top: 0;
  color: #333;
}

ul, ol {
  margin: 10px 0;
  padding-left: 20px;
  list-style-type: disc;
}

p {
  margin: 10px 0;
  line-height: 1.6;
  color: #666;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

h2 {
  font-size: 20px;
  margin-bottom: 15px;
}

h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
</style>
