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

class BarLineChart 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: "axis",
        textStyle: {
          fontSize: 25, // 设置字体大小
          fontWeight: "bold", // 可选：加粗
          // color: "#fff", // 可选：字体颜色
        },
        // formatter: (params) => {
        //     console.log(params, 'params')
        //   return `${params[0].name} <br/>${params.value[2]}`;
        // },
        // axisPointer: {
        //   type: "cross",
        //   crossStyle: {
        //     type: "dashed",
        //     color: "#fff",
        //     width: 0.3,
        //   },
        // },
      },
      toolbox: {
        feature: {
          //   dataView: { show: true, readOnly: false },
          //   magicType: { show: true, type: ["line", "bar"] },
          //   restore: { show: true },
          //   saveAsImage: { show: true },
        },
      },
      legend: {
        // data: ["总订单数", "总订单金额($)"],
        data: [
          {
            name: "总订单数",
          },
          {
            name: "总订单金额($)",
            // 单独改 legend 圆点颜色
            itemStyle: {
              color: "rgba(41, 241, 250, 1)",
            },
          },
        ],
        bottom: 0,
        textStyle: { color: "#fff", fontSize: "12px" },
      },
      grid: {
        left: "4%",
        right: "4%",
        bottom: "12%",
        top: "10%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: this.props.xAxisdata,
          axisPointer: {
            type: "shadow",
          },
          axisLabel: {
            show: true,
            fontWeight: "bold",
            fontSize: 12,
            color: "#FFFFFF",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "总订单数",
          //   min: 0,
          //   max: 250,
          //   interval: 50,
          nameTextStyle: {
            fontWeight: "bold",
            fontSize: 12,
            color: "#FFFFFF",
          },
          axisLabel: {
            formatter: "{value}",
            fontWeight: "bold",
            fontSize: 12,
            color: "#FFFFFF",
          },
          splitLine: {
            // y 轴竖直方向虚线
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#ccc",
              width: 0.3,
            },
          },
        },
        {
          type: "value",
          name: "总订单金额($)",
          //   min: 0,
          //   max: 25,
          //   interval: 5,
          nameTextStyle: {
            fontWeight: "bold",
            fontSize: 12,
            color: "#FFFFFF",
          },
          axisLabel: {
            formatter: "{value}",
            fontWeight: "bold",
            fontSize: 12,
            color: "#FFFFFF",
          },
          splitLine: {
            // y 轴竖直方向虚线
            show: false,
            lineStyle: {
              type: "dashed",
              color: "#ccc",
              width: 0.3,
            },
          },
        },
      ],
      series: [
        {
          name: "总订单数",
          type: "bar",
          tooltip: {
            valueFormatter: function(value) {
              return value;
            },
          },
          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)" }, // 底部透明
              ]
            ),
          },
          data: this.props.orderData,
        },

        {
          name: "总订单金额($)",
          type: "line",
          smooth: true, // ✅ 曲线
          symbol: "none",
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function(value) {
              return value;
            },
          },
          lineStyle: {
            color: "rgba(41, 241, 250, 1)",
            width: 4,
          },
          data: this.props.amountData
        },
        {
          type: "pictorialBar",
          symbol: `image://${topIcon}`, // 图片 URL
          symbolSize: [30, 30], // 图片大小
          symbolPosition: "end", // 关键：自动到柱子最高点
          symbolOffset: [0, -15], // 向上偏移，让图片在柱子顶部
          tooltip: { show: false }, // ✅ 不显示 tooltip
          data: this.props.orderData.map((item) => (item == 0 ? null : item)),
          z: 4,
        },
      ],
    };
    this.chartInstance.setOption(option);
  }

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

export default BarLineChart;
