import React from 'react'
import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaAlertPage,
	WeaLeftRightLayout
} from 'ecCom'
import {
	Spin,
} from 'antd'
import {
	i18n
} from '../../public/i18n';

import '../../style/workHour.css'

import Header from './Header';
import Search from './Search';
import LeftTree from './LeftTree';
import MainTableInfo from './MainTableInfo';
import MainDialog from './MainDialog';
import SubDialog from './SubDialog';

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

	componentWillMount() {
		let bool = window.location.href.indexOf('/spa/hrm/engine.html') > -1;
		if (bool) {
			document.title = i18n.module.generalWorkingHours();
		}
	}

	componentWillReceiveProps(nextProps) {
		const {
			hrmWorkHour
		} = this.props, {
			refreshPage
		} = hrmWorkHour;

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

	componentDidMount() {
		this.init();
	}

	init() {
		const {
			hrmWorkHour
		} = this.props, {
			getAuth,
			forceLeftTreeRefresh,
		} = hrmWorkHour;

		getAuth();
		forceLeftTreeRefresh()
	}

	componentWillUnmount() {
		const {
			hrmWorkHour
		} = this.props, {
			closeAuth,
			clickTreeNode,
		} = hrmWorkHour;

		closeAuth();
		clickTreeNode('0', '0', i18n.module.generalWorkingHours())
	}

	render() {
		const {
			hrmWorkHour
		} = this.props, {
			main,
			leftTree,
		} = hrmWorkHour, {
			authorized,
			loading
		} = main, {
			triggerRefresh
		} = leftTree;

		if (!authorized) {
			return (
				<div style={{height: '100%'}}>
					{loading ?  <div className='hrm-loading-center'>
									<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ajjkzr`} spinning={loading} size='large'></Spin>
								</div>
						     :	<div className="hrm-wea-alert-page">
		                			<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@dfrgav`}>
						                <div style={{ color: '#000' }}>
						                    {i18n.message.authFailed()}
						                </div>
		                      		</WeaAlertPage>
	                        	</div>
	                }	
                </div>
			)
		} else {
			return (
				<div>
					<Header ecId={`${this && this.props && this.props.ecId || ''}_Header@mwgrhk`}>
							<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@8j479t`} 
							    isNew={true}
							    leftCom={<LeftTree ecId={`${this && this.props && this.props.ecId || ''}_LeftTree@8z3gls`} triggerRefresh={triggerRefresh}/>}
							>
								<Search ecId={`${this && this.props && this.props.ecId || ''}_Search@rw82gg`} />
								<MainTableInfo ecId={`${this && this.props && this.props.ecId || ''}_MainTableInfo@5cprh0`} />
							</WeaLeftRightLayout>
					</Header>
					<MainDialog ecId={`${this && this.props && this.props.ecId || ''}_MainDialog@lg2ygv`} />
					<SubDialog ecId={`${this && this.props && this.props.ecId || ''}_SubDialog@3xf8ng`} />
				</div>
			)
		}
	}


}