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

@observer
export default class Rule6th extends React.Component {
	render() {
		const {
			store,
			rule,
			index,
			type,
			rulesLength,
		} = this.props, {
			workYear,
			entryTime,
			legalAmount,
			welfareAmount,
		} = rule, {
			handleRule6thTimeChange,
			handle6thDelClick,
			isDistributeModeDisabled
		} = store;

		const style={
			width:`${100/Object.keys(rule).length}%`
		}

		const lastColStyle={
			width:`${100/Object.keys(rule).length - 5}%`
		}

		return (
			<p className='rule'>
				{
					(workYear !== undefined) && (
						<span style={style}>
							≥
							<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@gmfd4s`} 
								viewAttr={3}
								value={workYear}
								min={0}
								disabled={isDistributeModeDisabled}
								onChange={val=>handleRule6thTimeChange(val,index,'workYear',type)}
							/>
						</span>
					)
				}
				{
					(entryTime !== undefined) && (
						<span style={style}>
							≥
							<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@zcusuk`} 
								viewAttr={3}
								value={entryTime}
								min={0}
								disabled={isDistributeModeDisabled}
								onChange={val=>handleRule6thTimeChange(val,index,'entryTime',type)}
							/>
						</span>
					)
				}
				{
					(legalAmount !== undefined) && (
						<span style={lastColStyle} className='legal'>
							<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@i4u42w`} 
								viewAttr={3}
								value={legalAmount}
								min={0}
								precision={2}
								disabled={isDistributeModeDisabled}
								onChange={val=>handleRule6thTimeChange(val,index,'legalAmount',type)}
							/>
						</span>
					)
				}
				{
					(welfareAmount !== undefined) && (
						<span style={lastColStyle} className='weafare'>
							<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@yt9f1c`} 
								viewAttr={3}
								value={welfareAmount}
								min={0}
								precision={2}
								disabled={isDistributeModeDisabled}
								onChange={val=>handleRule6thTimeChange(val,index,'welfareAmount',type)}
							/>
						</span>
					)
				}
				{
					(	index > 0 && 
						(index === rulesLength - 1) && 
					    !isDistributeModeDisabled 
					) &&(
						<DeleteButton ecId={`${this && this.props && this.props.ecId || ''}_DeleteButton@h5xwh1`} onClick={()=>handle6thDelClick(type)}/>
					)
				}
			</p>
		);
	}
}