import {
    inject,
    observer
} from 'mobx-react'
import {
    WeaTop,
    WeaRightMenu
} from 'ecCom'

import MainTab from './MainTab';
import MainTable from './MainTable';
@inject('hrmRecruitInfo') //todo
@observer
export default class Top extends React.Component {
    constructor(props) {
        super(props);
    }

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

    render() {
        const {
            hrmRecruitInfo
        } = this.props, {
            top,
            mainTable,
            menus,
            main,
        } = hrmRecruitInfo, {
            title,
        } = top, {
            tableStore
        } = mainTable, {　　
            buttons,
            dropMenuDatas,
        } = menus, {
            isSingle
        } = main;

        if (isSingle) {
            return (
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@mivf4j`} datas={dropMenuDatas}>
                    <MainTable ecId={`${this && this.props && this.props.ecId || ''}_MainTable@ysufkz`} {...this.props}/>
                </WeaRightMenu>
            )
        } else {
            return (
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@atpwa9`} 
                    title={title}
                    icon={<i className='icon-coms-hrm'/>}
                    iconBgcolor='#217346'
                    loading={tableStore.loading}
                    buttons={buttons}
                    showDropIcon={true}
                    dropMenuDatas={dropMenuDatas}
                >
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@8n6kyx`} datas={dropMenuDatas}>
                        <MainTab ecId={`${this && this.props && this.props.ecId || ''}_MainTab@sk1aus`} />
                        <MainTable ecId={`${this && this.props && this.props.ecId || ''}_MainTable@3k18c6`} />
                    </WeaRightMenu>
                </WeaTop>
            )
        }

    }
}