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/vacationRule.less';

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

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

	componentDidMount() {
		this.init();
	}

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

		init();
	}
	
	render() {
		const {
			vacationRuleStore
		} = this.props, {
			authorityStore,
			topStore,
			searchStore,
			tableListStore,
			dialogStore,
			formStore,
			provinceDialogStore,
			provinceFormStore,
		} = vacationRuleStore;

		return (
			<div className='hrm-vacation-rule'>
				<Authority ecId={`${this && this.props && this.props.ecId || ''}_Authority@9psfur`} store={authorityStore}>
					<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@8fpk47`} store={topStore}>
						<Search ecId={`${this && this.props && this.props.ecId || ''}_Search@bj9cmr`} store={searchStore} />
						<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@1ge5v2`} store={tableListStore} />
					</Top>
				</Authority>
				{
					dialogStore.visible && (
						<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@ug4wyd`} store={dialogStore} otherProps={{scalable: true}}>
							<div className='hrm-vacation-rule-form'>
								<CenterSpin ecId={`${this && this.props && this.props.ecId || ''}_CenterSpin@fv8gpt`} loading={formStore.loading}>
									<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@6rtkpx`} store={formStore} />
								</CenterSpin>
							</div>
						</Dialog>
					)
				}
				{
					provinceDialogStore.visible && (
						<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@ug4wyd`} store={provinceDialogStore} otherProps={{className: 'hrm-vacation-province-dialog'}}>
							<div className='hrm-vacation-province-form'>
								<CenterSpin ecId={`${this && this.props && this.props.ecId || ''}_CenterSpin@fv8gpt`} loading={provinceFormStore.loading}>
									<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@6rtkpx`} store={provinceFormStore} />
								</CenterSpin>
							</div>
						</Dialog>
					)
				}
			</div>
		);
	}
}