import {
  inject,
  observer,
} from 'mobx-react';
import {
  Icon,
} from 'antd';


@inject('hrmUsedemand')
@observer
export default class Summary extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    // this.props.hrmUsedemand.getSummaryDatas();
  }

  componentWillUnmount() {
    this.props.hrmUsedemand.resetSummaryDatas();
  }

  render() {
    const {
      hrmUsedemand
    } = this.props, {
      summary,
      openDialog,
    } = hrmUsedemand, {
      countDatas
    } = summary;

    return (
      <div className='use-demand-count'>
        {
          countDatas.map( (cd,i) => {
              const {
                iconBgColor,
                number,
                icon,
                isRise,
                label,
                title,
                percent
              } = cd;

              return (
                <div className='use-demand-count-item' style={{width:`${1/countDatas.length*100}%`}}>
                  <div className='use-demand-count-item-left'>
                     <i className={`${icon} use-demand-count-item-icon`}  style={{backgroundColor:iconBgColor}}/>
                  </div>
                  <div className='use-demand-count-item-right'>
                    <div>{title}</div>
                    <div className='use-demand-count-item-number'>{
                      i == '0'? 
                      <a onClick={() => openDialog({type:'bar',field:{},index:'2'})}>{number}</a> :
                       number
                    }</div>
                    <div className={isRise ? 'use-demand-count-item-up':'use-demand-count-item-down'}>
                      <span>
                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@v4ao0v@1`} type={isRise ? "caret-up" : "caret-down" } />
                      </span>
                      <span className='use-demand-count-item-percent'>
                        {percent}
                      </span>
                      <span className='use-demand-count-item-desc'>
                        {label}
                      </span>
                    </div>
                  </div>
                </div>
              )

          })
        }
      </div>

    )
  }

}