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

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

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

		const arr = [];
		isFormInit && conditions.map(c => {
			c.items.map((field, index) => {
				arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@vxuna5@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: 6, offset: 2}}
                            wrapperCol={{span: 14}}
                        >
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@1oycbg@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />
                        </WeaFormItem>)
			})
		})

		arr.push(this.getInstruction());

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

	getInstruction = () => {
		const {
			hrmAttendanceSetting
		} = this.props, {
			pageFormInfo
		} = hrmAttendanceSetting, {
			prompts
		} = pageFormInfo;

		const arr = []
		toJS(prompts).map((ps, index) => {
			arr.push(<p style={(index == '1' || index == '4') ? {marginTop: 20}: {}}>{ps}</p>);
		});

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@o3beu2`}
                label={i18n.label.explain()}
                labelCol={{span: 6, offset: 2}}
                wrapperCol={{span: 14}}
            >
            	{arr}
            </WeaFormItem>
		)

	}

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

	}
}