import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop,
	WeaRightMenu,
	WeaLocaleProvider,
} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

import {
	Loading,
} from '../../public/learn';

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

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

	componentDidMount() {
		this.props.hrmVacationBalanceReportCopy.getRightMenu();
	}

	getButtons = (topButtons) => {
		const {
			hrmVacationBalanceReportCopy
		} = this.props, {
			isNoAccountShow,
			clickIcon,
			chainCall,
			tableHeihgt
		} = hrmVacationBalanceReportCopy;

		const style = {
			padding: 6,
			border: '1px solid #D9D9D9',
			cursor: 'pointer'
		};

		if (isNoAccountShow) Object.assign(style, {
			color: '#2DB7F5'
		});

		const icon = isNoAccountShow ?
			<i className='icon-coms-ShowNoAccount' 
				style={style} 
				title={getLabel('503885','隐藏无账号人员')} 
				onClick={() => clickIcon(chainCall)}
			/> :
			<i className='icon-coms-NoAccountNoDisplay' 
				style={style} 
				title={getLabel('503886','显示无账号人员')}
				onClick={() => clickIcon(chainCall)} 
			/>

		topButtons.unshift(icon);

		return topButtons;
	}

	renderContent = (height) => {
		return (<div className='layout' style={{overflow:"hidden"}}>
					<div className='layoutContent includeFoot'>
			            <div className='searchGroup' style={{padding: 0}} id="searchGroup">
							<RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@qx4enz`} /> 
						</div>
			            <div className='vacationBalanceReportList' style={{ height:this.tableHeihgt-100 }}>
			            	<Resize ecId={`${this && this.props && this.props.ecId || ''}_Resize@w7ad2n`}><Table ecId={`${this && this.props && this.props.ecId || ''}_Table@m7mrst`} /></Resize>
			            </div>
					</div>
            	</div>)

	}


	render() {
		const {
			hrmVacationBalanceReportCopy: store,
		} = this.props, {
			topButtons,
			dropMenuDatas,
			topComponentStaticProps,
			table,
			radioGroup,
			setDomRef
		} = store, {
			loading
		} = table, {
			height
		} = radioGroup;

		return (
			<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@cizn1s`}
				ref={dom => setDomRef(dom, 'top')}
				title={getLabel('505250', "员工假期余额")}
                loading={loading}
                buttons={this.getButtons(topButtons)}
                dropMenuDatas={dropMenuDatas}
                {...topComponentStaticProps}
            >
            	<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@2me353`} datas={dropMenuDatas}>
                 	{this.renderContent(height)}
            	</WeaRightMenu>
            </WeaTop>
		)
	}
}

export default Top