import {
	observer
} from 'mobx-react';
import {
	WeaSwitch
} from 'comsMobx';
import {
	WeaFormItem,
	WeaLocaleProvider,
} from 'ecCom';
import {
	MagicForm,
} from '../../public/sweet-form.js';
import {
	BalanceConversionRules,
	MixBalanceConversionRulesNew
} from './BalanceConversionRules.js';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class DialogForm extends React.Component {
	constructor(props) {
		super(props);
	}

	handleFormChange = (data) => {
		const key = Object.keys(data)[0];
		const value = data[key].value;

		const {
			store
		} = this.props, {
			dialog,
			getUnitName,
		} = store, {
			form
		} = dialog;

		(key === 'scopeType' && value === '0') && ['scopeValue'].map(key => {
			form.updateFields({
				[key]: []
			});
		});

		(key === 'distributionMode' && !['2', '3', '6'].includes(value)) && ['resetBalanceConversionRules'].map(f => {
			this.props.store[f]()
		});

		(key === 'distributionMode' && value !== '4') && ['annualAmount'].map(key => {
			this.updateFormFields(key, 1);
		});

		(key === 'validityRule' && value !== '3') && ['expirationMonth', 'expirationDay'].map(key => {
			this.updateFormFields(key, '1');
		});

		(key === 'extensionEnable' && value === '0') && ['extendedDays'].map((key, index) => {
			this.updateFormFields(key, 90);
		});

		if (key === 'typeId') {
			getUnitName(value);
		}

	}

	updateFormFields = (key, val) => {
		const {
			store
		} = this.props, {
			dialog
		} = store, {
			form
		} = dialog;

		form.updateFields({
			[key]: {
				value: val
			}
		});
	}

	//获取同一行的表单元素
	getTransverseSiblingComponents = (params) => {
		const {
			items,
			form
		} = params;

		//当没有表单元素传入时，直接返回
		if (!items) {
			return
		}

		let extendedDays, expirationDay;

		items.map((item, index) => {
			const {
				domkey
			} = item;

			if (domkey[0] === 'extendedDays') {
				const {
					extensionEnable
				} = form.getFormParams();

				if (parseInt(extensionEnable) === 0) {
					return;
				}

				//同一行的第二个表单元素
				extendedDays = (
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7uxosi@${index}`}
			    		label={`${getLabel('505558',"超过有效期")}`}
			    		colon={false}
			    		labelCol={{span: 5}}
			    		wrapperCol={{span: 18}}
			    		error={form.getError(item) } 
	 					tipPosition='bottom'
	 					style={{float:'right',width:'86%',marginBottom: 0}}
          			>	
          				<div style={{display: 'inline-block',width: 60,marginRight:13}}>
          					<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@idxz8e@${index}`} fieldConfig={item} form={form} formParams={form.getFormParams()} />
          				</div>
          				{`${getLabel('505553',"天")}${getLabel('505559',"内")}${getLabel('505560',"可继续使用")}`}
          			</WeaFormItem>
				)
			}

			if (domkey[0] === 'expirationDay') {
				expirationDay = (
					<div style={{marginLeft: 10, display:'inline-block'}}>
						<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@05qzjm@${index}`} fieldConfig={item} form={form} formParams={form.getFormParams()} />
					</div>
				)
			}
		});

		const transverseSiblingComponents = {
			'extensionEnable': extendedDays,
			'expirationMonth': expirationDay
		};

		return transverseSiblingComponents;
	}

	getTransverseSecondComponent = (conditions) => {
		if (conditions.length === 0) return;

		let transverseSecondComponents = [];

		conditions[0].items.map(item => {
			const {
				domkey
			} = item;
			//extensionEnable & extendedDays
			//expirationMonth & expirationDay
			if (['extendedDays', 'expirationDay'].includes(domkey[0])) {
				transverseSecondComponents.push(item);
			}
		});

		return transverseSecondComponents
	}

	//【余额发放方式】开关联动自定义组件
	getCustomizedComponent = (store) => {
		const {
			dialog
		} = store, {
			form
		} = dialog, {
			distributionMode
		} = form.getFormParams();


		if (!['2', '3', '6'].includes(distributionMode)) {
			return
		}
		const c = {
			'distributionMode': distributionMode !== '6' ? <BalanceConversionRules ecId={`${this && this.props && this.props.ecId || ''}_BalanceConversionRules@2oh0j2`} store={store}/> : <MixBalanceConversionRulesNew ecId={`${this && this.props && this.props.ecId || ''}_MixBalanceConversionRulesNew@9ystxo`} store={store}/>
		}

		return c;
	}

	render() {
		const {
			store
		} = this.props, {
			dialog,
			FORMCONFIG,
			staticTips,
			dynamicTips,
			renderBlacklist,
		} = store, {
			form,
			conditions,
		} = dialog;

		//同行的第二个表单元素
		const transverseSecondComponent = this.getTransverseSecondComponent(conditions);

		//横向复合表单元素
		const transverseSiblingComponents = this.getTransverseSiblingComponents({
			form,
			items: transverseSecondComponent,
		})

		//定制组件
		const customizations = this.getCustomizedComponent(store);

		return (
			<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@ahf6wv`} 
    			{...dialog} 
    			{...FORMCONFIG}
    			isFormInit={form.isFormInit}
    			staticTips={staticTips}
    			dynamicTips={dynamicTips}
    			renderBlacklist={renderBlacklist}
    			transverseSiblingComponents={transverseSiblingComponents}
    			customizations={customizations}
    			onFormElementsChange={data => this.handleFormChange(data)}
    		 />
		);
	}
}