import '../../style/matrix.less';
import React, {
	Component
} from 'react';
import {
	WeaTop,
	WeaAlertPage,
	WeaLeftRightLayout
} from 'ecCom';
import {
	inject,
	observer
} from 'mobx-react';
import OrganizationTree from '../../coms/OrganizationTree';
import Tabs from '../../coms/Tabs';
import Dashboard from './Dashboard';
import {
	i18n
} from '../../public/i18n';
import {
	flattenDeep
} from 'lodash';

@inject("hrmMatrix")

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

	componentDidMount() {
		this.init();
	}

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

	init = () => {
		const {
			hrmMatrix: store,
		} = this.props;
		const {
			checkAuthorized,
			initData
		} = store;
		checkAuthorized('matrix/pages/matrixList', null, initData, null, true);
	}

	render() {
		const {
			hrmMatrix: store
		} = this.props;
		const {
			containerInitFinished,
			tabConfig,
			topMenusDef,
			matrixList,
			orgTreeProps,
			authorizationInfo,
			formTarget
		} = store;

		const menus = topMenusDef();

		const topProps = {
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			title: i18n.module.matrixSetting(),
			showDropIcon: true,
			dropMenuDatas: menus
		}

		const {conditionForm: form, conditionFormFields: fields} = formTarget;
		const tabProps = {
			tabConfig: tabConfig,
			activeTabInfo: {
				activeTabKey: tabConfig.activeTabKey,
				activeTabIndex: 0
			},
			rightMenu: menus,
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
		}

		let coms;
		if(containerInitFinished.detachable){
			coms = (
				<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@bo3rht`} leftCom={<OrganizationTree ecId={`${this && this.props && this.props.ecId || ''}_OrganizationTree@fgq1ij`} {...orgTreeProps} ref='orgTree'/>}>
					{
						flattenDeep(store.toJS(matrixList)).length === 0
						?
						<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@v9030u`} {...tabProps}>
							<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@nnvmmx`} icon={<i className="icon-coms-NoData" />} iconSize={120} paddingTop={'15%'}>
								<div style={{ color: '#000' }}>{i18n.message.dataNone()}</div>
							</WeaAlertPage>
						</Tabs>
						:
						<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@errw4u`} {...tabProps}>
							<Dashboard ecId={`${this && this.props && this.props.ecId || ''}_Dashboard@1hmsct`}/>
						</Tabs>
					}
				</WeaLeftRightLayout>
			)
		}else if(!authorizationInfo.hasMenuRight && flattenDeep(store.toJS(matrixList)).length === 0){
			coms = (
				<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@92ayzw`} {...tabProps}>
					<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@kk96md`} icon={<i className='icon-coms-Edition' />} iconSize={120} paddingTop={'15%'}>
						<div style={{ color: '#000' }}>{i18n.message.dataNone()}</div>
					</WeaAlertPage>
				</Tabs>
			)
		}else{
			coms= (
				<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@vx81w3`} {...tabProps}>
					<Dashboard ecId={`${this && this.props && this.props.ecId || ''}_Dashboard@potbl0`}/>
				</Tabs>
			)
		}

		return (
			<div className="hrm_module_container matrix">
				{
					containerInitFinished.init && containerInitFinished.authorized && 
  	              	<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@y7tk49`} {...topProps}>
  	              	{
						// (!authorizationInfo.hasMenuRight && flattenDeep(store.toJS(matrixList)).length === 0)
						// ?
						// <WeaAlertPage icon={<i className='icon-coms-Edition' />} iconSize={120} paddingTop={'15%'}>
		                //   	<div style={{ color: '#000' }}>{i18n.message.dataNone()}</div>
		              	// </WeaAlertPage>
						// :
						coms
					}
	              	</WeaTop>
				}
				{
					containerInitFinished.init && !containerInitFinished.authorized && 
	              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@l0a7fz`}>
	                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
	              	</WeaAlertPage>
				}
			</div>
		)
	}
}