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

const getLabel = WeaLocaleProvider.getLabel;

import RadioGroup from './RadioGroup';
import MainTable from './MainTable';

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

    render() {
        const {
            hrmStaffPayrollSummary
        } = this.props, {
            top,
            menus,
            mainTable,
            radioGroup,
        } = hrmStaffPayrollSummary, {
            title,
        } = top, {　　
            buttons,
            dropMenuDatas,
        } = menus, {
            tableStore,
            hasDatas,
        } = mainTable;

        return (
            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@td2g2g`} 
                title={title}
                icon={<i className='icon-coms-hrm'/>}
                iconBgcolor='#217346'
                loading={tableStore.loading || radioGroup.loading}
                buttons={buttons}
                showDropIcon={true}
                dropMenuDatas={dropMenuDatas}
            >
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@s5645l`} 
                    datas={dropMenuDatas}
                    collectParams={{favname: title,favouritetype:5}}
                >
                    <div style={{padding: 16}}>
                        <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@rhs8kf`} />
                    </div>
                    <div style={{padding:'0 16px'}}>
                        {hasDatas ?  <MainTable ecId={`${this && this.props && this.props.ecId || ''}_MainTable@9kz14a`} /> 
                                  :  <i 
                                         className='icon-coms-blank' 
                                         style={{fontSize: 50, position:'absolute',top:'50%',left:'50%',marginLeft: -25,marginTop: -50}} 
                                     >
                                        <span style={{display:'block',fontSize: 12}}>{getLabel(83553, '暂无数据')}</span>
                                    </i>}
                       
                    </div>
                </WeaRightMenu>
            </WeaTop>
        )
    }

}