import React from 'react';
import {
	Row,
	Col
} from 'antd';

const datas = [{
	key: 'evection',
	icon: 'icon-Human-resources-business-travel',
	bgColor: '#48C651',
	title: '出差',
	value: 10
}, {
	key: 'official',
	icon: 'icon-Human-resources-work',
	bgColor: '#4F8CFF',
	title: '公出',
	value: 20
}, {
	key: 'overtime',
	icon: 'icon-Human-resources-overtime',
	bgColor: '#8D6BF3',
	title: '加班',
	value: 30
}];

export default class Test extends React.Component {
	render() {
		const len = datas.length;

		return (
			<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@wckko3`} type="flex" justify="space-around" align="middle">
				{
					datas.map((data, index) => {
						const {
							key,
							icon,
							bgColor,
							title,
							value
						} = data;

						return (
							<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hqwwvh@${index}`} span={24/len} key={key}>
								<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2plf5z@${index}`}>
									<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@csawhb@${index}`} span={12}>
										<div style={{backgroundColor:bgColor}}>
											<i className={icon}/>
										</div>
									</Col>
									<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ioufvl@${index}`} span={12}>
										<div>{value}</div>
										<div>{title}</div>
									</Col>
								</Row>
							</Col>
						)
					})
				}
			</Row>
		);
	}
}