import {
	inject,
	observer,
} from 'mobx-react'

import {
	WeaTop,
	WeaTab,
	WeaRightMenu,
	WeaAlertPage,
} from 'ecCom'

import {
	Spin,
	Button,
} from 'antd'
import {
	i18n
} from '../../public/i18n';

import React from 'react'
import * as mobx from 'mobx'
import SysShowItems from './SysShowItems'
import DefineShowItems from './DefineShowItems'
import '../../style/area.css';
import "../../style/cardItemSet.less";
const toJS = mobx.toJS;

@inject('hrmCardItemSet')
@observer
export default class CardItemSet 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.staffCardDisplay();
		}
	}

	componentWillReceiveProps(nextProps) {
		const {
			hrmCardItemSet
		} = this.props;

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

	componentDidMount() {
		const {
			hrmCardItemSet
		} = this.props;

		hrmCardItemSet.mobxDataReset();
		hrmCardItemSet.getRight();
	}

	getDropMenuDatas() {
		const {
			hrmCardItemSet
		} = this.props, {
			menu
		} = hrmCardItemSet, {
			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 == 'custom' || item.menuFun == 'collection' || item.menuFun == 'help' || item.menuFun == 'pageAddress') {
				obj.disabled = true;
			}
			menus.push(obj);
		})

		return menus;
	}

	handleMenuClick(key) {
		this[key] && this[key]();
	}

	getTopMenuBtns() {
		const {
			hrmCardItemSet
		} = this.props, {
			menu
		} = hrmCardItemSet, {
			topMenu
		} = menu;

		let btns = [];
		toJS(topMenu).map((item, index) => {
			btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@k19pik@${index}`} type='primary' onClick={() => this.handleClick(item)} >{item.menuName}</Button>);
		});
		return btns;
	}

	handleClick(item) {
		this[item.menuFun] && this[item.menuFun]();
	}

	log = () => {
		const {
			hrmCardItemSet
		} = this.props, {
			selectedKey
		} = hrmCardItemSet;

		window.setLogViewProps({
			logSmallType: (selectedKey == '0') ? '1028' : '1029',
		});
	}

	save() {
		const {
			hrmCardItemSet
		} = this.props, {
			selectedKey
		} = hrmCardItemSet;

		selectedKey == '0' ? hrmCardItemSet.cardItemsSettingSave() : hrmCardItemSet.userDefineCardItemSave();
	}

	getTabName() {
		const tabName = [{
			key: '0',
			title: i18n.label.sysShowItems()
		}, {
			key: '1',
			title: i18n.label.defineShowItems()
		}, ]
		return tabName;
	}

	render() {
		const {
			hrmCardItemSet
		} = this.props, {
			loading,
			weaTopTitle,
			selectedKey,
			authorized,
		} = hrmCardItemSet;

		if (!authorized) {
			return (
				<div style={{height: '100%'}}>
					{loading ?  <div className='hrm-loading-center'>
									<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@rclaoa`} spinning={loading} size='large'></Spin>
								</div>
						     :	<div className="hrm-wea-alert-page">
		                			<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@v8g25d`}>
						                <div style={{ color: '#000' }}>
						                    {i18n.message.authFailed()}
						                </div>
		                      		</WeaAlertPage>
	                        	</div>
	                }	
                </div>
			)
		} else {
			return (
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@mybn0c`} 
					datas={this.getDropMenuDatas()} 
					onClick={ key=>this.handleMenuClick(key)}
					collectParams={{favname:weaTopTitle,favouritetype:5}}
				>
	                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@dbmxbr`} 
	                    loading
	                    showDropIcon
	                    title={weaTopTitle}
	                    icon={<i className='icon-coms-hrm'/>}
	                    iconBgcolor='#217346'
	                    buttons={this.getTopMenuBtns()}
	                    dropMenuDatas={this.getDropMenuDatas()}
	                    onDropMenuClick={(e) => this.handleMenuClick(e)}
	                >
	                	<div className="hrm-card-item-set">
		                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@8mmoen`}
				                selectedKey={selectedKey}
				                datas={this.getTabName()}
				                keyParam='key'
				                onChange={(key) => hrmCardItemSet.setSelectedKey(key)}
		            		/>
	            			{selectedKey=='0' ? <SysShowItems ecId={`${this && this.props && this.props.ecId || ''}_SysShowItems@0wqtjk`} {...this.props.location}/> : <DefineShowItems ecId={`${this && this.props && this.props.ecId || ''}_DefineShowItems@q1hmoj`} />}
	               		</div>
	                </WeaTop>
	            </WeaRightMenu>
			)
		}

	}
}