import {
	observer
} from 'mobx-react';
import {
	WeaFormItem,
	WeaSearchGroup,
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx';
import {
	isEmpty
} from 'lodash';
import '../style/magicForm.less';

@observer
export default class MagicForm extends React.Component {
	//表单是否需要分组
	isNeedSearchGroup = (conditions) => {
		return conditions.length > 1
	}

	//表单元素是否显示
	isItemShow = (item) => {
		const {
			store
		} = this.props, {
			form,
			customRenderKeyList
		} = store;

		const {
			domkey
		} = item;

		//自定义渲染
		if (customRenderKeyList && customRenderKeyList.includes(domkey[0])) {
			return false;
		}

		const linkageConfig = this.findLinkageConfig(domkey[0]);

		if (linkageConfig) {
			const {
				activeKey,
				showValue
			} = linkageConfig;

			//active表单元素当前的value
			const curActiveVal = form.getFormParams()[activeKey];

			//当value包含curActiveVal时，显示当前表单元素
			return showValue.includes(curActiveVal)
		}

		return true;

	}

	//查找联动当前表单元素的
	findLinkageConfig = (passiveKey) => {
		const {
			store
		} = this.props, {
			linkageConfigs
		} = store;

		return linkageConfigs && linkageConfigs.find(config => config.passiveKey === passiveKey);
	}

	renderForm = (items) => {
		const {
			store
		} = this.props, {
			form
		} = store;

		return items.map( (item,index) => {
			if (!this.isItemShow(item)) {
				return null;
			}

			const {
				label,
				labelcol,
				fieldcol,
				domkey,
				colon = true,
			} = item;

			return (
				<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8886sw@${index}`}
					label={this.getLabel(item, index) }
					colon={colon}
					labelCol={{span: labelcol}}
					wrapperCol={{span:fieldcol}}
					error={form.getError(item)} 
					tipPosition='bottom'
					className={domkey[0]}
				>
					{this.renderFormItemChildren(item)}
				</WeaFormItem>
			)
		})
	}

	renderFormItemChildren = (item) => {
		const {
			store
		} = this.props, {
			form,
			handleFormChange,
		} = store;

		return (
			<div>
				<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@63wgpb`} 
					fieldConfig={item} 
					form={form} 
					formParams={form.getFormParams()} 
					onChange={handleFormChange}
				/>
				{this.renderOtherComponents(item)}
			</div>
		)
	}

	renderOtherComponents = (item) => {
		const {
			store
		} = this.props, {
			form,
			handleFormChange,
			otherComponents
		} = store;

		if (!otherComponents) {
			return null;
		}

		const {
			domkey
		} = item;

		const fn = otherComponents[domkey[0]];

		if (fn) {
			return fn(item, form)
		} else {
			return null;
		}
	}

	//表单元素控制组
	getFormGroup = (index,condition) => {
		const {
			store
		} = this.props, {
			groupShowConfigs,
			form,
		} = store;

		const {
			title,
			items,
			defaultshow = true,
		} = condition;

		if (groupShowConfigs) {
			return groupShowConfigs.map((config, i) => {
				const {
					activeKey,
					passiveIndex,
					showValue
				} = config;

				const activeVal = form.getFormParams()[activeKey];

				if (
					(index === passiveIndex && showValue.includes(activeVal)) ||
					(index !== passiveIndex)
				) {
					return (
						<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@te623s@${i}`} 
							center
						    showGroup={defaultshow}
						    title={title} 
						    children={this.renderForm(items)}
						/>
					)
				}

			})
		}else{
			return (
				<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@rsf36v`}
					center 
				    showGroup={defaultshow}
				    title={title} 
				    children={this.renderForm(items)}
				/>
			)
		}
	}

	getLabel = (item, index) => {
		const {
			store
		} = this.props, {
			hasOrderNumber,
			labelPres
		} = store;

		const {label, domkey} = item;

		if (!hasOrderNumber && isEmpty(labelPres)) {
			return label
		}

		if (hasOrderNumber) {
			return (
				<span>
					<div className='circle'>
						<span className='number-icon'>{index+1}</span>
					</div>
					<span style={{marginLeft:10}}>{label}</span>
				</span>
			)
		}

		if (!isEmpty(labelPres)) {
			return (
				<span>
					{
						labelPres[domkey[0]] && <span>{labelPres[domkey[0]]}</span>
					}
					<span style={{marginLeft:10}}>{label}</span>
				</span>
			)
		}
	}

	render() {
		const {
			store
		} = this.props, {
			conditions,
			form,
		} = store, {
			isFormInit
		} = form;

		const hasSearchGroup = this.isNeedSearchGroup(conditions);

		return (
			<div className='magicForm'>
				{
					isFormInit && conditions.map( (condition,index) => {
						const {
							items,
						} = condition;

						if (hasSearchGroup) {
							return this.getFormGroup(index,condition);
						} else {
							return this.renderForm(items)
						}
					})
				}
			</div>
		);
	}
}