import React, { Component } from "react";
import { WeaDialog, WeaLocaleProvider, WeaNewScroll, WeaSearchGroup } from "ecCom";
import { inject, observer } from 'mobx-react';
import { Button } from "antd";
// import img1URL from '../../../../../hrm/hrm_e9/image/addattendancegroup1.png';
const getLabel = WeaLocaleProvider.getLabel;

@inject('hrmGroupSetting')
@observer
export default class Illdialog extends Component {
	constructor(props) {
		super(props);
	}
	render () {
		const { hrmGroupSetting } = this.props;
		return (
			<div className={'wea-explain'}>
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@jmjjll`}
					title={getLabel('529754', '工作时长计算方式说明')}
					onCancel={hrmGroupSetting.calmethodcancel}
					visible={hrmGroupSetting.illustrateVisible}
					icon={'icon-coms-hrm'}
					iconBgcolor={'#217346'}
					style={{ width: 900, height: 750 }}
					hasScroll
					button={<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dcsfmm`}>nih</Button>}
				>
					<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@a5bh4b`}
						height={700}
					><div className={'Computational_Method'}>
							<div className={'summation'}>
								<div className={'topbar1'}>{getLabel('529755', '打卡时间累加计算说明')}</div>
								<p>{getLabel('529756', '1.弹性工时制设置考勤开始时间为7:00，工作时长设置为8小时；')}</p>
								<p>{getLabel('529757', '2.假设当天打卡5次，打卡时间点分别为：9:00、12:00 、14：00 、16:00、18:00.')}</p>
								<p>{getLabel('529758', '3.打卡时间累加计算是按照打卡时间一直累加进行计算工作时长，本质上是按照【最晚打卡时间 - 最早打卡时间】计算工作时长 。如下图所示:')}</p>
								<div className={'imgExplain1'}>
									<span className={'tuli'}>{getLabel('529759', '图例说明')}</span>
									<span className={'time'}>{getLabel('16039', '考勤开始时间')}</span>
									<span className={'duration'}>{getLabel('529760', '有效工作时长')}</span>
								</div>
								<div className={'img1'}><img src={'/hrm/hrm_e9/image/addattendancegroup1.png'} /></div>
							</div>
							<div className={'double_summation'}>
								<div className={'topbar2'}>{getLabel('529761', '打卡时间成对计算说明')}	</div>
								<p>{getLabel('529756', '1.弹性工时制设置考勤开始时间为7:00，工作时长设置为8小时；')}</p>
								<p>{getLabel('529757', '2.假设当天打卡5次，打卡时间点分别为：9:00、12:00 、14：00 、16:00、18:00.')}</p>
								<p>{getLabel('529762', '3.打卡时间成对计算即按照【签退-签到】成对进行工作时长的计算，此方式的好处是可以过滤掉午休、晚休时段不计算工作时长 。如下图所示:')}</p>
								<div className={'imgExplain2'}>
									<span className={'tuli'}>{getLabel('529759', '图例说明')}</span>
									<span className={'time'}>{getLabel('16039', '考勤开始时间')}</span>
									<span className={'duration'}>{getLabel('529760', '有效工作时长')}</span>
									<span className={'rest'}>{getLabel('388417', '休息时间')}</span>
									<span className={'nouse'}>{getLabel('529763', '无效工作时长')}</span>
								</div>
								<div className={'img2'}><img src={"/hrm/hrm_e9/image/addattendancegroup2.png"} /></div>
							</div>
						</div>
					</WeaNewScroll>

				</WeaDialog>
			</div>
		);
	}
}