import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import SwitchButton from "../Component/SwitchButton";
import getOptions from "./SummaryBarChart/chart.config";
import { useState } from "react";
function LeftUp() {
  // 假数据
  const dataSource = {
    day: {
      xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"],
      yData1: [236, 214, 196, 239, 224],
      yData2: [346, 296, 327, 311, 322],
      yData3: [78, 85, 56, 106, 66],
      sumData: [660, 595, 579, 656, 612],
    },
    week: {
      xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"],
      yData1: [1336, 1223, 1313, 1134, 1119],
      yData2: [2146, 1996, 2053, 1857, 1798],
      yData3: [892, 658, 467, 758, 435],
      sumData: [4374, 3877, 3833, 3749, 3352],
    },
    month: {
      xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"],
      yData1: [5789, 6432, 4679, 5456, 5004],
      yData2: [8762, 9732, 8137, 8820, 9122],
      yData3: [2468, 3120, 2782, 2395, 1924],
      sumData: [17019, 19284, 15598, 16671, 16050],
    },
  };
  const nameList = [
    { name: "天", ename: "day" },
    { name: "周", ename: "week" },
    { name: "月", ename: "month" },
  ];
  const [activeName, setActiveName] = useState<string>(nameList[0].ename);
  let chartData = (dataSource as { [key: string]: any })[activeName];
  const handleButtonChange = (activeName: string) => {
    setActiveName(activeName);
  };
  const options = getOptions(chartData);
  return (
    <div className="left_up">
      <TitleBox title={"left_up"} />
      <div className="left_up_switch">
        <SwitchButton nameList={nameList} onChange={handleButtonChange} />
      </div>
      {options && (
        <div className="left_up_chart">
          {<ReactECharts option={options} style={{ height: "100%" }} />}
        </div>
      )}
      {!options && (
        <p
          style={{
            color: "#cccf",
            fontSize: "24px",
            userSelect: "none",
            textAlign: "center",
            paddingTop: "72px",
          }}
        >
          暂无数据
        </p>
      )}
    </div>
  );
}
export default LeftUp;