import React, {
	Component
} from 'react';
import {
	Button
} from 'antd';
import {
	WeaDialog,
	WeaFormItem,
	WeaNewScroll,
	WeaSearchGroup,
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx';
import FormInfo from './FormInfo';
import _ from 'lodash';

export default class EditorDialog extends Component {
	constructor(props) {
		super(props);
		this.state = {
			width: 600,
			height: 400,
		}
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.formFields !== nextProps.formFields && nextProps.formFields.length > 0) {
			const formFields = nextProps.formFields;
			let rowCount = 0;
			formFields.map(fields => {
				rowCount += fields.items.length;
			});
			let height = formFields.length * 60 + rowCount * 44;
			this.setState({
				height: height > 660 ? 660 : height
			});
		}
	}

	renderCom = () => {
		const {
			form,
			formFields,
			rightMenu,
			children
		} = this.props;
		if (children)
			return children;
		return <FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@6hmdrt`} className="formInfo" form={form} formFields={formFields} menu={rightMenu} />
	}

	render() {
		const {
			title,
			visible,
			form,
			formFields,
			onCancel,
			onReset,
			opButtons,
			moreBtn,
			style
		} = this.props;
		const {
			width,
			height
		} = style || this.state;

		return (
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@pc2rlz`}
				title={title}
                icon="icon-coms-hrm"
                iconBgcolor="#217346"
                visible={visible}
                closable={true}
                onCancel={() => onCancel() }
                buttons={opButtons}
				moreBtn={moreBtn}
                style={{width: width, height: height}}>
                {
                	this.renderCom()
                }
			</WeaDialog>
		)
	}
}