import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaTop,
} from 'ecCom'
import {
	Button,
} from 'antd'
import {
	i18n
} from '../../public/i18n';

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

	getTopMenuBtns = () => {
		const {
			hrmAttendanceSetting
		} = this.props, {
			save,
			pageFormInfo
		} = hrmAttendanceSetting, {
			loading
		} = pageFormInfo;

		const btns = [
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j9m45c`} type='primary' disabled={loading} onClick={() => save('main')}>{i18n.button.save()}</Button>)
		]

		return btns
	}


	getDropMenuDatas = () => {
		const {
			hrmAttendanceSetting
		} = this.props, {
			pageFormInfo
		} = hrmAttendanceSetting, {
			loading
		} = pageFormInfo;

		const menu = [{
			key: '0',
			icon: <i className='icon-coms-Preservation' />,
			content: i18n.button.save(),
			disabled: loading,
		}, {
			key: '3',
			icon: <i className='icon-coms-Print-log' />,
			content: i18n.button.log(),
		}, ];

		return menu
	}

	handleMenuClick = (key) => {
		const {
			hrmAttendanceSetting
		} = this.props, {
			save
		} = hrmAttendanceSetting;

		key == '0' && save('main');

		key == '3' && window.setLogViewProps({
			logSmallType: '20039'
		});

	}

	render() {
		const {
			hrmAttendanceSetting
		} = this.props, {
			main
		} = hrmAttendanceSetting, {
			title,
		} = main;

		return (
			<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@sb74se`} 
				title={title}
				icon={<i className='icon-coms-hrm'/>}
				iconBgcolor='#217346'
				loading={true}
				buttons={this.getTopMenuBtns()}
				showDropIcon={true}
				dropMenuDatas={this.getDropMenuDatas()}
				onDropMenuClick={e => this.handleMenuClick(e)}
			>
				{this.props.children}
			</WeaTop>
		)

	}
}