import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	Button
} from 'antd';
import {
	WeaFormItem,
	WeaSearchGroup,
	WeaCheckbox
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx';
import findIndex from 'lodash/findIndex';

@observer
export default class FormInfo extends Component {
	renderForm = () => {
		const {
			formFields,
			form,
			colCount,
			itemRender,
			onSelectedChangeHandle,
			showLabel,
			multiColumn,
			custLabelCol,
			childrenComponents,
			onSwitchChange,
		} = this.props;

		let groupArr = [];
		const formParams = form.getFormParams();
		const labelVisible = showLabel == null || showLabel == true;
		const col = colCount ? colCount : 1;
		const labelCol = labelVisible ? (custLabelCol || `${window.HrmEngineLabelCol}`) : 0;
		const itemProps = {
			ratio1to2: labelVisible && custLabelCol == null,
			style: {
				marginLeft: 0 //labelVisible ? -30 : 0
			},
			tipPosition: 'bottom',
			labelCol: {
				span: labelCol
			},
			wrapperCol: {
				span: 24 - labelCol
			}
		}

		const textAreaProps = {
			minRows: 4,
			maxRows: 4
		}

		formFields.map((fields, i) => {
			let formItems = [];
			fields.items.map((field, index) => {
				const customerRender = itemRender != null ? itemRender[field.domkey[0]] : null;
				const showCheckbox = field.checkbox || false;
				let label = field.label;
				if (showCheckbox)
					label = <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@1id63c@${index}`} content={label} value={field.checkboxValue} onChange={(v) => {
field.checkboxValue = v === '1'; onSelectedChangeHandle && onSelectedChangeHandle(field, v)
}}/>

				let coms;
				if (customerRender == null) {
					coms = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@7zfwo9@${index}`} fieldConfig={{...field, ...textAreaProps, hasBorder: field.viewAttr === 1}} form={form} formParams={formParams} onChange={datas => onSwitchChange && onSwitchChange(datas)}/>;
				} else {
					coms = customerRender(field, textAreaProps, form, formParams);
				}
				Object.assign(itemProps, {
					label,
					error: form.getError(field)
				})
				let col = 1;
				if (multiColumn != null) { //检查有哪些字段需要一行显示多个
					const idx = findIndex(multiColumn, item => item.key === field.domkey[0]);
					if (idx > -1) {
						col = field.colSpan || 1;
						if (multiColumn[idx].labelCol != null) //检查字段是否有配置标题宽度
							Object.assign(itemProps, {
								labelCol: {
									span: multiColumn[idx].labelCol
								},
								wrapperCol: {
									span: 24 - multiColumn[idx].labelCol
								}
							})
					} else {
						Object.assign(itemProps, {
							labelCol: {
								span: labelCol
							},
							wrapperCol: {
								span: 24 - labelCol
							}
						})
					}
				}

				coms != null && formItems.push({
					com: (
						<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@rv2s0m@${index}`} {...itemProps}>
							{coms}
						</WeaFormItem>
					),
					col
				})

				if (childrenComponents && childrenComponents[field.domkey[0]]) {
					childrenComponents[field.domkey[0]]().map(child => formItems.push(child));
				}
			})

			groupArr.push(
				(
					<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@zglygj@${i}`} 
						center={this.props.center != null ? this.props.center : true}
						needTigger={true} 
						title={formFields.length < 2 ? null : fields.title}
						showGroup={true} 
						items={formItems} 
						col={col} 
						fontSize={14}/>
				)
			)
		});

		return groupArr;
	}

	render() {
		const {
			formFields,
			className,
			showError
		} = this.props;
		if (formFields == null)
			return (<div></div>)

		return (
			<div className={className}>
				{this.renderForm()}
			</div>
		)
	}
}