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

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

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

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

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

        return (
            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@yzmdt7`} 
                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@6dfv3h`} 
                    datas={dropMenuDatas}
                    collectParams={{favname: title,favouritetype:5}}
                >
                    <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@s6u88r`} />
                    <Summary ecId={`${this && this.props && this.props.ecId || ''}_Summary@bgo8k2`} />
                    <BarCharts ecId={`${this && this.props && this.props.ecId || ''}_BarCharts@j2j052`} />
                    <TabsWp ecId={`${this && this.props && this.props.ecId || ''}_TabsWp@5sj0es`} />
                    <Footnote ecId={`${this && this.props && this.props.ecId || ''}_Footnote@179qs2`} />
                </WeaRightMenu>
            </WeaTop>
        )
    }

}