<template>
  <div ref="chart" class="chart-container"></div>
</template>

<script>
import echarts from "echarts";
import { currentGET } from "api/modules";

export default {
  name: "MonthCarbonChart",
  data() {
    return {
      monthItems: [],
      monthCarbon: [],
      colors: ["#10B981", "#85E5C2", "#EAFAF5"]
    };
  },
  mounted() {
    this.getMonthData();
    window.addEventListener("resize", this.handleResize);

    // 监听事件总线的刷新事件
    this.$eventBus.$on('refresh-all-data', this.getMonthData);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);

    // 移除事件总线的刷新事件监听
    this.$eventBus.$off('refresh-all-data', this.getMonthData);

    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    getMonthData() {
      currentGET("big2").then((res) => {
        console.log("月度碳减排");
        this.monthItems = res.data;

        // 初始化12个月的数据为0
        this.monthCarbon = new Array(12).fill(0);

        this.monthItems.forEach((item) => {
          let month = parseInt(item.months.substring(5, 7));
          this.monthCarbon[month - 1] = item.monthCarbon;
        });

        console.log("碳减排：" + this.monthCarbon);
        this.initChart();
      });
    },
    initChart() {
      this.$nextTick(() => {
        if (!this.$refs.chart) return;

        const chart = echarts.init(this.$refs.chart);

        // 根据数据值生成渐变色
        const getColor = (value, maxValue) => {
          if (maxValue === 0) return this.colors[2];
          const ratio = value / maxValue;
          if (ratio > 0.66) return this.colors[0]; // 深色 #10B981
          if (ratio > 0.33) return this.colors[1]; // 中色 #85E5C2
          return this.colors[2]; // 浅色 #EAFAF5
        };

        const maxValue = Math.max(...this.monthCarbon);

        let option = {
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255, 255, 255, 0.9)",
            borderColor: "#10B981",
            borderWidth: 1,
            textStyle: { color: "#333333" },
            formatter: (params) => {
              return `${params[0].name}<br/>碳减排量：${params[0].value}吨`;
            },
          },
          grid: {
            left: "12%",
            right: "8%",
            top: "15%",
            bottom: "12%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            axisLine: {
              lineStyle: { color: "#d1d5db" }
            },
            axisLabel: {
              color: "#64748b",
              fontSize: 11,
              interval: 0, // 显示所有标签
              rotate: 0
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: "value",
            name: "吨",
            nameTextStyle: {
              color: "#64748b",
              fontSize: 12
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: "#64748b",
              fontSize: 11
            },
            splitLine: {
              lineStyle: {
                color: "#f1f5f9",
                type: 'dashed'
              }
            }
          },
          series: [
            {
              name: "碳减排量",
              type: "bar",
              data: this.monthCarbon.map(value => ({
                value: value,
                itemStyle: {
                  color: getColor(value, maxValue)
                }
              })),
              barWidth: "50%",
              barMaxWidth: 28,
              itemStyle: {
                borderRadius: [4, 4, 0, 0]
              },
              emphasis: {
                itemStyle: {
                  color: "#059669"
                }
              }
            }
          ]
        };

        chart.setOption(option);
        this.chart = chart;
        this.chart.resize();
      });
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 200px;
}
</style>
