import React from 'react'
import {
	toJS
} from 'mobx'
import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaTop,
	WeaTab,
	WeaFormItem,
	WeaRightMenu,
	WeaAlertPage,
	WeaDateGroup,
	WeaLocaleProvider,
} from 'ecCom'
import {
	WeaSwitch,
	WeaTableNew,
} from 'comsMobx'
import {
	Row,
	Col,
	Spin,
	Button,
	message,
} from 'antd';
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

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

@inject('hrmLoginFailLog')
@observer
export default class LoginFailLog extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			datas: [{
				name: i18n.label.all(),
				value: '0'
			}, {
				name: i18n.label.today(),
				value: '1'
			}, {
				name: i18n.label.tswk(),
				value: '2'
			}, {
				name: i18n.label.tsmth(),
				value: '3'
			}, {
				name: i18n.label.tssn(),
				value: '4'
			}, {
				name: i18n.label.tsyr(),
				value: '5'
			}, {
				name: i18n.label.preMonth(),
				value: '7'
			}, {
				name: i18n.label.preYear(),
				value: '8'
			}, {
				name: i18n.label.dateRange(),
				value: '6'
			}]
		}
	}

	componentWillMount() {
		let bool = window.location.href.indexOf('/spa/hrm/engine.html') > -1;
		if (bool) {
			document.title = i18n.module.loginFailLog();
		}
	}

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

	componentDidMount() {
		this.init();
	}

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

		mobxDatasReset();
		getRight();
	}

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

		return menus;
	}

	custom = () => {
		const {
			hrmLoginFailLog
		} = this.props, {
			tableStore,
		} = hrmLoginFailLog;

		tableStore.setColSetVisible(true);
		tableStore.tableColSet(true);
	}

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

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

	getTopMenuBtns = () => {
		const {
			hrmLoginFailLog
		} = this.props, {
			menu,
			tableStore
		} = hrmLoginFailLog, {
			topMenu
		} = menu;

		let btns = [];
		toJS(topMenu).map((item, index) => {
			if (item.menuFun !== 'batchDelete') {
				btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ugv3bl@${index}`} type='primary' onClick={() => this.handleClick(item)}>{item.menuName}</Button>);
			} else {
				btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4defo1@${index}`} type='primary' onClick={() => this.handleClick(item)} disabled={tableStore.selectedRowKeys.length > 0 ? false : true} >{item.menuName}</Button>);
			}
		});
		return btns;
	}

	handleClick = (item) => {
		const {
			hrmLoginFailLog
		} = this.props, {
			isPanelShow,
			setPanelStatus
		} = hrmLoginFailLog;

		isPanelShow && setPanelStatus(false);
		this[item.menuFun] && this[item.menuFun]()
	}

	exportExcel = () => { //导出的excel有乱码现象，等待后期解决。
		const {
			hrmLoginFailLog
		} = this.props, {
			tableStore
		} = hrmLoginFailLog;

		tableStore.exportAll();
	}

	getDropPanelButtons() {
		const {
			hrmLoginFailLog
		} = this.props, {
			searchPanel,
			setPanelStatus
		} = hrmLoginFailLog, {
			form
		} = searchPanel;

		const btn = [
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@12t9a7`} type="primary" onClick={() => this.handleSearch()}>{i18n.button.search()}</Button>),
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kluchb`} onClick={() => form.resetConditionValue()}>{i18n.button.reset()}</Button>),
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zsfhma`} onClick={() => setPanelStatus(false)}>{i18n.button.cancel()}</Button>),
		];
		return btn;
	}

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

		return tabDatas;
	}

	getBaseValueOfSearch() {
		const {
			hrmLoginFailLog
		} = this.props, {
			searchPanel
		} = hrmLoginFailLog, {
			form,
			value
		} = searchPanel;

		let val;
		if (form.isFormInit) {
			val = form.getFormParams().name;
		} else {
			val = value;
		}
		return val;
	}

	getPanelComponents() {
		const {
			hrmLoginFailLog
		} = this.props, {
			searchPanel
		} = hrmLoginFailLog, {
			condition,
			form,
			loading
		} = searchPanel, {
			isFormInit
		} = form;

		let arr = [];
		isFormInit && condition.map(c => {
			c.items.map((field, index) => {
				if (field.domkey[0] == 'selectDate') {
					arr.push(this.getWeaDateGroup(1, field.label));
				} else {
					arr.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@0uthqd@${index}`} span={(index%2==0)?10:11} offset={1}>
                              <div style={{marginTop: 20}}>
                                  <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@fsgp8v@${index}`}
                                      label={`${field.label}`}
                                      labelCol={{span: 5}}
                                      wrapperCol={{span: 19}}>
                                          {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@otobgs@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />}
                                  </WeaFormItem>
                              </div>
                  	     </Col>)
				}
			})
		})

		if (loading) {
			return (
				<div className='hrm-loading-center-small' style={{top:'30%'}}>
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@u05ubj`} spinning={loading}></Spin>
                </div>
			)
		} else {
			return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@faq2te`}
				onKeyDown={(e) =>( e.keyCode == 13&& e.target.tagName === "INPUT" )  && this.handleSearch()}
			>{arr}</Row>
		}
	}

	getWeaDateGroup = (index, label) => {
		const {
			hrmLoginFailLog
		} = this.props, {
			searchPanel,
			setSelectedValue,
		} = hrmLoginFailLog, {
			selectedValue
		} = searchPanel, {
			datas
		} = this.state;

		return (<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@96qtnr`} span={(index%2==0)?10:11} offset={1}>
                    <div style={{marginTop: 20}}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@zcx8y0`}
                            label={label}
                            labelCol={{span:5}}
                            wrapperCol={{span: 19}}>
                            	<WeaDateGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaDateGroup@k7lv07`}
						          	isMobx
						          	value={toJS(selectedValue)}
						          	datas={datas}
						          	onChange={v=> setSelectedValue(v)}
        						/>
                        </WeaFormItem>
                    </div>
                </Col>)
	}

	handleSearch() {
		const {
			hrmLoginFailLog
		} = this.props, {
			isPanelShow,
			setPanelStatus,
			getTableInfo
		} = hrmLoginFailLog;

		getTableInfo();
		isPanelShow && setPanelStatus(false);
	}

	handleSearchChange(val) {
		const {
			hrmLoginFailLog
		} = this.props, {
			setBaseValueOfSearch,
			updateFields,
			searchPanel
		} = hrmLoginFailLog, {
			form
		} = searchPanel;

		setBaseValueOfSearch(val);
		form.isFormInit && updateFields(val);
	}

	render() {
		const {
			hrmLoginFailLog
		} = this.props, {
			title,
			tableStore,
			loading,
			authorized,
			isPanelShow,
			key,
			searchPanel,
			setPanelStatus,
			switchKey,
		} = hrmLoginFailLog, {
			conditionCount,
			value,
			form,
		} = searchPanel;

		if (!authorized) {
			return (
				<div style={{height: '100%'}}>
					{loading ?  <div className='hrm-loading-center'>
									<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@1ju245`} spinning={loading} size='large'></Spin>
								</div>
						     :	<div className="hrm-wea-alert-page">
		                			<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@9jek4b`}>
						                <div style={{ color: '#000' }}>
						                    {i18n.message.authFailed()}
						                </div>
		                      		</WeaAlertPage>
	                        	</div>
	                }	
                </div>
			)
		} else {
			return (
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ok4iqc`} 
					datas={this.getDropMenuDatas()} 
					onClick={ key => this.handleMenuClick(key)}
					collectParams={{favname:title,favouritetype:5}}
				>
				        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@lxj66a`} 
				            title={title}
				            icon={<i className='icon-coms-hrm'/>}
				            iconBgcolor='#217346'
				            loading={true}
				            buttons={this.getTopMenuBtns()}
				            showDropIcon={true}
				            dropMenuDatas={this.getDropMenuDatas()}
				            onDropMenuClick={e => this.handleMenuClick(e)}
				        >
					    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@ei0bwe`}
					        searchType={['base','advanced']}
					        showSearchAd={isPanelShow}
					        hasMask={false}
					        advanceHeight={Math.ceil(conditionCount / 2)*52+20}
					        keyParam={'key'}
					        selectedKey={key}
					        onChange={key => switchKey(key)}
					        datas={this.getTabName()}
					        buttonsAd={this.getDropPanelButtons()}
					        searchsBaseValue={form.isFormInit ? form.getFormParams().loginId :  value}
					        setShowSearchAd={  b => setPanelStatus(b)}
					        hideSearchAd={ () => setPanelStatus(false)}
					        searchsAd= {isPanelShow ? this.getPanelComponents():<div></div>}
					        onSearch={() => this.handleSearch()}
					        onSearchChange={val => this.handleSearchChange(val)}
					    />
					    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@f9ukuc`} 
					        comsWeaTableStore={tableStore}
					        hasOrder={true}
					        needScroll={true}
					    />
				    </WeaTop>
				</WeaRightMenu>
			)
		}
	}

}