import '../../style/onlineAttendance.less';
import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop,
	WeaAlertPage,
	WeaRightMenu
} from 'ecCom';
import FormInfo from '../../coms/FormInfo';
import {
	i18n
} from '../../public/i18n';

@inject('hrmOnlineAttendance')

@observer
export default class OnlineAttendance extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		this.init();
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.init();
		}
	}

	init = () => {
		const {
			hrmOnlineAttendance: store
		} = this.props;
		const {
			checkAuthorized,
			initData
		} = store;
		checkAuthorized('onlinekqsystemset', null, initData);
	}

	render() {
		const {
			hrmOnlineAttendance: store
		} = this.props;
		const {
			containerInitFinished,
			topBtnAndMenu,
			formTarget,
			refreshForm,
			itemRender
		} = store;
		const {
			btns,
			menus
		} = topBtnAndMenu();
		const {
			dataForm: form,
			dataFormFields: fields
		} = formTarget;
		const topProps = {
			title: i18n.module.onlineAttendance(),
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			showDropIcon: true,
			buttons: btns,
			dropMenuDatas: menus
		}
		return (
			<div className="hrm_module_container onlineAttendance">
			{
				containerInitFinished.init && containerInitFinished.authorized &&
				<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@pnp5pl`} {...topProps}>
				{ 
					form && form.isFormInit && 
					<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@tjbduo`} datas={menus}>
						<div className='formCom'>
							<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@epqzcy`} menu={menus} 
								form={form} 
								formFields={fields} 
								itemRender={itemRender}/>
						</div>
					</WeaRightMenu>
				}
				</WeaTop>
			}
			{
				containerInitFinished.init && !containerInitFinished.authorized && 
              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@h1g5nc`}>
                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
              	</WeaAlertPage>
			}
			</div>
		)
	}
}