import React from 'react';
import {
	observer,
	inject
} from 'mobx-react';
import {
	Authority,
	Top,
	Search,
	Table,
	Dialog,
	MagicForm,
	CenterSpin,
} from '../../public/valhalla/components/index.js';
import '../../style/vacationType.less';
import TimeSelectionSetting from '../timeSelection';


@inject('vacationTypeStore')
@observer
export default class VacationType extends React.Component {
	componentWillMount() {
		this.props.vacationTypeStore.preMount();
	}

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

	componentDidMount() {
		this.init();
	}

	init = () => {
		const {
			vacationTypeStore
		} = this.props, {
			init
		} = vacationTypeStore;

		init();
	}
	
	render() {
		const {
			vacationTypeStore
		} = this.props, {
			authorityStore,
			topStore,
			searchStore,
			tableListStore,
			dialogStore,
			formStore,
			timeSelectionDialog,
			formTarget
		} = vacationTypeStore;

		return (
			<div className='hrm-vacation-type'>
				<Authority ecId={`${this && this.props && this.props.ecId || ''}_Authority@2nc800`} store={authorityStore}>
					<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@05ykww`} store={topStore}>
						<Search ecId={`${this && this.props && this.props.ecId || ''}_Search@qbkr8b`} store={searchStore} />
						<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@lolhp1`} store={tableListStore} />
					</Top>
				</Authority>
				{
					dialogStore.visible && (
						<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@y6mwgv`} store={dialogStore}>
							<div className='hrm-vacation-type-form'>
								<CenterSpin ecId={`${this && this.props && this.props.ecId || ''}_CenterSpin@7xlb4d`} loading={formStore.loading}>
									<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@b1qdvr`} store={formStore} />
								</CenterSpin>
							</div>
						</Dialog>
					)
				}
				<TimeSelectionSetting ecId={`${this && this.props && this.props.ecId || ''}_TimeSelectionSetting@uwcdoh`} dialog={timeSelectionDialog} formTarget={formTarget}/>
			</div>
		);
	}
}