import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaTab,
	WeaButtonIcon,
	WeaRightMenu,
} from 'ecCom'
import {
	Modal,
	message
} from 'antd'
import {
	WeaTableNew
} from 'comsMobx'
import {
	i18n
} from '../../public/i18n';
import {
	IEVersion
} from '../../public/pulic-func';
const WeaTable = WeaTableNew.WeaTable;
const confirm = Modal.confirm;

import SubDialog from './SubDialog';

@inject('hrmTrainArrange')
@observer
export default class SubTableInfo extends React.Component { //该组件同时也做单页使用，因此多做了一些配置。
	constructor(props) {
		super(props);
	}

	componentWillMount() {
		const {
			hrmTrainArrange
		} = this.props, {
			setSelectedRowsKeys
		} = hrmTrainArrange;

		if (this.props.location && this.props.location.query && this.props.location.query.trainPlanId) {
			setSelectedRowsKeys(this.props.location.query.trainPlanId, 'main');
		}
	}

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

		getTableInfo('sub');
	}

	getDropMenuDatas = () => {
		const {
			hrmTrainArrange,
		} = this.props, {
			subTable,
		} = hrmTrainArrange, {
			tableStore
		} = subTable;

		const menu = [{
			key: '0',
			icon: <i className='icon-coms-Preservation' />,
			content: i18n.button.create(),
			disabled: tableStore.loading,
		}, {
			key: '1',
			icon: <i className='icon-coms-task-list' />,
			content: i18n.button.columnVisibleSetting(),
			disabled: tableStore.loading,
		}];

		return menu
	}

	handleMenuClick = (key) => {
		const {
			hrmTrainArrange,
		} = this.props, {
			openDialog,
		} = hrmTrainArrange;

		if (key == '0') {
			openDialog('sub', 'new')
		} else if (key == '1') {
			this.custom();
		}
	}

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

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

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

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

		setSelectedRowsKeys(keys, 'sub');

		this.showConfirm();
	}

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

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

		deleteTableInfo('sub')
	}

	onOperatesClick = (record, rowIndex, operate) => {
		const {
			hrmTrainArrange,
			type
		} = this.props, {
			setSelectedRowsKeys,
			openDialog,
		} = hrmTrainArrange, {
			randomFieldId
		} = record, {
			index
		} = operate;

		setSelectedRowsKeys(randomFieldId, 'sub');

		switch (index) {
			case '0':
				openDialog('sub', 'edit')
				break;
			case '1':
				this.showConfirm()
				break;
		}
	}

	render() {
		const {
			hrmTrainArrange,
			location, //该参数可用来区分是否是单页
		} = this.props, {
			subTable,
			subDialog,
			openDialog,
			mainTable,
		} = hrmTrainArrange, {
			tableStore
		} = subTable, {
			funcIndex
		} = mainTable;

		const len = tableStore.selectedRowKeys.length;

		return (
			<div style={location ? {height: '100%'} : {}}>
				{funcIndex == '2' && <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@jd0ep6`}
								        buttons={[
								          <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@loftar`} buttonType='add' type="primary" onClick={() => openDialog('sub', 'new')}/>,
								          <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@uxe0tv`} buttonType='del' type="primary" disabled={len > 0 ? false : true} onClick={() => this.batchDelete()}/>,
								        ]}
						    		/>
	    		}
				<div className={IEVersion() == -1 ? '' : 'hrm-train-scope-table'} style={{height: '100%'}}>
					<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@wjlisd`} datas={this.getDropMenuDatas()} onClick={ key => this.handleMenuClick(key)}>
			       	    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@vu4wc8`} 
						 	comsWeaTableStore={tableStore}
						 	hasOrder={true}
						 	needScroll={true}
						 	onOperatesClick={(record, rowIndex, operate) => this.onOperatesClick(record, rowIndex, operate)}
						/>
			       	</WeaRightMenu>
		       	</div>
		       	{location && <SubDialog ecId={`${this && this.props && this.props.ecId || ''}_SubDialog@ufwpw6`} />}
	       	</div>

		)

	}
}