import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop,
	WeaRightMenu,
	WeaLocaleProvider,
} from 'ecCom';
import {
	toJS
} from 'mobx';
import {
	AlertPage,
} from '../../public/learn';
const getLabel = WeaLocaleProvider.getLabel;

import Table from './Table';
import Search from './Search';

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

	componentDidMount() {
		this.props.commonStore.getMenus();
	}

	render() {
		const {
			commonStore,
			hrmHolidayRule
		} = this.props, {
			topTitle,
		} = hrmHolidayRule, {
			topButtons,
			dropMenuDatas,
			topComponentStaticProps,
			table,
		} = commonStore, {
			tableStore,
			canViewTable
		} = table;

		return (
			<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@fbdv8o`} 
				title={getLabel('505561', "假期规则")}
                loading={tableStore.loading}
                buttons={topButtons}
                dropMenuDatas={dropMenuDatas}
                {...topComponentStaticProps}
            >
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@2f5pr8`} datas={dropMenuDatas}>
                	<Search ecId={`${this && this.props && this.props.ecId || ''}_Search@nfyk0e`} />
	            	{canViewTable ? <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@7tmvko`} /> : <AlertPage ecId={`${this && this.props && this.props.ecId || ''}_AlertPage@j8lc03`} />}
                </WeaRightMenu>
            </WeaTop>
		)
	}
}

export default Top