import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaSelect,
	WeaFormItem,
	WeaTimePicker,
	WeaLocaleProvider,
} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

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

	render() {
		const {
			hrmOvertimeRule,
			times,
			type,
		} = this.props, {
			handleTimePickerChange,
			handleSelectChange,
			addRestTime,
			delRestTime,
			options,
		} = hrmOvertimeRule;

		return (
			<div style={{border: '1px solid #E4E4E4',padding: 10, width:'128%'}}>{
				times.map( (time,rowIndex) => {
					const {
						startTime,
						endTime,
						startType,
						endType,
					} = time;

					return (
						<div style={{width:'100%',position: 'relative'}}>
							<div style={{width:'100%'}}>
								{
									[getLabel('505603',"休息时间"),'-'].map( (label,colIndex) => {
										return (
											<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@obntvy@${rowIndex}${colIndex}`}
	            								label={label}
	            								colon={colIndex === 0 ? true : false}
	            								labelCol={{span: colIndex === 0 ? 8 : 2}}
	            								wrapperCol={{span:  colIndex === 0 ? 16 : 22}}
	            								style={{
	            									display: 'inline-block',
	            									width: colIndex === 0 ? '54%' : '36%', 
	            									marginLeft:(colIndex === 1 && '3%'),
	            									paddingTop: 0,
	            									paddingBottom: 0
	            								}}
	          								>
		          								<WeaTimePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaTimePicker@o6v7l1@${rowIndex}${colIndex}`} 
		          									viewAttr={3}
		          									value={colIndex === 0 ? startTime : endTime} 
		          									onChange={value => handleTimePickerChange(value,rowIndex,colIndex,type)}
		          								/>
	          								</WeaFormItem>
										)
									})
								}
							</div>
							{times.length > 1 && <span style={{width:'17%',position: 'absolute', top: 5,right: -55}} className='holiday-link' onClick={() => delRestTime(rowIndex,type)}>{getLabel('91',"删除")}</span>}
						</div>
					) 
				})
			}
			<span className='holiday-link' onClick={() => addRestTime(type)}>
				<i className='icon-coms-Add-to-o' />
				<span style={{marginLeft: 5}}>{getLabel('505604',"添加休息时间")}</span>
			</span>
			</div>
		);
	}
}

export default RestTime