import TitleBox from "../Component/TitleBox";
import SwitchButton from "../Component/SwitchButton";
import BarChart from "./BarChart";
import { useState } from "react";
function LeftDown() {
  const nameList = [{ name: "表单" }, { name: "柱状" }];
  const [activeName, setActiveName] = useState<string>(nameList[0].name);
  return (
    <div className="left_down">
      <TitleBox title={"left_down"} />
      <div className="left_up_switch">
        <SwitchButton
          nameList={nameList}
          activeName={activeName}
          setActiveName={setActiveName}
        />
      </div>
      <div style={{ padding: "10px", height: "555px" }}>
        <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="left_down_content">
          {activeName === "表单" ? "表单" : <BarChart />}
        </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="left_down_content">
          {activeName === "表单" ? "表单" : <BarChart />}
        </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="left_down_content">
          {activeName === "表单" ? "表单" : <BarChart />}
        </div>
      </div>
    </div>
  );
}
export default LeftDown;