import React from 'react'
import { Icon } from 'antd'
import { MonthStatistic, DeviceMonitor, TopConsume, ChartConsum, Divider } from './components'
import './index.less'

const Overview = (props) => {
  const { visible, setVisible } = props
  return (
    <div className={`overview ${visible ? 'visible' : ''}`}>
      <div className='overview__content'>
        <MonthStatistic />
        <Divider title='器具监测' />
        <DeviceMonitor />
        <Divider title='用能消耗排名' />
        <TopConsume />
        <Divider title='设备耗能监测' />
        <ChartConsum />
      </div>
      <div onClick={() => setVisible(!visible)} className='overview__expand'>
        <Icon type={visible ? 'right' : 'left'} className='overview__expand-icon' />
      </div>
    </div>
  )
}

export default Overview