import React from 'react'
import {
	toJS
} from 'mobx'
import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaTop,
	WeaTab,
	WeaRightMenu,
	WeaAlertPage,
	WeaLeftRightLayout,
} from 'ecCom'
import {
	Spin,
} from 'antd';
import {
	i18n
} from '../../public/i18n';
import '../../style/onlineAnalysis.css'
import OrganizationTree from '../../coms/OrganizationTree';
import RadioGroup from './RadioGroup'
import Echarts from './Echarts'

@inject('hrmLimitedAnalysis')
@observer
export default class LimitedLoginAnalysis 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.limitedLoginAnalysis();
		}
	}

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

	componentDidMount() {
		this.init();
	}

	init() {
		const {
			hrmLimitedAnalysis
		} = this.props, {
			getRight,
			mobxDatasReset,
		} = hrmLimitedAnalysis

		mobxDatasReset();
		getRight();
	}

	getDropMenuDatas = () => {
		const {
			hrmLimitedAnalysis
		} = this.props, {
			menu
		} = hrmLimitedAnalysis, {
			rightMenu
		} = menu;

		let menus = [];
		toJS(rightMenu).map((item, index) => {
			let obj = {
				key: item.menuFun,
				icon: <i className={`${item.menuIcon}`}/>,
				content: item.menuName,
			}
			if (item.menuFun == 'log' || item.menuFun == 'custom' || item.menuFun == 'collection' || item.menuFun == 'help' || item.menuFun == 'pageAddress') {
				obj.disabled = true;
			}
			menus.push(obj);
		})

		return menus;
	}

	handleMenuClick = (key) => {
		const {
			hrmLimitedAnalysis
		} = this.props, {
			isPanelShow,
			setPanelStatus
		} = hrmLimitedAnalysis;

		isPanelShow && setPanelStatus(false);
		this[key] && this[key]();
	}

	getTabName = () => {
		const tabDatas = [{
			key: '0',
			title: i18n.label.today()
		}, {
			key: '1',
			title: i18n.label.tswk()
		}, {
			key: '2',
			title: i18n.label.tsmth()
		}, {
			key: '3',
			title: i18n.label.tssn()
		}, {
			key: '4',
			title: i18n.label.tsyr()
		}, {
			key: '5',
			title: i18n.label.customTimeSegment()
		}]

		return tabDatas;
	}

	render() {
		const {
			hrmLimitedAnalysis
		} = this.props, {
			authorized,
			loading,
			title,
			key,
			switchKey,
			detachable,
			orgTreeProps
		} = hrmLimitedAnalysis;

		if (!authorized) {
			return (
				<div style={{height: '100%'}}>
					{loading ?  <div className='hrm-loading-center'>
									<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@4aclvb`} spinning={loading} size='large'></Spin>
								</div>
						     :	<div className="hrm-wea-alert-page">
		                			<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@3izaeo`}>
						                <div style={{ color: '#000' }}>
						                    {i18n.message.authFailed()}
						                </div>
		                      		</WeaAlertPage>
	                        	</div>
	                }	
                </div>
			)
		} else {
			const coms = [
				<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@h4pzs1`}
					keyParam={'key'}
					selectedKey={key}
					onChange={key => switchKey(key)}
					datas={this.getTabName()}
				/>,
				<RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@mgo1nh`} />,
				<Echarts ecId={`${this && this.props && this.props.ecId || ''}_Echarts@xa8rwy`} />
			];
			let children;
			// if(detachable){
			// 	children = (
			// 		<WeaLeftRightLayout leftCom={<OrganizationTree {...orgTreeProps} ref='orgTree'/>}>
			// 			{coms}
			// 		</WeaLeftRightLayout>
			// 	)
			// }else{
				children = coms;
			// }
			return (
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@34tuek`} 
					datas={this.getDropMenuDatas()} 
					onClick={ key => this.handleMenuClick(key)}
					collectParams={{favname:title,favouritetype:5}}
				>
					<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@sd4g8u`} 
						title={title}
						icon={<i className='icon-coms-hrm'/>}
						iconBgcolor='#217346'
						loading={true}
						buttons={[]}
						showDropIcon={true}
						dropMenuDatas={this.getDropMenuDatas()}
						onDropMenuClick={e => this.handleMenuClick(e)}
					>
						{children}
					</WeaTop>
				</WeaRightMenu>
			)
		}
	}
}