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

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

	//渲染表单元素
	renderForm = () => {
		const {
			conditions,
			form
		} = this.props;

		return conditions.map(c => {
			return c.items.map((item, index) => {
				const {
					label,
					domkey,
				} = item;

				const key = domkey[0];

				//是否渲染当前表单元素
				if (!this.isRenderFormItem(key)) {
					return null;
				}

				let com = [];

				//是否只渲染当前表单元素
				if (this.isOnlyRenderCurrentFormElement(key)) {
					//当前表单元素是否有前缀
					if (this.hasPrefix(key)) {
						com.push(this.renderPrefix(key));
					}

					//渲染当前元素
					//当前元素为被联动元素，且不显示时，返回null
					if (this.isLinked(key) && !this.isLinkedElementShow(key)) {
						com.push(null);
					} else {
						com.push(<div className={key}>
							<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@nlxgw8@${index}`} fieldConfig={item} form={form} formParams={form.getFormParams()} />
						</div>);
					}

					//当前表单元素是否有后缀
					if (this.hasSuffix(key)) {
						com.push(this.renderSuffix(key));
					}
				} else {
					const ele = this.renderMultiFormElement(key, item);
					com = [...ele];
				}

				return (
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@djgqwh@${index}`}
			           label={label}
			           labelCol={{span: 6}}
			           wrapperCol={{span: 18}}
			           error={this.getError(key,item)}
			           tipPosition='bottom'
			        >
			        	{com}
			        </WeaFormItem>
				)
			});
		});
	}

	isRenderFormItem = (key) => {
		const {
			blackList
		} = this.props;

		return blackList && isArray(blackList) && !blackList.includes(key)
	}


	isOnlyRenderCurrentFormElement = (key) => {
		const {
			togetherElements
		} = this.props;

		return togetherElements && !togetherElements[key];
	}


	renderMultiFormElement = (key, item) => {
		const {
			togetherElements,
			form
		} = this.props;

		const items = togetherElements[key];

		const clone = [...items];

		clone.unshift(item);

		const ele = clone.map((item, index) => {
			const {

				domkey
			} = item;

			return (
				<div className={domkey[0]}>
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@2a315i@${index}`}
					   hideLabel
			           labelCol={{span: 0}}
			           wrapperCol={{span: 24}}
			           error={form.getError(item)}
			           tipPosition='bottom'
			        >
						<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@tdo0qw@${index}`} fieldConfig={item} form={form} formParams={form.getFormParams()} />
					</WeaFormItem>
				</div>
			)
		})

		return ele;
	}

	hasPrefix = (key) => {
		const {
			prefix
		} = this.props;

		return prefix && prefix[key];
	}

	renderPrefix = (key) => {
		const {
			prefix
		} = this.props;

		return prefix[key];
	}

	hasSuffix = (key) => {
		const {
			suffix
		} = this.props;

		return suffix && suffix[key];
	}

	renderSuffix = (key) => {
		const {
			suffix,
			form
		} = this.props;

		const info = suffix[key];

		if (isArray(info)) {
			const val = form.getFormParams()[key];
			return info[val];
		} else {
			return suffix[key];
		}
	}

	isLinked = (key) => {
		const {
			linkage
		} = this.props;

		return linkage && linkage[key];
	}

	isLinkedElementShow = (key) => {
		const {
			linkage,
			form
		} = this.props;

		const {
			activeKey,
			activeValue
		} = linkage[key];

		return form.getFormParams()[activeKey] === activeValue;
	}

	getError = (key, item) => {
		const {
			form
		} = this.props;

		if (this.isOnlyRenderCurrentFormElement(key)) {
			return form.getError(item)
		}
	}

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

		return (
			<div>{isFormInit && this.renderForm()}</div>
		);
	}
}