import {
	observer
} from 'mobx-react';
import {
	WeaDialog,
	WeaFormItem,
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx'
import {AttachToNumberField} from '../../util/index.js'

@observer
export default class Dialog extends React.Component {
	constructor(props) {
		super(props);
	}

	customRender = (c, form) => {
		const {store:{isEdit}} = this.props;
		return c.items.map((item, index) => {
			const {
				label,
				labelcol,
				fieldcol,
			} = item;

			return (
				<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4ncrrj@${index}`}
			      label={label}
			      labelCol={{span: labelcol}}
			      wrapperCol={{span: fieldcol}}
			      tipPosition={'bottom'}
			      error={form.getError(item)}
			      style={{padding:'5px 0'}}
	    		>
		    	  <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@swu801@${index}`} fieldConfig={item} form={form} formParams={form.getFormParams()}/>
		    	{item.domkey[0] == 'jobtitlecode' && <AttachToNumberField field={item} form={form} isEdit={isEdit}/>}
		    	</WeaFormItem>
			)
		});
	}

	render() {
		const {
			store,
			dialogSpecial,
		} = this.props, {
			dialogCommon,
			dialogStyle,
		} = store, {
			form
		} = dialogSpecial;

		return (
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@9q3vw8`}
				{...dialogCommon}
				{...dialogSpecial}
				style={dialogStyle}
			>
				<div style={{padding:'20px 10%'}}>
					{ form.render({},{},true,(c) => this.customRender(c,form))}
				</div>
			</WeaDialog>
		);
	}
}