import React, {useEffect, 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";

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

const rightPage = ({onPieClick}) => {

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

  const {middle_box, bottom_box, title_box} = style;


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

  return <Flex direction={"column"} className={style.container}>
    <div className={style.top_box}>
      <div className={style.title_box}>
        <img style={{left: 10, height: '56px', position: 'absolute'}}
             src={require('@/assets/titleBorder3.png')}/>
        <span style={{position: "absolute", left: '4vh', top: 12, fontSize: '18px'}}>学院违章排行</span>
        <div onClick={() => setDataBoxVisible(!dataBoxVisible)} className={style.time_box}>{copyDate.format("YYYY-MM")}
        </div>
      </div>
      <div style={{height: 300}}><BarChart requestDate={copyDate} onClick={onPieClick}/></div>
    </div>
    <div className={middle_box}>
      <div className={title_box}>
        <img style={{left: 20, width: '178px', height: '56px', position: 'absolute'}}
             src={require('@/assets/titleBorder4.png')}/>
        <span style={{position: "absolute", left: '4.5vh', top: 14, fontSize: '18px'}}>车辆违规统计</span>
      </div>
      <div style={{height: 300}}><ColumnChart onClick={(args) => onPieClick(args)}/></div>
    </div>
    <div className={bottom_box} style={{height: 300}}><PieChart onClick={(args) => onPieClick(args)}/></div>
    {
      dataBoxVisible && <div className={style.dataBox}>
        <div className={style.data_title}>
            <span style={{fontSize: 26, cursor: 'pointer'}}
                  onClick={() => setDate(dateNum.add(-1, 'year'))}>&laquo;</span>
          <span style={{lineHeight: 2.5}}>{dateNum.format('YYYY')}</span>
          <span style={{fontSize: 26, cursor: 'pointer'}}
                onClick={() => setDate(dateNum.add(1, 'year'))}>&raquo;</span>
        </div>
        <div className={style.data_body}>
          {
            monthList.map(it => {
              return <div className={style.data_box} onClick={(e) => {
                setDataBoxVisible(false)
                setCopyDate(dayjs(dateNum.format("YYYY-") + it.value + "-01"));
              }} key={it.value}>{it.name}</div>
            })
          }
        </div>
      </div>
    }
  </Flex>
}

export default rightPage
