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

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

	componentDidMount() {
		this.props.hrmConExWarning.getFormInfo();
	}

	componentWillUnmount() {
		this.props.hrmConExWarning.refreshFormInfo();
	}

	getForm = () => {
		const {
			hrmConExWarning
		} = this.props, {
			subForm,
		} = hrmConExWarning, {
			form,
			conditions,
		} = subForm, {
			isFormInit,
		} = form;
		console.log(toJS(conditions)); //todo
		return
		let arr = [];
		isFormInit && conditions.map(c => {
			c.items.map((field, index) => {
				arr.push(<WeaFormItem
                            label={`${field.label}`}
                            labelCol={{span: 6, offset: 2}}
                            wrapperCol={{span: 15}}
                            error={form.getError(field)}
                            tipPosition="bottom"
                        >
                                <WeaSwitch fieldConfig={field} form={form} formParams={form.getFormParams()} onChange={cb => this.handleChange(cb)}/>
                        </WeaFormItem>)
			})
		})
		return <div className='wea-form-item-group'>{arr}</div>
	}

	handleChange = (cb) => {}

	getDropMenuDatas = () => {
		const {
			hrmConExWarning
		} = this.props, {
			subForm
		} = hrmConExWarning, {
			loading
		} = subForm;

		const menu = [{
			key: '0',
			icon: <i className='icon-coms-Preservation' />,
			content: i18n.button.save(),
			disabled: loading,
		}];

		return menu
	}

	handleMenuClick = (key) => {
		const {
			hrmConExWarning,
		} = this.props, {
			save,
		} = hrmConExWarning;

		key == '0' && save();
	}

	render() {
		const {
			hrmConExWarning,
		} = this.props, {
			subForm,
		} = hrmConExWarning, {
			date,
			loading,
		} = subForm;

		return (<div style={{height: '100%'}}>
					{loading ? 	<div style={{textAlign: 'center', paddingTop: 110}}>
									<Spin spinning={loading}></Spin>
							   	</div>
							 : 	<WeaRightMenu datas={this.getDropMenuDatas()} onClick={ key => this.handleMenuClick(key)}>
				                	<div className='hrm-dialog-form'>
				                	    {this.getForm()}
				                	</div>
                				</WeaRightMenu>
					}
				</div>)
	}
}