import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import SwitchButton from "../Component/SwitchButton";
import ScrollBoard from "./../../Component/ScrollBoard";
import { useState } from "react";
import getOptions from "./LineChart/chart.config";
function RightDown() {
  // 假数据
  let tempData = [
    {
      type: "day",
      data: {
        time: [
          "0:00",
          "1:00",
          "2:00",
          "3:00",
          "4:00",
          "5:00",
          "6:00",
          "7:00",
          "8:00",
          "9:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00",
        ],
        input: [
          456, 425, 246, 424, 453, 466, 412, 434, 425, 418, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0,
        ],
        output: [
          432, 401, 232, 398, 421, 439, 378, 411, 400, 394, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0,
        ],
      },
    },
    {
      type: "week",
      data: {
        time: [
          "2024/8/22",
          "2024/8/23",
          "2024/8/24",
          "2024/8/25",
          "2024/8/26",
          "2024/8/27",
          "2024/8/28",
        ],
        input: [9753, 10357, 11246, 10123, 9872, 9985, 10352],
        output: [7925, 8216, 9091, 7847, 7589, 8126, 8112],
      },
    },
    {
      type: "month",
      data: {
        time: [
          "2024/8/1",
          "2024/8/2",
          "2024/8/3",
          "2024/8/4",
          "2024/8/5",
          "2024/8/6",
          "2024/8/7",
          "2024/8/8",
          "2024/8/9",
          "2024/8/10",
          "2024/8/11",
          "2024/8/12",
          "2024/8/13",
          "2024/8/14",
          "2024/8/15",
          "2024/8/16",
          "2024/8/17",
          "2024/8/18",
          "2024/8/19",
          "2024/8/20",
          "2024/8/21",
          "2024/8/22",
          "2024/8/23",
          "2024/8/24",
          "2024/8/25",
          "2024/8/26",
          "2024/8/27",
          "2024/8/28",
          "2024/8/29",
          "2024/8/30",
          "2024/8/31",
        ],
        input: [
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9813, 9753,
          10357, 11246, 10123, 9872, 9985, 10352, 4235, 0, 0, 0,
        ],
        output: [
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7883, 7925,
          8216, 9091, 7847, 7589, 8126, 8112, 3962, 0, 0, 0,
        ],
      },
    },
  ];
  const nameList = [
    { name: "表单", ename: "table" },
    { name: "折线", ename: "chart" },
  ];
  const [activeName, setActiveName] = useState<string>(nameList[0].ename);
  const handleButtonChange = (activeName: string) => {
    setActiveName(activeName);
  };
  const config = {
    header: ["时间", "投入数量", "产出数量"],
    headerHeight: 30,
    rowNum: 5,
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
    columnWidth: [120, 130, 130],
    data: [
      ["行1列1", "行1列2", "行1列3"],
      ["行2列1", "行2列2", "行2列3"],
      ["行3列1", "行3列2", "行3列3"],
      ["行4列1", "行4列2", "行4列3"],
      ["行5列1", "行5列2", "行5列3"],
      ["行6列1", "行6列2", "行6列3"],
      ["行7列1", "行7列2", "行7列3"],
      ["行8列1", "行8列2", "行8列3"],
      ["行9列1", "行9列2", "行9列3"],
      ["行10列1", "行10列2", "行10列3"],
    ],
  };
  const config1 = {
    header: ["时间", "投入数量", "产出数量"],
    headerHeight: 30,
    rowNum: 5,
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
    columnWidth: [120, 130, 130],
    data: [],
  };
  const config2 = {
    header: ["时间", "投入数量", "产出数量"],
    headerHeight: 30,
    rowNum: 5,
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
    columnWidth: [120, 130, 130],
    data: [],
  };
  const config3 = {
    header: ["时间", "投入数量", "产出数量"],
    headerHeight: 30,
    rowNum: 5,
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
    columnWidth: [120, 130, 130],
    data: [],
  };
  let data1Lenght = tempData[0].data.input.length;
  for (let i = 0; i < data1Lenght; i++) {
    (config1.data as any).push([
      tempData[0].data.time ? tempData[0].data.time[i] : "-",
      tempData[0].data.input ? tempData[0].data.input[i] : "-",
      tempData[0].data.output ? tempData[0].data.output[i] : "-",
    ]);
  }
  let data2Lenght = tempData[1].data.input.length;
  for (let i = 0; i < data2Lenght; i++) {
    (config2.data as any).push([
      tempData[1].data.time ? tempData[1].data.time[i] : "-",
      tempData[1].data.input ? tempData[1].data.input[i] : "-",
      tempData[1].data.output ? tempData[1].data.output[i] : "-",
    ]);
  }
  let data3Lenght = tempData[0].data.input.length;
  for (let i = 0; i < data3Lenght; i++) {
    (config3.data as any).push([
      tempData[2].data.time ? tempData[2].data.time[i] : "-",
      tempData[2].data.input ? tempData[2].data.input[i] : "-",
      tempData[2].data.output ? tempData[2].data.output[i] : "-",
    ]);
  }

  const chartData1 = tempData[0].data;
  const chartData2 = tempData[1].data;
  const chartData3 = tempData[2].data;
  const options1 = getOptions(chartData1);
  const options2 = getOptions(chartData2);
  const options3 = getOptions(chartData3);
  return (
    <div className="right_down">
      <TitleBox title={"right_down"} />
      <div className="left_up_switch">
        <SwitchButton nameList={nameList} onChange={handleButtonChange} />
      </div>
      <div style={{ padding: "10px", height: "628px" }}>
        <div className="left_down_title flex-row">
          <div className="left_down_box1 flex-col" />
          <span className="left_down_text">当天</span>
          <div className="left_down_box2 flex-col" />
        </div>
        <div className="right_down_content">
          {activeName === "table" ? (
            <ScrollBoard
              config={config1}
              style={{ width: "380px", height: "180px" }}
            />
          ) : options1 ? (
            <ReactECharts option={options1} style={{ height: "100%" }} />
          ) : (
            <p
              style={{
                color: "#cccf",
                fontSize: "24px",
                userSelect: "none",
                textAlign: "center",
                paddingTop: "72px",
              }}
            >
              暂无数据
            </p>
          )}
        </div>
        <div className="left_down_title flex-row">
          <div className="left_down_box1 flex-col" />
          <span className="left_down_text">本周</span>
          <div className="left_down_box2 flex-col" />
        </div>
        <div className="right_down_content">
          {activeName === "table" ? (
            <ScrollBoard
              config={config2}
              style={{ width: "380px", height: "180px" }}
            />
          ) : options2 ? (
            <ReactECharts option={options2} style={{ height: "100%" }} />
          ) : (
            <p
              style={{
                color: "#cccf",
                fontSize: "24px",
                userSelect: "none",
                textAlign: "center",
                paddingTop: "72px",
              }}
            >
              暂无数据
            </p>
          )}
        </div>
        <div className="left_down_title flex-row">
          <div className="left_down_box1 flex-col" />
          <span className="left_down_text">本月</span>
          <div className="left_down_box2 flex-col" />
        </div>
        <div className="right_down_content">
          {activeName === "table" ? (
            <ScrollBoard
              config={config3}
              style={{ width: "380px", height: "180px" }}
            />
          ) : options3 ? (
            <ReactECharts option={options3} style={{ height: "100%" }} />
          ) : (
            <p
              style={{
                color: "#cccf",
                fontSize: "24px",
                userSelect: "none",
                textAlign: "center",
                paddingTop: "72px",
              }}
            >
              暂无数据
            </p>
          )}
        </div>
      </div>
    </div>
  );
}
export default RightDown;