import React, {useState} from "react";
import style from './index.less'
import BarChart from './BarChart'
import ColumnChart from './ColumnChart'
import PieChart from './PieChart'
import dayjs from "dayjs";
import Flex from "@/components/Flex";
import TitleView from "@/components/TitleView";

const monthList = [];
for (let i = 1; i < 13; i++) {
  monthList.push({
    name: i + '月',
    value: i
  })
}

const rightPage = ({onPieClick}) => {

  const [copyDate, setCopyDate] = useState(dayjs());
  const [dataBoxVisible, setDataBoxVisible] = useState(false);

  ///////////////////////////////////////// 页面渲染

  return <Flex direction={"column"} className={style.container}>

    <Flex className={style.top_box} direction={"column"} itemGrow={1}>

      <TitleView
        title={'学院违章排行'} bgUrl={"./imgs/titleBorder3.png"} bgStyle={{width: 187, height: 53}}
        extra={
          <Flex
            className={style.time_box}
            onClick={() => setDataBoxVisible(!dataBoxVisible)}
          >{copyDate.format("YYYY-MM")}
          </Flex>
        }
      />

      <BarChart requestDate={copyDate} onClick={onPieClick}/>

    </Flex>


    <Flex direction={"column"} className={style.middle_box} itemGrow={1}>
      <TitleView
        title={'车辆违规统计'} bgUrl={'./imgs/titleBorder4.png'} bgStyle={{width: 187, height: 53}}
      />
      <Flex itemGrow={1} style={{height: 0}}>
        <ColumnChart onClick={(args) => onPieClick(args)}/>
      </Flex>
    </Flex>

    <Flex itemGrow={1} style={{height: 0}}>
      <PieChart onClick={(args) => onPieClick(args)}/>
    </Flex>

  </Flex>
};

export default rightPage
