import React from 'react';
import {
	inject,
	observer,
} from 'mobx-react';
import Top from './Top';
import Dialog from './Dialog';
import Import from '../importRelatedComponet/index';
import loadjs from 'loadjs'
import '../../style/spaGroup.less';
import '../../style/import.css'

@inject('hrmImportCommon')
@inject('hrmSpaGroup')
@observer
export default class Group extends React.Component {
	constructor(props) {
		super(props);
	}

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

		const {
			hrmImportCommon,
			hrmSpaGroup: store
		} = this.props;

		store.setQueryParams(query);
		store.exportStore(hrmImportCommon, store);
	}

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

	componentDidMount() {
		this.init();
	}

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

		store.reset();
		store.getHrmGroupForm();
	}

	render() {
		const {
			hrmImportCommon,
			hrmSpaGroup: store
		} = this.props, {
			dialog
		} = store, {
			importDialog
		} = hrmImportCommon;

		return (
			<div className='hrm-group'>
				<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@xylr1i`} store={store}/>
				{
					dialog.visible && <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@u2bpqp`} store={store}/>
				}
				{
					importDialog.visible && <Import ecId={`${this && this.props && this.props.ecId || ''}_Import@ki0pix`} />
				}
			</div>
		);
	}
}