import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx';
import {
	WeaFormItem,
} from 'ecCom'
import {
	WeaSwitch
} from 'comsMobx'
import {
	i18n
} from '../../public/i18n';

@inject('hrmConExWarning')
@observer
export default class MainForm extends React.Component {
	constructor(props) {
		super(props);
	}

	getForm = () => {
		const {
			hrmConExWarning
		} = this.props, {
			mainForm,
		} = hrmConExWarning, {
			form,
			conditions,
		} = mainForm, {
			isFormInit,
		} = form;

		const arr = [];
		isFormInit && conditions.map(c => {
			c.items.map((field, index) => {
				arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@p6rng4@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: 8, offset: 1}}
                            wrapperCol={{span: 14}}
                            tipPosition="bottom"
                            error={form.getError(field)}

                        >
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@whskiq@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />
                        </WeaFormItem>)
			})
		})

		arr.push(this.getInstruction());

		return <div className='wea-form-item-group'>{arr}</div>
	}

	getInstruction = () => {
		const {
			hrmConExWarning
		} = this.props, {
			mainForm
		} = hrmConExWarning, {
			explain
		} = mainForm;

		const arr = (explain.includes('；')) ? explain.split('；') : explain.split(';');

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@dhpwlk`}
                label={i18n.label.explain()}
                labelCol={{span: 8, offset: 1}}
                wrapperCol={{span: 14}}
            >
            	{arr.map((ps, index) => 
					(<p dangerouslySetInnerHTML = {{ __html: ps}} />)
				)}
            </WeaFormItem>
		)

	}

	render() {
		return (
			<div className='hrm-dialog-form'>
                {this.getForm()}
            </div>
		)

	}
}