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

@inject('commonStore')
@inject('hrmHolidayRule')
@observer
class BalanceConversionRules extends React.Component {
	constructor(props) {
		super(props);
	}

	handleConversionRulesChange = (index, value) => {
		this.props.hrmHolidayRule.changeBalanceConversionRules(index, value);
	}

	handleDelClick = () => {
		this.props.hrmHolidayRule.delBalanceConversionRule();
	}

	handleAddClick = () => {
		this.props.hrmHolidayRule.addBalanceConversionRule();
	}

	handleTimeIntervalChange = (value) => {
		this.props.hrmHolidayRule.setTimeInterval(value);
	}

	getHeader = (params) => {
		const {
			distributionMode,
			timeInterval
		} = params;

		return (
			<div className='hrm-customized-input' style={{borderBottom: '1px solid #eee',marginBottom: 10,paddingBottom: 10}}>
				<span style={{marginRight: 3}}>
					<i className='icon-coms-Tile' />
					<b style={{marginLeft: 5}}>
						{ distributionMode === '2' ? getLabel('505548',"司龄") : getLabel('505549',"工龄")}
						{`${getLabel('505550',"区间")} : `}
					</b>
				</span>
				<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@mh11rp`} 
					min={0}
					value={timeInterval}
					onChange={this.handleTimeIntervalChange.bind(this)}/>
				<span>
					<b>{getLabel('505552',"年")}</b>
				</span>
			</div>
		)
	}

	getBalancePaymentMethods = (params) => {
		const {
			balanceConversionRules,
			distributionMode,
			minimumUnit
		} = params;

		const balancePaymentMethods = [];

		balanceConversionRules.map((balanceConversionRule, index) => {
			const {
				timePoint,
				amount
			} = balanceConversionRule;

			balancePaymentMethods.push(
				<div className='hrm-customized-input' style={{position:'relative'}}>
					<span>
						{ distributionMode === '2' ? getLabel('505548',"司龄") : getLabel('505549',"工龄")}
					</span>
					<span>
						{`${index === 0 ? '<' : '≥'}`}
					</span>
					<span>
						{`${[0,1].includes(index) ? 1 : timePoint}${getLabel('505552',"年")} , ` }
					</span>
					<span>
						{getLabel('505551',"享有")}
					</span>
					<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@zpqebb@${index}`} 
						viewAttr={3}
						value={amount}
						min={0}
						onChange={this.handleConversionRulesChange.bind(this,index)}/>
					<span>
						{`${minimumUnit === '3' ? getLabel('391',"小时") : getLabel('505553',"天")}${getLabel('505554',"假")}`}
					</span>
					{( (index > 1) && index === (balanceConversionRules.length - 1) ) && <span className='wea-f14' style={{position:'absolute',top:7, marginLeft: 10}} onClick={this.handleDelClick}>
						<i className='icon-coms-Clear hrm-del-icon' />
					</span>}
				</div>
			)
		})

		return balancePaymentMethods;
	}

	render() {
		const {
			commonStore,
			hrmHolidayRule
		} = this.props, {
			formElements,
		} = commonStore, {
			conversionRules,
		} = hrmHolidayRule, {
			timeInterval,
			balanceConversionRules
		} = conversionRules, {
			form
		} = formElements;

		const {
			distributionMode,
			minimumUnit
		} = form.getFormParams();

		return (<div style={{padding:15, border: '1px solid #D9D9D9'}}>
					{this.getHeader({
						distributionMode,
						timeInterval
					})}
					{this.getBalancePaymentMethods({
						balanceConversionRules,
						distributionMode,
						minimumUnit,
					})}
					<span className='holiday-link' onClick={this.handleAddClick}>
						<i className='icon-coms-Add-to-o'/>
						<span style={{marginLeft: 5}}>{getLabel('505555',"添加规则")}</span>
					</span>
				</div>)
	}
}

@inject('commonStore')
@inject('hrmHolidayRule')
@observer
class MixBalanceConversionRulesNew extends React.Component {
	constructor(props) {
		super(props);
	}

	getHeader = () => {
		const {
			formElements,
		} = this.props.commonStore, {
			form
		} = formElements, {
			minimumUnit
		} = form.getFormParams();

		const labels = [getLabel('505549', "工龄"), getLabel('505548', "司龄"), getLabel('505556', "法定年假"), getLabel('505557', "福利年假")];

		return (
			<div style={{padding: '12px 0', backgroundColor:'#eee' }}>
				{
					labels.map( (label,index) => {
						let unit;
						if([0,1].includes(index)){
							unit = getLabel('505552',"年");
						}else{
							unit = (minimumUnit === '3') ? getLabel('391',"小时") : getLabel('505553',"天");
						}
						return (
							<div className='hrm-over-flow' style={{display:'inline-block', width: [0,1].includes(index) ? 70 : 97,textAlign: 'center' }} title={`${label}(${unit})`}>
								<i className='icon-coms-Tile'/>
								<span style={{marginLeft: 5}}>{`${label}(${unit})`}</span>
							</div>
						)
					})
				}
			</div>
		)
	}

	getBalancePaymentMethods = () => {
		const {
			conversionRules,
			changeEntryTime,
			changeWorkYear,
			changeLegalAmount,
			changeWelfareAmount,
			delBalanceConversionRule,
		} = this.props.hrmHolidayRule, {
			mixBalanceConversionRules
		} = conversionRules;

		const balancePaymentMethods = [];

		const ageInputNumber = (params) => {
			const {
				value,
				handleChange
			} = params;

			return (
				<span>
					<span><b>≥</b></span>
					<span style={{display: 'inline-block',width: 45,marginLeft: 5}}>
						<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@9813ys`} 
							viewAttr={3}
							min={0}
							value={value}
							onChange={val => handleChange(val)}
						/>
					</span>
				</span>
			)
		}

		const balanceInputNumber = (params) => {
			const {
				value,
				handleChange
			} = params;

			return (
				<span style={{display: 'inline-block',width: 75}}>
					<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@1rfi21`} 
						viewAttr={3}
						min={0}
						value={value}
						onChange={val => handleChange(val)}
					/>
				</span>
			)
		}

		mixBalanceConversionRules.map((mixBalanceConversionRule, outsideIndex) => {
			const {
				entryTime,
				workYear,
				legalAmount,
				welfareAmount,
			} = mixBalanceConversionRule;

			balancePaymentMethods.push(
				<div style={{lineHeight: '45px',borderBottom: '1px solid #eee',position:'relative' }}>
					<span>
						{
							ageInputNumber({
								value: workYear,
								handleChange: (val) => changeWorkYear(outsideIndex, val)
							})
						}
					</span>
					<span style={{marginLeft: 15}}>
						{
							ageInputNumber({
								value: entryTime,
								handleChange: (val) => changeEntryTime(outsideIndex, val)
							})
						}
					</span>
					<span style={{marginLeft: 20}}>
						{
							balanceInputNumber({
								value: legalAmount,
								handleChange: (val) => changeLegalAmount(outsideIndex, val)
							})
						}
					</span>
					<span style={{marginLeft: 23}}> 
						{
							balanceInputNumber({
								value: welfareAmount,
								handleChange: (val) => changeWelfareAmount(outsideIndex, val)
							})
						}
					</span>
					{
						 (outsideIndex > 0 && outsideIndex === (mixBalanceConversionRules.length - 1) ) && (
							<span style={{position: 'absolute',right: -10,top: 2}} className='wea-f14' onClick={() => delBalanceConversionRule({type:'mix'}) }>
								<i className='icon-coms-Clear hrm-del-icon' />
							</span>
						)
					}
					
				</div>
			)
		})

		return balancePaymentMethods
	}

	render() {
		const {
			hrmHolidayRule
		} = this.props, {
			addBalanceConversionRule
		} = hrmHolidayRule;

		return (
			<div style={{padding:15, border: '1px solid #D9D9D9'}}>
				<div style={{clear:'both',marginTop: 8}}>
					{this.getHeader()}
					{this.getBalancePaymentMethods()}
					<span className='holiday-link' style={{display: 'inline-block', marginTop: 6}} onClick={() => addBalanceConversionRule({type:'mix'})}>
						<i className='icon-coms-Add-to-o' />
						<span style={{marginLeft: 5}}>
							{getLabel('505555',"添加规则")}
						</span>
					</span>
				</div>
			</div>
		);
	}
}

export {
	BalanceConversionRules,
	MixBalanceConversionRulesNew,
}