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

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

	//头部
	getHeader = () => {
		const {
			store
		} = this.props, {
			conversionRules,
			dialog,
			setTimeInterval,
		} = store, {
			timeInterval
		} = conversionRules, {
			form,
			isEnable
		} = dialog;

		const {
			distributionMode, //余额发放方式
		} = form.getFormParams();

		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' ? i18n.label['527582'] : getLabel('505549',"工龄")}
						{`${getLabel('505550',"区间")} : `}
					</b>
				</span>
				<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@ty2szd`} 
					min={0}
					disabled={isEnable === '0' ? true :false}
					value={timeInterval}
					onChange={val => setTimeInterval(val)}/>
				<span>
					<b>{i18n.label['527583']}</b>
				</span>
			</div>
		)
	}

	getBalancePaymentMethods = () => {
		const {
			store
		} = this.props, {
			conversionRules,
			dialog,
			changeBalanceConversionRules,
			delBalanceConversionRule,
		} = store, {
			balanceConversionRules,
			unit
		} = conversionRules, {
			form,
			isEnable,
		} = dialog;

		const {
			distributionMode, //余额发放方式
		} = form.getFormParams();

		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@jmr30e@${index}`} 
						viewAttr={3}
						value={amount}
						min={0}
						disabled={isEnable === '0' ? true :false}
						onChange={val => changeBalanceConversionRules(index, val)}/>
					<span>

						{`${unit ? unit : getLabel(505553,'天')}${window.e9_locale.userLanguage == '7'? '' : ' '}${i18n.label['527585']}`}
					</span>
					{( (isEnable === '1') && (index > 1) && index === (balanceConversionRules.length - 1) ) && <span className='wea-f14' style={{position:'absolute',top:7, marginLeft: 10}} onClick={() =>delBalanceConversionRule()}>
						<i className='icon-coms-Clear hrm-del-icon' />
					</span>}
				</div>
			)
		})

		return balancePaymentMethods;
	}

	addRule = () => {
		const {
			store
		} = this.props, {
			addBalanceConversionRule,
			dialog
		} = store, {
			isEnable
		} = dialog;

		if (isEnable === '0') {
			return null;
		}

		return (
			<span className='holiday-link' onClick={addBalanceConversionRule}>
				<i className='icon-coms-Add-to-o'/>
				<span style={{marginLeft: 5}}>{getLabel('505555',"添加规则")}</span>
			</span>
		)
	}

	render() {
		return (<div style={{padding:15, border: '1px solid #D9D9D9'}}>
					{
						this.getHeader()
					}
					{
						this.getBalancePaymentMethods()
					}
					{
						this.addRule()
					}
				</div>)
	}
}

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

	getHeader = () => {
		const {
			store
		} = this.props, {
			dialog,
			conversionRules
		} = store, {
			form
		} = dialog, {
			unit: ut
		} = conversionRules;

		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 = ut ? ut : 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,
			dialog
		} = this.props.store, {
			mixBalanceConversionRules, //工龄+司龄余额发放规则
		} = conversionRules, {
			isEnable
		} = dialog;

		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@5vrbtr`} 
							viewAttr={3}
							min={0}
							disabled={isEnable === '0' ? true :false}
							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@3gpcmo`} 
						viewAttr={3}
						min={0}
						disabled={isEnable === '0' ? true :false}
						value={value}
						onChange={val => handleChange(val)}
					/>
				</span>
			)
		}

		//遍历混合余额发放规则
		mixBalanceConversionRules.map((mixBalanceConversionRule, outsideIndex) => {
			const {
				entryTime, //司龄
				workYear, //工龄
				legalAmount, //法定年假
				welfareAmount, //福利年假
			} = mixBalanceConversionRule;

			//outsideIndex: 行索引值
			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>
					{
						 (isEnable === '1' && 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
	}

	addRule = () => {
		const {
			store
		} = this.props, {
			addBalanceConversionRule,
			dialog
		} = store, {
			isEnable
		} = dialog;

		if (isEnable === '0') {
			return null;
		}

		return (
			<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>
		)
	}

	render() {
		return (
			<div style={{padding:15, border: '1px solid #D9D9D9'}}>
				<div style={{clear:'both',marginTop: 8}}>
					{
						this.getHeader()
					}
					{
						this.getBalancePaymentMethods()
					}
					{
						this.addRule()
					}
				</div>
			</div>
		);
	}
}

export {
	BalanceConversionRules,
	MixBalanceConversionRulesNew,
}