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

const getLabel = WeaLocaleProvider.getLabel;

import RadioGroup from './RadioGroup';
import Table from './Table';

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

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

        return (
            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@22g4sm`} 
                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@lsk3he`} 
                    datas={dropMenuDatas}
                    collectParams={{favname: title,favouritetype:5}}
                >
                    <div style={{padding: 16}}>
                        <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@go6eia`} />
                    </div>
                    <div style={{padding:'0 16px'}}>
                        {hasDatas ? <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@7z19ht`} />
                                  : <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>
        )
    }

}