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

@observer
export default class EasyForm extends React.Component {
	constructor(props) {
		super(props);
		this.prefix = null;
		this.suffix = null;
	}

	renderForm = (conditions, form, config) => {
		const coms = conditions.map(c => {
			return c.items.map(item => {
				const {
					label,
					domkey,
				} = item;

				const key = domkey[0];

				if (!this.isRenderFormItem(key, form, config)) {
					return null;
				}

				return (
					<WeaFormItem
			            label={label}
			            labelCol={{span: 6}}
			            wrapperCol={{span: 18}}
			         >
			         	{this.renderFormElement(item,form)}
          			</WeaFormItem>
				)
			});
		});

		return coms;
	}

	//判断当前表单元素是否渲染
	isRenderFormItem = (key, form, config) => {
		const isPassive = this.isPassiveFormItem(key, config);

		if (!isPassive)
			return true

		const activeConfig = this.getActiveConfig(key, config);

		const currentValue = this.getActiveCurrentValue(activeConfig.key, form.getFormParams());

		return currentValue === activeConfig.value;
	}

	//判断当前元素是否为被联动元素
	isPassiveFormItem = (key, config) => {
		return isArray(config) && config.some(c => c[key])
	}

	//获取发起联动表单元素的配置数据
	getActiveConfig = (key, config) => {
		const active = config.find(c => c[key]);
		return active && active[key];
	}

	//获取发起联动表单元素的当前值
	getActiveCurrentValue = (key, params) => {
		return params[key];
	}

	renderFormElement = (item, form) => {
		const formParams = form.getFormParams();

		const key = item.domkey[0];
		//一行是否渲染多个组件
		const isMulti = item.length > 0;

		let com;
		if (isMulti) {
			com = item.map(data => {
				return (
					<div>
						<WeaSwitch 
							fieldConfig={data} 
							form={form} 
							formParams={formParams} 
						/>
					</div>
				)
			})
		} else {
			return (
				<div>
					{this.renderFormElementPrefix()}
					<WeaSwitch 
						fieldConfig={item} 
						form={form} 
						formParams={formParams} 
					/>
					{this.renderFormElementSuffix(key,formParams)}
				</div>
			)
		}

	}

	renderFormElementPrefix = () => {

	}

	renderFormElementSuffix = (key, params) => {
		if (!this.hasSuffix(key)) return null;

		const suffix = this.suffix[key];

		const value = params[key];

		if (isArray(suffix)) {
			return (
				<span>{suffix[value]}</span>
			)
		} else {
			return (
				<span>{suffix}</span>
			)
		}
	}

	//当前表单元素是否有前缀
	hasPrefix = (key) => {
		return this.prefix && this.prefix[key];
	}

	//当前表单元素是否有后缀
	hasSuffix = (key) => {
		return this.suffix && this.suffix[key];
	}

	//对象是否含有某个key值
	isObjectHasKey = (key, object) => {
		return object && object[key];
	}
	//对描述性文字进行分类
	classifyDesc = (desc) => {
		['prefix', 'suffix'].forEach(key => {
			this[key] = desc[key];
		});
	}

	render() {
		const {
			datas
		} = this.props, {
			conditions,
			form,
			config,
			desc,
		} = datas, {
			isFormInit
		} = form;

		desc && this.classifyDesc(desc);

		if (!isFormInit) {
			return <div/>;
		}

		return (
			<div>{this.renderForm(conditions,form,config)}</div>
		)
	}
}