import React from 'react';
import {
	inject,
	observer,
} from 'mobx-react';
import {
	AlertPage,
	Loading,
} from '../../public/learn';

import Top from './Top';
import AuthForm from './AuthForm';
import DispatchImgDialog from "./DispatchImgDialog.js";
import GreetingSetDialog from "./GreetingSetDialog.js";

import "../../style/staffCareReminder.less";

@inject('hrmStaffCareReminder')
@observer
class StaffCareReminder extends React.Component {
	constructor(props) {
		super(props);
	}

	componentWillMount() {
		this.props.hrmStaffCareReminder.getPermissionInfo();

	}

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

	componentDidMount() {
		this.init();
	}

	init = () => {
		this.props.hrmStaffCareReminder.refreshPage();
	}

	render() {
		const {
			hrmStaffCareReminder,
		} = this.props, {
			pageAccessPermission,
		} = hrmStaffCareReminder, {
			hasRight,
			loading
		} = pageAccessPermission;

		if (!hasRight) {
			return loading ? <Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@r1kui7`} size='lg'/> : <AlertPage ecId={`${this && this.props && this.props.ecId || ''}_AlertPage@eti787`} />
		} else {
			return (
				<div>
					<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@sqqjxk`} />
					<AuthForm ecId={`${this && this.props && this.props.ecId || ''}_AuthForm@kpvm4t`} />
					<DispatchImgDialog ecId={`${this && this.props && this.props.ecId || ''}_DispatchImgDialog@dv49a4`} store={hrmStaffCareReminder} />
					<GreetingSetDialog ecId={`${this && this.props && this.props.ecId || ''}_GreetingSetDialog@k576lb`} store={hrmStaffCareReminder} />
				</div>
			)
		}
	}
}

export default StaffCareReminder