import React from "react";
import styles from "../styles/bar_chart.less";
import * as echarts from "echarts";
import topIcon from "../../../../assets/bigscreen/bar-head.svg";

class BarChart extends React.Component {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
    this.chartInstance = null;
  }

  componentDidMount() {
    this.initChart();
    window.addEventListener("resize", this.chartResize);
  }

  componentDidUpdate(prevProps) {
    this.initChart();
  }

  componentWillUnmount() {
    if (this.chartInstance) {
      window.removeEventListener("resize", this.chartResize);
      this.chartInstance.dispose();
    }
  }

  chartResize() {
    if (this.chartInstance) {
      this.chartInstance.resize();
    }
  }

  initChart() {
    if (!this.chartInstance) {
      this.chartInstance = echarts.init(this.chartRef.current);
    }
    const option = {
      tooltip: {
        trigger: "item", // 鼠标悬浮触发方式：'item' 或 'axis'
        textStyle: {
          fontSize: 25, // 设置字体大小
          fontWeight: "bold", // 可选：加粗
          // color: "#fff", // 可选：字体颜色
        },
      },
      xAxis: {
        type: "category",
        data: this.props.xAxisdata,
        axisLabel: {
          show: true,
          fontWeight: "bold",
          fontSize: 12,
          color: "#FFFFFF",
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          show: true,
          fontWeight: "bold",
          fontSize: 12,
          color: "#FFFFFF",
        },
        splitLine: {
          // y 轴竖直方向虚线
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#ccc",
            width: 0.3,
          },
        },
      },
      grid: {
        left: "4%",
        right: "4%",
        bottom: "8%",
        top: "10%",
        containLabel: true,
      },
      series: [
        {
          data: this.props.seriesData,
          type: "bar",
          barWidth: 28,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, // 0,0到0,1表示从上到下
              [
                { offset: 0, color: "#125CB2" }, // 顶部颜色
                { offset: 1, color: "rgba(18,92,178,0)" }, // 底部透明
              ]
            ),
          },
        },
        {
          type: "pictorialBar",
          symbol: `image://${topIcon}`, // 图片 URL
          symbolSize: [30, 30], // 图片大小
          symbolPosition: "end", // 关键：自动到柱子最高点

          symbolOffset: [0, -15], // 向上偏移，让图片在柱子顶部
          data: this.props.seriesData.map((item) => (item == 0 ? null : item)),
          z: 4,
        },
        {
          name: "趋势",
          type: "line",
          data: this.props.seriesData.map(item => item == 0 ? 0 : item - 0.1),
          smooth: true, // ✅ 曲线
          sampling: "average",// 取平均，减少抖动
          symbol: "none",
          symbolSize: 8,
          lineStyle: {
            color: "rgba(41, 241, 250, 1)",
            width: 4,
          },
          itemStyle: {
            // color: "#E94E77",
          },
        },
      ],
    };
    this.chartInstance.setOption(option);
  }

  render() {
    return (
      <div style={{ width: "100%", height: "100%" }} ref={this.chartRef} />
    );
  }
}

export default BarChart;
