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

import {
	WeaTop,
	WeaFormItem,
	WeaRightMenu,
	WeaAlertPage,
	WeaSearchGroup,
	WeaPopoverHrm,
} from 'ecCom'

import {
	Spin,
	Button,
} from 'antd'

import {
	WeaSwitch
} from 'comsMobx'

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

import React from 'react'
import * as mobx from 'mobx'
const toJS = mobx.toJS;

@inject('hrmEntryMaintenanceSet')
@observer
export default class EntryMaintenance 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.entryMaintenanceSettings();
		}
	}

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

	componentDidMount() {
		this.init();
	}

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

		mobxDataReset();
		getRight();
	}

	getDropMenuDatas() {
		const {
			hrmEntryMaintenanceSet
		} = this.props, {
			menu
		} = hrmEntryMaintenanceSet, {
			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 {
			hrmEntryMaintenanceSet
		} = this.props, {
			menu
		} = hrmEntryMaintenanceSet, {
			topMenu
		} = menu;

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

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

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

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

	getForm() {
		const {
			hrmEntryMaintenanceSet
		} = this.props, {
			content
		} = hrmEntryMaintenanceSet, {
			form,
			condition,
			explanation
		} = content, {
			isFormInit
		} = form;

		let arr = [];
		let formParams = form.getFormParams();

		isFormInit && condition.map((c, index) => {
			let _arr = [];
			c.items.map((field, index) => {
				_arr.push({
					com: (
						<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@vckwes@${index}`}
	                        label={`${field.label}`}
	                        labelCol={{span: `${field.labelcol}`}}
	                        wrapperCol={{span: `${field.fieldcol}`}}
	                        error={form.getError(field)}
  							tipPosition="bottom"
	                        style={{width: '76%',marginLeft: '12%'}}
	                    >
	                        <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@uxrvk5@${index}`} fieldConfig={field} form={form} formParams={formParams} />
	                    </WeaFormItem>
					),
					colSpan: 1
				})
			})
			_arr.push({
				com: (
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7wqg91@${index}`}
	                    label={`${explanation[index].showname}`}
	                    labelCol={{span: 6}}
	                    wrapperCol={{span: 18}}
	                    style={{width: '76%',marginLeft: '12%'}}
	                >
	                    <ul>
	                     	{this.getExplanation(explanation[index].showvalues)}
	                    </ul>      
	                </WeaFormItem>
				),
				colSpan: 1
			});
			arr.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@msaoi7@${index}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={_arr} col={1} />)
		})

		return arr;
	}

	getExplanation(explanations = []) {
		let arr = [];
		explanations.map(item => {
			arr.push(<li>{item}</li>)
		});
		return arr
	}

	render() {
		const {
			hrmEntryMaintenanceSet
		} = this.props, {
			loading,
			weaTopTitle,
			authorized,
			content,
			date
		} = hrmEntryMaintenanceSet, {
			cLoading
		} = content;

		if (!authorized) {
			return (
				<div style={{height: '100%'}}>
					{loading ?  <div className='hrm-loading-center'>
									<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@kd7pkg`} spinning={loading} size='large'></Spin>
								</div>
						     :	<div className="hrm-wea-alert-page">
		                			<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@3ckn2o`}>
						                <div style={{ color: '#000' }}>
						                    {i18n.message.authFailed()}
						                </div>
		                      		</WeaAlertPage>
	                        	</div>
	                }	
                </div>
			)
		} else {
			return (
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@2142s1`} 
					datas={this.getDropMenuDatas()} 
					onClick={ key => this.handleMenuClick(key)}
					collectParams={{favname:weaTopTitle,favouritetype:5}}
				>
		            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@wtnm1q`} 
		                title={weaTopTitle}
		                icon={<i className='icon-coms-hrm'/>}
		                iconBgcolor='#217346'
		                loading={true}
		                buttons={this.getTopMenuBtns()}
		                showDropIcon={true}
		                dropMenuDatas={this.getDropMenuDatas()}
		                onDropMenuClick={(e) => this.handleMenuClick(e)}
		            />
		            <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@12rg8h`} />
		           	{!cLoading && <div className='hrm-form-english'>{this.getForm()}</div>}
		        </WeaRightMenu>
			)
		}

	}
}