import {
  Row,
  Col,
} from 'antd'

import React from 'react'

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

  getTriangleIcon(tag) {
    if (tag > 0) {
      return (<span><i style={{display: 'inline-block', width: 0, height: 0, borderRight: '4px solid transparent', borderBottom: '8px solid #7DC756', borderLeft: '4px solid transparent'}} /></span>);
    } else if (tag < 0) {
      return (<span><i style={{display: 'inline-block', width: 0, height: 0, borderTop: '8px solid #E9612B', borderRight: '4px solid transparent', borderLeft: '4px solid transparent'}} /></span>);
    }
  }

  getPercent(tag, percent) {
    if (tag > 0) {
      return (<span style={{color: '#7DC756', marginLeft: 5}}>{percent}</span>);
    } else if (tag < 0) {
      return (<span style={{color: '#E9612B', marginLeft: 5}}>{percent}</span>);
    } else {
      return (<span style={{color: '#D2D2D2'}}>{percent}</span>);
    }
  }


  render() {
    const {
      countDatas,
      getIcons,
      isNeedLink,
      linkIndex,
      setVisible
    } = this.props;

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

            return (
              <div style={{width:`${1/countDatas.length*100}%`}}  className='hrm-report-count-item-cy'>
                <div className='hrm-report-count-item-icon-cy'>{
                  getIcons(index)
                }</div>
                <div className='hrm-report-count-item-label-cy'>
                    <div className='hrm-report-count-item-showname'>{showname}</div>
                    <div className='hrm-report-count-item-num'>{
                       (isNeedLink && linkIndex === index ) ?
                       <a onClick={() => setVisible('5', true)}>{num}</a> :
                       num
                    }</div>
                    <div>
                      <span>{this.getTriangleIcon(isChange)}</span>
                      <span>{this.getPercent(isChange,percent)}</span>
                      <span className='hrm-report-count-item-changetype'>{changetype}</span>
                    </div>
                </div>
              </div>
            )
          })
        }
      </div>
    )
  }

}

export default Statistics