import React from 'react';
import {
	inject,
	observer,
} from 'mobx-react';
import {
	WeaDialogFooter,
} from 'ecCom';
import Form from '../group/Form';
import {
	Loading,
} from '../../public/learn';
import '../../style/groupAdvice.less';

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

	componentWillMount() {
		const {
			query
		} = this.props.location;

		const {
			hrmGroupAdvice: store
		} = this.props;

		store.extractParamsFromURL(query);
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.init();
		}
	}

	componentDidMount() {
		this.init();
	}

	init = () => {
		const {
			hrmGroupAdvice: store
		} = this.props;

		store.getOrgGroupSuggestForm();
	}

	render() {
		const {
			hrmGroupAdvice: store
		} = this.props, {
			f,
			footerButtons,
		} = store, {
			loading
		} = f;

		if (loading) {
			return <Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@euvdj4`} />
		}
		return (
			<div className='groupAdvice'>
				<div className='form'>
					<Form ecId={`${this && this.props && this.props.ecId || ''}_Form@4c8nwo`} datas={f}/>
				</div>
				<WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@8539oi`} buttons={footerButtons} moreBtn={{datas:[]}}/>
			</div>
		);
	}
}