import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop,
	WeaRightMenu,
} from 'ecCom';
import Tab from './Tab';

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

	render() {
		const {
			hrmStaffCareReminder
		} = this.props, {
			topButtons,
			dropMenuDatas,
			topComponentStaticProps,
			table,
			tab,
			tabs,
			formElements,
			toptitle
		} = hrmStaffCareReminder, {
			comsWeaTableStore
		} = table, {
			selectedKey
		} = tab, {
			activeKey
		} = tabs;

		let loading;

		if (selectedKey === '0' && activeKey === '0') {
			loading = comsWeaTableStore.loading
		} else {
			loading = formElements.loading;
		}

		return (
			<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@uhbi0a`} 
				title={toptitle()}
                loading={loading}
                buttons={topButtons}
                dropMenuDatas={dropMenuDatas}
                {...topComponentStaticProps}
            >
            	<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@4a40fr`} datas={dropMenuDatas}>
            		<Tab ecId={`${this && this.props && this.props.ecId || ''}_Tab@3564dx`} />
		        </WeaRightMenu>
            </WeaTop>
		)
	}
}

export default Top