import {
	observer
} from 'mobx-react';
import {
	WeaFormItem,
	WeaSearchGroup,
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx';

@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) {
			return linkageConfig.every(config => {
				const {
					activeKey,
					showValue
				} = config;
	
				//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.filter(config => config.passiveKey === passiveKey);
	}

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

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

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

			let customElement = null;
			if(customRenderedElements){
				customElement = customRenderedElements[domkey[0]];
			}

			return (
				<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@5n2el7@${index}`}
					label={label}
					labelCol={{span: 6}}
					wrapperCol={{span:18}}
					error={form.getError(item)} 
					tipPosition='bottom'
					className={domkey[0]}
				>
					{customElement ? customElement(item,null,form,form.getFormParams()) : this.renderFormItemChildren(item)}
				</WeaFormItem>
			)
		})
	}

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

		return (
			<div>
				<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@tym5yf`} 
					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,
			isCenter
		} = 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@x2kg3r@${i}`} 
						    showGroup={defaultshow}
						    title={title} 
						    children={this.renderForm(items)}
						/>
					)
				}

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

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

		const hasSearchGroup = this.isNeedSearchGroup(conditions);

		return (
			isFormInit && conditions.map( (condition,index) => {
				const {
					items,
				} = condition;

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