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

import RadioGroup from './RadioGroup';
import BarCharts from './BarCharts';
import TabsWp from './TabsWp';
import Footnote from './Footnote';

@inject('hrmApplicant') //todo
@observer
export default class Top extends React.Component {
    constructor(props) {
        super(props);
    }

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

    render() {
        const {
            hrmApplicant
        } = this.props, {
            top,
            menus,
            radioGroup,
            barCharts,
            tabs,
        } = hrmApplicant, {
            title,
        } = top, {　　
            buttons,
            dropMenuDatas,
        } = menus;

        return (
            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@zjbzl5`} 
                title={title}
                icon={<i className='icon-coms-hrm'/>}
                iconBgcolor='#217346'
                loading={radioGroup.loading || barCharts.loading || tabs.loading}
                buttons={buttons}
                showDropIcon={true}
                dropMenuDatas={dropMenuDatas}
            >
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@cu2sed`} 
                    datas={dropMenuDatas}
                    collectParams={{favname: title,favouritetype:5}}
                >
                    <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@mah2n6`} />
                    <BarCharts ecId={`${this && this.props && this.props.ecId || ''}_BarCharts@i276gw`} />
                    <TabsWp ecId={`${this && this.props && this.props.ecId || ''}_TabsWp@mldia5`} />
                    <Footnote ecId={`${this && this.props && this.props.ecId || ''}_Footnote@6i7cjy`} />
                </WeaRightMenu>
            </WeaTop>
        )
    }

}