import React, { useState } from 'react'
import HMIBoard from '../components/HMIBoard'
import ChartBoard from '../components/ChartBoard'
import RankBoard from '../components/RankBoard'
import EmptyPage from '../components/EmptyPage'
import classNames from 'classnames'

function VerticalRankBoard (props) {
  const [fullscreen, setFullscreen] = useState(false)

  const { onEdit, boardData, moveRow, handleCheckedChange, handleRadioChange } = props
  /** 加载中、无数据视图 */
  if (!boardData) return <EmptyPage onEdit={props.onEdit} />

  /** 数据加载完成视图 */
  const { HmiData = [], ChartData, RankingData } = boardData
  return (
    <div className={classNames('vertical-board', { fullscreen })}>
      <div className='vertical-board__left'>
        <div className='vertical-board__left-top'>
          <HMIBoard
            onEdit={onEdit}
            HmiData={HmiData}
            moveRow={moveRow}
            handleCheckedChange={handleCheckedChange}
            onFullscreen={setFullscreen}
          />
        </div>
        <div className='vertical-board__left-bottom'>
          <ChartBoard
            onEdit={onEdit}
            ChartData={ChartData}
            moveRow={moveRow}
            handleCheckedChange={handleCheckedChange}
            handleRadioChange={handleRadioChange}
            style={{ height: '100%' }}
          />
        </div>
      </div>
      <div className='vertical-board__right'>
        <RankBoard
          onEdit={onEdit}
          RankingData={RankingData}
          moveRow={moveRow}
          handleCheckedChange={handleCheckedChange}
        />
      </div>
    </div>
  )
}

export default VerticalRankBoard
