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

import Tab from './Tab';
import SubTable from './SubTable';

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

    getChildren = () => {
        return (
            <div>
                <Tab ecId={`${this && this.props && this.props.ecId || ''}_Tab@4nkukk`} />
                <SubTable ecId={`${this && this.props && this.props.ecId || ''}_SubTable@rhjsj8`} />
            </div>
        )
    }

    render() {
        const {
            hrmStaffPayrollSummary
        } = this.props, {
            mainDialog,
            closeDialog,
            buttons,
            style,
            dropMenuDatas,
        } = hrmStaffPayrollSummary, {
            title,
            visible,
        } = mainDialog;

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@i6hgyg`}
                title={title}
                icon="icon-coms-hrm"
                iconBgcolor="#217346"
                visible={visible}
                hasScroll={true}
                onCancel={() => closeDialog()}
                buttons={buttons}
                moreBtn={{datas:dropMenuDatas}}
                style={style}
            >
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@16z3ob`} datas={dropMenuDatas}>
                    {visible && this.getChildren()}
                </WeaRightMenu>
            </WeaDialog>
        )

    }
}