import React from 'react'
import {
	toJS
} from 'mobx'
import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaAlertPage,
} from 'ecCom'
import {
	Spin,
} from 'antd'
import {
	i18n
} from '../i18n';
import FormInfo from './FormInfo';
import '../style/otherSetting.less'

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

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

		getAuth();
	}

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

		closeAuth();
	}

	render() {
		const {
			hrmOtherSetting
		} = this.props, {
			main,
		} = hrmOtherSetting, {
			authorized,
			loading
		} = main;

		if (!authorized) {
			return (
				<div style={{height: '100%'}}>
					{loading ?  <div style={{textAlign:'center'}}>
									<Spin spinning={loading}></Spin>
								</div>
						     :	<div className="hrm-wea-alert-page">
		                			<WeaAlertPage>
						                <div style={{ color: '#000' }}>
						                    {i18n.message.authFailed()}
						                </div>
		                      		</WeaAlertPage>
	                        	</div>
	                }	
                </div>
			)
		} else {
			return (
				<div className='otherSetting'>
					<FormInfo />
				</div>
			)
		}
	}


}