import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {WeaFormItem, WeaSearchGroup} from 'ecCom';
import {WeaSwitch} from 'comsMobx';

@observer
export default class Form extends Component{
    getForm = () => {
        const {store: {edit, formProps}} = this.props;
        const {col, form, formFields = []} = formProps;

        const groupArr = [];
        formFields.map((group, i) => {
            const items = [];
            group.items.map((field, j) => {
                const itemProps = {
                    underline: !edit,
                    label: field.label,
                    labelCol: {span: window.HrmLabelCol},
                    wrapperCol: {span: window.HrmWrapperCol}
                }
                items.push({
					com: (
						<WeaFormItem {...itemProps}>
							<WeaSwitch fieldConfig={field} form={form} />
						</WeaFormItem>
					),
					col
				})
            });

            const groupProps = {
                title: group.title,
                showGroup: group.defaultshow,
                items,
                col,
                fontSize: 14
            }

            groupArr.push(
                (
                    <WeaSearchGroup {...groupProps} />
                )
            );
        });

        return groupArr;
    }

    render(){
        return (
            <div className='form_container'>
                {this.getForm()}
            </div>
        )
    }
}