import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaTab,
	WeaFormItem,
	WeaRightMenu,
} from 'ecCom'
import {
	WeaSwitch
} from 'comsMobx'
import {
	Row,
	Col,
	Spin,
	Modal,
	Button,
} from 'antd'
import {
	i18n
} from '../../public/i18n';
const confirm = Modal.confirm;

import MainTable from './MainTable';

@inject('hrmContractType')
@observer
export default class Tab extends React.Component {
	constructor(props) {
		super(props);
	}

	componentWillUnmount() {
		this.props.hrmContractType.refreshSearch();
	}

	getSearchPanelButtons = () => {
		const {
			hrmContractType
		} = this.props, {
			mainTab,
			changeSearchPanelStatus,
		} = hrmContractType, {
			form
		} = mainTab;

		const btn = [
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mzipb0`} type="primary" onClick={() => this.handleSearch()}>{i18n.button.search()}</Button>),
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@a201c8`} onClick={() => form.reset()}>{i18n.button.reset()}</Button>),
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@715stj`} onClick={() => changeSearchPanelStatus(false)}>{i18n.button.cancel()}</Button>),
		];

		return btn;
	}

	handleSearch = () => {
		const {
			hrmContractType
		} = this.props, {
			changeSearchPanelStatus,
			getTableInfo,
			mainTab,
		} = hrmContractType, {
			isPanelShow
		} = mainTab

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

	getPanelComponents = () => {
		const {
			hrmContractType
		} = this.props, {
			mainTab,
		} = hrmContractType, {
			conditions,
			form,
			loading
		} = mainTab, {
			isFormInit
		} = form;

		let arr = [];
		isFormInit && conditions.map(c => {
			c.items.map((field, index) => {
				arr.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pp3dl6@${index}`} span={10} offset={1}>
                              <div style={{marginTop: 20}}>
                                  <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ib28dh@${index}`}
                                      label={`${field.label}`}
                                      labelCol={{span: 6}}
                                      wrapperCol={{span: 18}}>
                                          {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@119uq2@${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@xsklzn`} spinning={loading}></Spin>
                </div>
			)
		} else {
			return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@yukx99`} onKeyDown={(e) =>( e.keyCode == 13 && e.target.tagName === "INPUT")  && this.handleSearch()}>{arr}</Row>
		}
	}

	handleSearchChange = (val) => {
		const {
			hrmContractType
		} = this.props, {
			mainTab,
		} = hrmContractType, {
			form
		} = mainTab;

		form.updateFields({
			typeName: {
				value: val
			}
		});
	}

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

		const len = mainTable.tableStore.selectedRowKeys.length;

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

		return menus;
	}

	handleMenuClick = (key) => {
		const {
			hrmContractType,
		} = this.props, {
			mainTab,
			changeSearchPanelStatus,
		} = hrmContractType, {
			isPanelShow
		} = mainTab;

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

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

	new = () => {
		const {
			hrmContractType
		} = this.props, {
			openDialog
		} = hrmContractType;

		openDialog();
	}

	batchDelete = () => {
		const {
			hrmContractType
		} = this.props, {
			mainTable,
			setSelectedRowKeys,
		} = hrmContractType;

		const keys = toJS(mainTable.tableStore.selectedRowKeys).toString();

		setSelectedRowKeys(keys);

		this.showConfirm();
	}

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

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

	showConfirm = () => {
		let _this = this;
		confirm({
			title: i18n.confirm.defaultTitle(),
			content: i18n.confirm.batchDeleteConfirm(),
			okText: i18n.button.ok(),
			cancelText: i18n.button.cancel(),
			onOk() {
				_this.onOk()
			},
			onCancel() {
				_this.props.hrmContractType.resetSelectedRowKeys();
				return false
			},
		});
	}

	onOk = () => {
		this.props.hrmContractType.deleteTableInfo();
	}



	render() {
		const {
			hrmContractType
		} = this.props, {
			mainTab,
			changeSearchPanelStatus,
		} = hrmContractType, {
			isPanelShow,
			conditionCount,
			form,
		} = mainTab;

		return (
			<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@jgskoi`} 
				datas={this.getDropMenuDatas()} 
				onClick={ key => this.handleMenuClick(key)}
				collectParams={{favname:i18n.module.contractType(),favouritetype:5}}
			>
		        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@hgngpw`}
		            searchType={['base','advanced']}
					showSearchAd={isPanelShow}
					hasMask={false}
					advanceHeight={Math.ceil(conditionCount / 2)*52+20}
					buttonsAd={this.getSearchPanelButtons()}
					searchsBaseValue={form.getFormParams().typeName}
					setShowSearchAd={  b => changeSearchPanelStatus(b)}
					hideSearchAd={ () => changeSearchPanelStatus(false)}
					searchsAd= {isPanelShow ? this.getPanelComponents():<div></div>}
					onSearch={() => this.handleSearch()}
					onSearchChange={val => this.handleSearchChange(val)}
		         />
		        <MainTable ecId={`${this && this.props && this.props.ecId || ''}_MainTable@alkyx1`} />
	        </WeaRightMenu>
		)

	}
}