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

@observer
export default class FormInfo extends Component {
	renderForm = () => {
		const {
			formFields,
			form,
			colCount,
			itemRender,
			onSelectedChangeHandle,
			showLabel
		} = this.props;
		
		let groupArr = [];
		const formParams = form.getFormParams();
		const labelVisible = showLabel == null || showLabel == true;
		const col = colCount ? colCount : 1;
		const itemProps = {
			ratio1to2: labelVisible,
			style: {
				marginLeft: 0 //labelVisible ? -30 : 0
			},
			labelCol: {
				span: labelVisible ? `${window.HrmEngineLabelCol}` : 0
			},
			// error: form.getError(field),
			tipPosition: 'bottom',
			wrapperCol: {
				span: labelVisible ? `${window.HrmEngineWrapperCol}` : 24
			}
		}
		const textAreaProps = {
			minRows: 4,
			maxRows: 4
		}
		
		formFields.map((fields, i) => {
			let formItems = [];
			fields.items.map(field => {
				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@uxsfzh@${i}`} id={index} content={label} value={field.checkboxValue} onChange={(v) => {field.checkboxValue = v === '1'; onSelectedChangeHandle && onSelectedChangeHandle()}}/>
				
				let coms;
				if (customerRender == null) {
					coms = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@cmoso9@${i}`} fieldConfig={{...field, ...textAreaProps, hasBorder: field.viewAttr === 1}} form={form} formParams={formParams}/>;
				} else {
					coms = customerRender(field, textAreaProps, form, formParams);
				}
				Object.assign(itemProps, {label, error: form.getError(field)})
	
				coms != null && formItems.push({
					com: (
						<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@6f5qf9@${i}`} {...itemProps}>
							{coms}
						</WeaFormItem>
					),
					col: 1
				})
			})
			
			groupArr.push(
				(
					<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@b75wrh@${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>
		)
	}
}