import '../../style/orgChart.less';
import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop,
	WeaAlertPage,
	WeaRightMenu,
	WeaNewScroll,
	WeaDialog
} from 'ecCom';
import {
	Spin
} from 'antd';
import {
	i18n
} from '../../public/i18n';
import Chart from './Chart';

@inject('hrmOrgChart')

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

	componentDidMount() {
		this.init();
		window.addEventListener('message', this.messageHandle, false);
	}

	componentWillUnmount() {
		window.removeEventListener('message', this.messageHandle, false);
	}

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

	messageHandle = (e) => {
		const {
			hrmOrgChart: store
		} = this.props;
		if (e.data.act == 'initOrgChart') {
			store.onInitOrgChart(e.data.status);
		} else if (e.data.act == 'callChild') {
			store.showSpin(e.data.status);
		}
	}

	init = (refresh = false) => {
		const {
			hrmOrgChart: store
		} = this.props;
		const {
			checkAuthorized,
			initData
		} = store;
		checkAuthorized('orgchart', null, () => initData(refresh));
	}

	render() {
		const {
			hrmOrgChart: store
		} = this.props;
		const {
			containerInitFinished,
			topBtnAndMenu,
			spinning,
			refreshOrgForm,
			dialogParams,
			getDialogOpButtons
		} = store;
		const {
			btns,
			menus
		} = topBtnAndMenu();
		const topProps = {
			title: i18n.module.orgChart(),
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			showDropIcon: true,
			buttons: btns,
			dropMenuDatas: menus
		}
		const dProps = {
			...dialogParams,
			buttons: getDialogOpButtons(),
			className: "hrmDialog"
		}
		return (
			<div className="hrm_module_container orgChart">
			{
				containerInitFinished.init && containerInitFinished.authorized &&
				<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@hkptkq`} spinning={spinning}>
					<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@6aoj60`} {...topProps}>
						<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@i2mv7q`} datas={menus}>
						<Chart ecId={`${this && this.props && this.props.ecId || ''}_Chart@eick3a`} store={store} />
						</WeaRightMenu>
					</WeaTop>
				</Spin>
			}
			{
				containerInitFinished.init && !containerInitFinished.authorized && 
              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@fp1ynu`}>
                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
              	</WeaAlertPage>
			}
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@hoj8xk`} {...dProps}>
			{dProps.coms}
			</WeaDialog>
			</div>
		)
	}
}