import {
    observer,
} from 'mobx-react';
import {
    Form,
} from 'antd';
import FormItem from "../form/Item.js";
import { i18n } from '../../../../public/i18n.js'

@observer
class Fields extends React.Component {
    constructor(props) {
        super(props);

        this.datas = [{
            key: "content",
            label: i18n.label.contentShow(),
            type: "checkboxGroup",
            otherParams: {
                initialValue: ["1"]
            },
            options: [{
                value: "1",
                label: i18n.label.personList(),
                disabled: true,
            }, {
                value: "2",
                label: i18n.label.date(),
            }]
        }, {
            key: "fields",
            label:  i18n.label.personListShowFields(),
            type: "checkboxGroup",
            otherParams: {
                initialValue: ["1"]
            },
            options: [{
                value: "1",
                label: i18n.label.name(),
                disabled: true
            }, {
                value: "2",
                label: i18n.label.department(),
            }, {
                value: "3",
                label:  i18n.label.subcompany(),
            }, {
                value: "4",
                label:  i18n.label.sendBless(),
            }]
        }];

        this.layout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 }
        }
    }

    componentDidMount() {
        const { store: { setBarForm,setFormFields }, form } = this.props;
        setBarForm(form);
    }

    componentDidUpdate(prevProps, prevState) {
        const {
            store,
            form
        } = this.props;

        store.setHeadFieldsParams(form.getFieldsValue());
    }


    render() {
        const {
            store
        } = this.props, {
            handleFormChange
        } = store;

        return (
            <div className="head-bar-field">
				<Form ecId={`${this && this.props && this.props.ecId || ''}_Form@50w1yb`}>
					{this.datas.map(data => {
						Object.assign(data,{
							layout:this.layout,
							onChange: handleFormChange
						});
						return <FormItem ecId={`${this && this.props && this.props.ecId || ''}_FormItem@ntdvct@hrm`} data={data} form={this.props.form}/>
					})}
				</Form>
			</div>
        );
    }
}

export default Form.create()(Fields);