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

@inject('hrmVacationBalanceReportCopy')
@observer
class DialogTimeline extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const {
			dialogTimeline,
			dialogPagination,
		} = this.props.hrmVacationBalanceReportCopy, {
			dataDetail
		} = dialogTimeline, {
			total
		} = dialogPagination;

		return (
			<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@kr3v3n`} className='hrm-vacation-scroll'>
				<div style={{padding: 25}}  className="hrm-vacation-timeline">
					<Timeline ecId={`${this && this.props && this.props.ecId || ''}_Timeline@si2pai`}>{
						dataDetail.map((d, index) => {
							const {
								operateDate,
								operateTime,
								changeAmount,
								operateDesc
							} = d;
							
							return (
								<Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@bhenp1@${index}`} dot={<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@cb3s24@${index}`} type="clock-circle-o" style={{ fontSize: '16px' }} />}>
									<div className='timeline-content-wrap'>
										<div className="timeline-content-left">
											<div>{operateDate}</div>
											<div>{changeAmount ? changeAmount : operateDesc}</div>
										</div>
										<div className="timeline-content-right">
											<div>{operateTime}</div>
											{
												changeAmount && <div dangerouslySetInnerHTML={{__html: operateDesc}}/>
											}
										</div>
									</div>
								</Timeline.Item>
							)
						})
					}</Timeline>
				</div>
			</WeaNewScroll>
		)
	}
}

export default DialogTimeline;