import {
	observer
} from 'mobx-react';
import {
	WeaInputNumber,
	WeaLocaleProvider,
} from 'ecCom';
import DeleteButton from '../../public/valhalla/components/DeleteButton.js';
import {i18n} from '../../public/i18n.js'
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Rule23th extends React.Component {
	render() {
		const {
			store,
			amount,
			timePoint,
			index,
		} = this.props, {
			workTimeType,
			handleRule23thTimeChange,
			unitName = getLabel(1925, '天'),
			detailRule,
			handle23thDelClick,
			isDistributeModeDisabled
		} = store;

		return (
			<p className='payment'>
				<span>{`${workTimeType}≥${timePoint}${getLabel('505552', "年")}, `}</span>
				<span>{getLabel(505551,'享有')}</span>
				<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@higoo5`} 
					viewAttr={3}
					value={amount}
					min={0}
					precision={2}
					disabled={isDistributeModeDisabled}
					onChange={val=>handleRule23thTimeChange(val,index)}
				/>
				<span>{`${unitName}${getLabel('505554',"假").replace('false','off')}`}</span>
				{
					(  index > 1 && 
					  (index === detailRule.length - 1) && 
					  !isDistributeModeDisabled 
					 ) &&(
						<DeleteButton ecId={`${this && this.props && this.props.ecId || ''}_DeleteButton@flyveo`} onClick={handle23thDelClick}/>
					)
				}
				
			</p>
		);
	}
}