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

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

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

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

		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(false)}
			/> :
			<i 
				className='icon-coms-NoAccountNoDisplay' 
				style={style} 
				title={getLabel('503886','显示无账号人员') }
				onClick={() => clickIcon(true)} 
			/>

		topButtons.unshift(icon);

		return topButtons;
	}

	render() {
		const {
			commonStore,
			hrmOriginalPunchRecord
		} = this.props, {
			topButtons,
			dropMenuDatas,
			topComponentStaticProps,
			table,
			radioGroup,
		} = commonStore, {
			tableStore
		} = table, {
			activeParams
		} = radioGroup;

		return (
			<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@uug5ac`} 
				title={getLabel('504735', "原始打卡记录")}
                loading={tableStore.loading}
                buttons={this.getButtons(topButtons) }
                dropMenuDatas={dropMenuDatas}
                {...topComponentStaticProps}
            >
            	<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@108yci`} datas={dropMenuDatas}>
	            	<div style={{padding: '8px 20px 0px'}} className='report'>
		            	<div>
		            		<RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@a8g6yk`} />
		            	</div>
		            	{
		            		activeParams && <div style={{marginTop: 10}} className='originalPunchRecordList'>
		            							<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@heitsn`} />
		            						</div>
		            	}
	            	</div>
            	</WeaRightMenu>
            </WeaTop>
		)
	}
}

export default Top