<template>
  <el-container style="height: 90vh; border: 1px solid #eee; padding: 20px;">
    <el-main style="height: calc(100% - 20px); display: flex; flex-wrap: wrap;">
      <el-col :span="12" style="position: relative; margin-bottom: 20px;">
        <div style="position: absolute; top: 10px; left: 10px; z-index: 10;">
          <el-button type="primary" size="small" @click="toggleEnergyChartType">切换能耗图表类型</el-button>
        </div>
        <el-card style="height: 100%;">
          <div id="energyChart" style="width: 100%; height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12" style="position: relative; margin-bottom: 20px;">
        <div style="position: absolute; top: 10px; left: 10px; z-index: 10;">
          <el-button type="primary" size="small" @click="toggleCarbonChartType">切换碳排图表类型</el-button>
        </div>
        <el-card style="height: 100%;">
          <div id="carbonChart" style="width: 100%; height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12" style="position: relative; margin-bottom: 20px;">
        <div style="position: absolute; top: 10px; left: 10px; z-index: 10;">
          <el-button type="primary" size="small" @click="toggleProductChartType">切换产品单耗图表类型</el-button>
        </div>
        <el-card style="height: 100%;">
          <div id="productChart" style="width: 100%; height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12" style="margin-bottom: 20px;">
        <el-card style="height: 100%;">
          <el-table :data="tableData" style="width: 100%;" :default-sort="{prop: 'name', order: 'ascending'}">
            <el-table-column prop="name" label="企业名称" width="180" sortable></el-table-column>
            <el-table-column prop="energy" label="能耗总量 (吨)" width="180" sortable></el-table-column>
            <el-table-column prop="carbon" label="碳排总量 (吨)" width="180" sortable></el-table-column>
            <el-table-column prop="product" label="产品单耗 (吨/件)" width="180" sortable></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-main>
  </el-container>
</template>



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

const energyChart = ref(null);
const carbonChart = ref(null);
const productChart = ref(null);
const energyChartType = ref('bar');
const carbonChartType = ref('bar');
const productChartType = ref('bar');

const tableData = ref([
  { name: '奇趣科技有限公司', energy: 120, carbon: 100, product: 0.5 },
  { name: '神秘生物研究所', energy: 132, carbon: 110, product: 0.6 },
  { name: '幽灵电子厂', energy: 101, carbon: 90, product: 0.4 },
  { name: '隐形材料公司', energy: 134, carbon: 120, product: 0.7 },
  { name: '幻影能源集团', energy: 90, carbon: 80, product: 0.3 },
  { name: '超时空科技', energy: 230, carbon: 200, product: 0.8 },
  { name: '未来创新实验室', energy: 210, carbon: 190, product: 0.6 },
  { name: '暗物质研究室', energy: 200, carbon: 180, product: 0.5 },
  { name: '量子计算中心', energy: 190, carbon: 170, product: 0.4 },
  { name: '虚拟现实工作室', energy: 180, carbon: 160, product: 0.3 }
]);

const initEnergyChart = () => {
  energyChart.value = echarts.init(document.getElementById('energyChart'));
  updateEnergyChart();
};

const initCarbonChart = () => {
  carbonChart.value = echarts.init(document.getElementById('carbonChart'));
  updateCarbonChart();
};

const initProductChart = () => {
  productChart.value = echarts.init(document.getElementById('productChart'));
  updateProductChart();
};

const updateEnergyChart = () => {
  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.name),
        axisLabel: {
          interval: 0,
          rotate: 45
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '能耗总量 (吨)',
        min: 0,
        max: 300,
        interval: 50,
        axisLabel: {
          formatter: '{value} 吨'
        }
      }
    ],
    series: [
      {
        name: '能耗总量',
        type: energyChartType.value,
        data: tableData.value.map(item => item.energy),
        areaStyle: {}
      }
    ]
  };

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

  energyChart.value.setOption(option);
};

const updateCarbonChart = () => {
  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.name),
        axisLabel: {
          interval: 0,
          rotate: 45
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '碳排总量 (吨)',
        min: 0,
        max: 300,
        interval: 50,
        axisLabel: {
          formatter: '{value} 吨'
        }
      }
    ],
    series: [
      {
        name: '碳排总量',
        type: carbonChartType.value,
        data: tableData.value.map(item => item.carbon),
        areaStyle: {}
      }
    ]
  };

  if (carbonChartType.value === 'pie') {
    option.series = [
      {
        name: '碳排总量',
        type: 'pie',
        radius: '50%',
        data: tableData.value.map(item => ({ value: item.carbon, name: item.name })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ];
  }

  carbonChart.value.setOption(option);
};

const updateProductChart = () => {
  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.name),
        axisLabel: {
          interval: 0,
          rotate: 45
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '产品单耗 (吨/件)',
        min: 0,
        max: 1,
        interval: 0.1,
        axisLabel: {
          formatter: '{value} 吨/件'
        }
      }
    ],
    series: [
      {
        name: '产品单耗',
        type: productChartType.value,
        data: tableData.value.map(item => item.product),
        areaStyle: {}
      }
    ]
  };

  if (productChartType.value === 'pie') {
    option.series = [
      {
        name: '产品单耗',
        type: 'pie',
        radius: '50%',
        data: tableData.value.map(item => ({ value: item.product, name: item.name })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ];
  }

  productChart.value.setOption(option);
};

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

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

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

onMounted(() => {
  // 确保 DOM 元素已经渲染完毕
  nextTick(() => {
    initEnergyChart();
    initCarbonChart();
    initProductChart();
  });
});

onBeforeUnmount(() => {
  if (energyChart.value) {
    energyChart.value.dispose();
  }
  if (carbonChart.value) {
    carbonChart.value.dispose();
  }
  if (productChart.value) {
    productChart.value.dispose();
  }
});
</script>


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

.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>
