import {
  Row,
  Col,
} from 'antd'

import React from 'react'

class DataStatistics extends React.Component {
  constructor(props) {
    super(props);
  }

  getIcon(i, pathname) {
    switch (i) {
      case 0:
        return <div className='hrm-report-box'><div style={{backgroundColor: '#00A9FF'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-synergism' /></div></div>;
      case 1:
        return <div className='hrm-report-box'><div style={{backgroundColor: '#F67C4C'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-hrm' /></div></div>;
      case 2:
        return <div className='hrm-report-box'><div style={ (pathname == 'departmentStatistics') ? {backgroundColor: '#7DC756'} :{backgroundColor: '#AC7CFF'} } className='hrm-report-icon hrm-report-radius'><i className='icon-coms-meeting' /></div></div>;
      case 3:
        return <div className='hrm-report-box'><div style={ (pathname == 'departmentStatistics') ? {backgroundColor: '#F9A825'} : {backgroundColor: '#50D0A3'} } className='hrm-report-icon hrm-report-radius'><i className='icon-coms-crm' /></div></div>;
      default:
        return <div className='hrm-report-box'><div style={{backgroundColor: '#00A9FF'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-synergism' /></div></div>;
    }
  }

  render() {
    const {
      countDatas,
      pathname
    } = this.props;

    return (
      <div style={{margin: '8px 16px',height: 120, border: '1px solid #DDD',borderRadius: 3}}>
        {countDatas.map( (data,index) => {
          const {
            showname,
            num
          } = data;

          return (
            <div style={{width:`${1/countDatas.length*100}%`}} className='hrm-report-count-item'>
              <div className='hrm-report-count-item-icon'>{
                this.getIcon(index,pathname)
              }</div>
              <div className='hrm-report-count-item-label'>
                <div className='hrm-report-count-item-showname'>{showname}</div>
                <div className='hrm-report-count-item-num'>{num}</div>
              </div>
            </div>
          )
        })}
      </div>
    )
  }
}

export default DataStatistics