import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaTop,
	WeaRightMenu,
} from 'ecCom'
import {
	Modal,
	Button,
} from 'antd'
import {
	i18n
} from '../../public/i18n';
const confirm = Modal.confirm;

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

	componentDidMount() {
		const {
			hrmTrainArrange
		} = this.props, {
			getButtonsMenu,
		} = hrmTrainArrange;

		getButtonsMenu();
	}

	getTopMenuBtns = () => {
		const {
			hrmTrainArrange
		} = this.props, {
			menu,
			mainTable,
		} = hrmTrainArrange, {
			tableStore
		} = mainTable;

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

	handleClick = (item) => {
		const {
			hrmTrainArrange
		} = this.props, {
			searchPanel,
			changeSearchPanelStatus
		} = hrmTrainArrange, {
			isPanelShow
		} = searchPanel;

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

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

	// 	return menus;
	// }

	getDropMenuDatas = () => {
		const {
			hrmTrainArrange,
		} = this.props, {
			menu,
			mainTable,
		} = hrmTrainArrange, {
			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 == 'collection' || item.menuFun == 'help' || item.menuFun == 'pageAddress') {
				obj.disabled = true;
			}
			if (item.menuFun == 'batchDelete') {
				obj.disabled = (mainTable.tableStore.selectedRowKeys.length > 0) ? false : true;
			}
			menus.push(obj);
		})

		return menus;
	}

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

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

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

		openDialog('main', 'new');
	}

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

	batchDelete() {
		const {
			hrmTrainArrange
		} = this.props, {
			mainTable,
			setSelectedRowsKeys,
		} = hrmTrainArrange, {
			tableStore,
		} = mainTable, {
			selectedRowKeys
		} = tableStore;

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

		setSelectedRowsKeys(keys, 'main');

		this.showConfirm();
	}

	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() {
				return false
			},
		});
	}

	onOk = () => {
		const {
			hrmTrainArrange
		} = this.props, {
			deleteTableInfo,
		} = hrmTrainArrange;

		deleteTableInfo('main');
	}

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

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

	render() {
		const {
			hrmTrainArrange
		} = this.props, {
			main
		} = hrmTrainArrange, {
			title,
		} = main;

		return (
			<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@hf9xao`} 
				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)}
			>
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@3dfboy`} 
					datas={this.getDropMenuDatas()} 
					onClick={ key => this.handleMenuClick(key)}
					collectParams={{favname: i18n.module.trainArrange(),favouritetype:5}}
				>
					{this.props.children}
				 </WeaRightMenu>
			</WeaTop>
		)

	}
}