import React from 'react'
import * as mobx from 'mobx'

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

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

import {
	Spin,
	Button
} from 'antd'

import {
	WeaSwitch
} from 'comsMobx'

import {
	i18n
} from '../../public/i18n';

const toJS = mobx.toJS;

import Info from './Info'
import {
	HocFactory
} from './HocFactory'

import AuthAdjust from '../authAdjust/index'
import {addContentPath} from '../../util/index.js'

const WrappedForm = HocFactory(Info);

@inject('hrmTrialSet')
@observer
export default class Trial 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.trial();
		}
	}

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

	componentDidMount() {
		this.init();
	}

	init() {
		const {
			hrmTrialSet
		} = this.props, {
			mobxDataReset,
			getRight
		} = hrmTrialSet;

		mobxDataReset();
		getRight();
	}

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

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

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

	getDropMenuDatas() {
		const {
			hrmTrialSet
		} = this.props, {
			menu,
			saveLoading,
		} = hrmTrialSet, {
			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;
			}
			if (item.menuFun == 'save') {
				obj.disabled = saveLoading;
			}
			menus.push(obj);
		})

		return menus;
	}

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

	log = () => {
		window.setLogViewProps({
			logSmallType: '20050',
		});
	}

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

		save();
	}

	getTabName() {
		const tabName = [{
				key: '0',
				title: i18n.module.trial()
			},
			// {
			// 	key: '1',
			// 	title: i18n.label.untreatedMatters()
			// },
			{
				key: '2',
				title: i18n.module.authAdjust()
			}
		]

		return tabName;
	}

	render() {
		const {
			hrmTrialSet
		} = this.props, {
			date,
			weaTopTitle,
			selectedKey,
			authorized,
			setSelectedKey,
			tabOne,
			loading,
		} = hrmTrialSet;

		if (!authorized) {
			return (
				<div style={{height: '100%'}}>
                    {loading ?  <div className='hrm-loading-center'>
                                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@x4wimp`} spinning={loading} size='large'></Spin>
                                </div>
                             :  <div className="hrm-wea-alert-page">
                                    <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@fm5u6t`}>
                                        <div style={{ color: '#000' }}>
                                            {i18n.message.authFailed()}
                                        </div>
                                    </WeaAlertPage>
                                </div>
                    }   
                </div>
			)
		} else {
			return (
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@h4e2zs`} 
					datas={(selectedKey == '0') ? this.getDropMenuDatas() : []} 
					onClick={ key => this.handleMenuClick(key)}
					collectParams={{favname:weaTopTitle,favouritetype:5}}
				>
			        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@zx3t5h`} 
			            title={weaTopTitle}
			            icon={<i className='icon-coms-hrm'/>}
			            iconBgcolor='#217346'
			            loading={true}
			            buttons={(selectedKey == '0') ? this.getTopMenuBtns() : []}
			            showDropIcon={true}
			            dropMenuDatas={this.getDropMenuDatas()}
			            onDropMenuClick={(e) => this.handleMenuClick(e)}
			        >
			            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@mrijje`}
					        selectedKey={selectedKey}
					        datas={this.getTabName()}
					        keyParam='key'
					        onChange={(key) => setSelectedKey(key)}
			     	/>
			     		<WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@qxyc6n`} />
			     		{selectedKey == '0' && <WrappedForm ecId={`${this && this.props && this.props.ecId || ''}_WrappedForm@rd130o`} {...tabOne} isFormInit={tabOne.form.isFormInit} />}	
			            {selectedKey == '1' && <div><iframe src={addContentPath("/hrm/resign/Resign.jsp?resourceid=")} onload="update();" id="tabcontentframe" name="tabcontentframe" class="flowFrame" frameborder="0" scrolling="auto" style={{width: '100%',height: 248}} ></iframe></div>}
			            {selectedKey == '2' && <div className='hrm_status_adjust'><AuthAdjust ecId={`${this && this.props && this.props.ecId || ''}_AuthAdjust@n6b6az`} hideTop={true}/></div>}
			        </WeaTop>
			    </WeaRightMenu>
			)
		}
	}

}