import React, { useEffect, useRef } from "react";

import * as echarts from "echarts/core";
import { TitleComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";

import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";

import {
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import {
  DataResTabListTabCutType,
  DataResTabListType,
  DataResType,
  colorRes,
  echResData,
  echResMax,
} from "./data";

echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
  LineChart,
  UniversalTransition,
  TitleComponent,
  PieChart,
  LabelLayout,
]);

type Props = {
  type: DataResTabListTabCutType;
  info: DataResTabListType;
  hidden: boolean;
};

const optionObjFu = (type: DataResTabListTabCutType, arr: DataResType[]) => {
  const arr1 = arr.map((v) => v.index);
  const arr2 = arr.map((v) => v.value);

  const objTemp = {
    colorRes,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "0%",
      right: "0%",
      bottom: "0%",
      top: "5%",
      containLabel: true,
    },
  };

  if (type === "柱状图") {
    return {
      ...objTemp,
      xAxis: {
        type: "category",
        data: arr1,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: arr2.map((v, i) => ({
            value: v,
            itemStyle: { color: colorRes[i] },
          })),
          type: "bar",
          barWidth: "40",
        },
      ],
    };
  } else if (type === "折线图") {
    return {
      ...objTemp,
      xAxis: {
        type: "category",
        data: arr1,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: arr2,
          type: "line",
        },
      ],
    };
  } else {
    // 饼图
    return {
      ...objTemp,
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          label: {
            show: false,
            position: "center",
          },
          type: "pie",
          data: arr1.map((v, i) => ({
            value: arr2[i],
            name: v,
          })),
        },
      ],
    };
  }
};

function EchBox({ type, info, hidden }: Props) {
  const oldDataFlagId = useRef(0);

  useEffect(() => {
    // 防止多次渲染
    if (oldDataFlagId.current === info.id) return;

    oldDataFlagId.current = info.id;

    const lodArr = info.optionsCount || [];

    const flag = info.type === "排序";

    // 获取总数
    const max = echResMax(lodArr, flag);

    const arr: DataResType[] = echResData(lodArr, flag, max);
    // console.log("11111111111", arr);

    const dom = EchBox1.current;
    if (dom) {
      const myChart = echarts.getInstanceByDom(dom) || echarts.init(dom);
      const option = optionObjFu(type, arr);
      option && myChart.setOption(option);
    }
  }, [info, type]);

  const EchBox1 = useRef<HTMLDivElement>(null);

  return (
    <div
      hidden={hidden}
      className="EchBox1"
      ref={EchBox1}
      style={{ width: "600px", height: "300px" }}
    >
      {/* 右侧的数据 */}
      <div className="EchBox2"></div>
    </div>
  );
}

const MemoEchBox = React.memo(EchBox);

export default MemoEchBox;
