import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaFormItem,
	WeaLocaleProvider
} from 'ecCom'
import {
	Spin,
	Button
} from 'antd'
import {
	WeaSwitch
} from 'comsMobx'
const getLabel = WeaLocaleProvider.getLabel;

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

	componentDidMount() {
		const {
			hrmOtherSetting
		} = this.props, {
			getFormInfo
		} = hrmOtherSetting;

		getFormInfo();
	}

	componentWillUnmount() {
		const {
			hrmOtherSetting
		} = this.props, {
			refreshFormInfo
		} = hrmOtherSetting;

		refreshFormInfo();
	}

	getForm = () => {
		const {
			hrmOtherSetting
		} = this.props, {
			formInfo,
			synchro,
			hasSynchroRight,
		} = hrmOtherSetting, {
			form,
			conditions,
		} = formInfo, {
			isFormInit,
		} = form;

		let arr = [];
		isFormInit && conditions.map(c => {
			const len = c.items.length;
			c.items.map((field, index) => {
				const {
					domkey
				} = field;

				arr.push(<WeaFormItem
                            label={`${field.label}`}
                            labelCol={{span: 4, offset: (len > 1) ? 8 : 9}}
                            wrapperCol={{span: 8}}
                            error={form.getError(field)}
                            tipPosition="bottom"
                            style={(index == 0) ? {marginTop:30} : {}}
                        >
                                <WeaSwitch fieldConfig={field} form={form} formParams={form.getFormParams()} />
                        		{
                        			(domkey[0] === 'defaultLinkMode' && hasSynchroRight) && (<div className='synchro'>
                        				<Button type="primary" onClick={() => synchro()}>{getLabel(18240, '同步')}</Button>
                        			</div>)
                        		}
                        </WeaFormItem>)
			})
		})
		return <div>{arr}</div>
	}

	render() {
		const {
			hrmOtherSetting,
		} = this.props, {
			formInfo,
		} = hrmOtherSetting, {
			date,
			loading,
		} = formInfo;

		return (<div>
					{loading ? 	<div className='hrm-loading-center-small'>
									<Spin spinning={loading}></Spin>
							   	</div>
				             :  <div>
				                    {this.getForm()}
				                </div>
					}
				</div>)
	}
}