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

@observer
export default class FormInfo extends Component {
	renderFormItem = () => {
		const {
			formFields,
			form,
			colCount,
			itemRender,
			onSelectedChangeHandle,
			showLabel
		} = this.props;
		let formParams = form.getFormParams();
		let formGroupArr = [],
			formItemArr = [];
		const textAreaProps = {
			minRows: 4,
			maxRows: 4
		}
		const labelVisible = showLabel == null || showLabel == true;
		let col = colCount ? colCount : 1;
		formFields.map((fields, i) => {
			formItemArr.length = 0;
			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@ahqv3s@${index}`} id={index} content={label} value={field.checkboxValue} onChange={(v) => {field.checkboxValue = v === '1'; onSelectedChangeHandle && onSelectedChangeHandle()}}/>

				const itemProps = {
					ratio1to2: labelVisible,
					style: {
						marginLeft: 0 //labelVisible ? -30 : 0
					},
					label,
					labelCol: {
						span: labelVisible ? `${window.HrmEngineLabelCol}` : 0
					},
					error: form.getError(field),
					tipPosition: 'bottom',
					wrapperCol: {
						span: labelVisible ? `${window.HrmEngineWrapperCol}` : 24
					}
				}
				let coms;
				if (customerRender == null) {
					coms = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@fuyxml@${index}`} fieldConfig={{...field, ...textAreaProps, hasBorder: field.viewAttr === 1}} form={form} formParams={formParams}/>;
				} else {
					coms = customerRender(field, textAreaProps, form, formParams);
				}
				coms != null && formItemArr.push(
					(
						<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8t6x1w@${index}`} {...itemProps}>
                           {coms}
                    	</WeaFormItem>
					)
				);
			})
			formGroupArr.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@misqjw@${i}`} 
								needTigger={true} 
								title={fields.title}
								showGroup={fields.defaultshow} 
								items={formItemArr} 
								col={col} 
								fontSize={14}/>)
		})

		return {
			formGroupArr,
			formItemArr
		};
	}

	renderFormComponent = () => {
		const {
			formFields,
			form
		} = this.props;
		const {
			isFormInit
		} = form;
		let formGroupArr = [],
			formItemArr = [];
		if ((isFormInit || false) && formFields) {
			const o = this.renderFormItem();
			formGroupArr = o.formGroupArr;
			formItemArr = o.formItemArr;
		}

		return formFields.length > 1 ? formGroupArr : <div className="wea-form-item-group">{formItemArr}</div>;
	}

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

				const itemProps = {
					ratio1to2: true,
					label,
					labelCol: {
						span: `${window.HrmEngineLabelCol}`
					},
					error: form.getError(field),
					tipPosition: 'bottom',
					wrapperCol: {
						span: `${window.HrmEngineWrapperCol}`
					}
				}
				let coms;
				if (customerRender == null) {
					coms = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@adep7y@${index}`} fieldConfig={field} form={form}/>;
				} else {
					coms = customerRender(field, form, formParams);
				}
				coms != null && _arr.push({
					com: (
						<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@mzgjx2@${index}`} {...itemProps}
                        >
                            {coms}
                        </WeaFormItem>
					),
					col: field.colSpan || 1
				})
			})
			arr.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@k27wyt@${i}`} center={true} title={c.title} showGroup={c.defaultshow} items={_arr} fontSize={14}/>);
		})
		return arr;
	}

	render() {
		const {
			formFields,
			menu,
			className,
			showError
		} = this.props;
		if (formFields == null)
			return (<div></div>)
		if (menu)
			return (
				<div className={className}>
					<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@tiyhcp`} datas={menu}>
			                <div className={formFields.length > 1 ? '' : 'hrm-dialog-form'} style={{marginBottom: '0px'}}>
								{formFields.length > 1 ? this.renderGroupForm() : this.renderFormComponent()}
							</div>
					</WeaRightMenu>
				</div>
			)
		return (
                <div className={formFields.length > 1 ? '' : 'hrm-dialog-form'} style={{marginBottom: '0px'}}>
				{formFields.length > 1 ? this.renderGroupForm() : this.renderFormComponent()}
				</div>
		)
	}
}