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

import FormInfo from './FormInfo';
import TrainSchedule from './TrainSchedule';
import SubTableInfo from './SubTableInfo';

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

	componentDidMount() {
		const {
			hrmTrainArrange,
			params
		} = this.props, {
			setSelectedRowsKeys
		} = hrmTrainArrange, {
			id
		} = params;

		setSelectedRowsKeys(id, 'main');
	}

	componentWillUnmount() {
		const {
			hrmTrainArrange
		} = this.props, {
			clickTab
		} = hrmTrainArrange;

		clickTab('0');
	}

	getTab = () => {
		const tabs = [{
			key: '0',
			title: i18n.label.basicInfo(),
		}, {
			key: '1',
			title: i18n.label.trainSchedule(),
		}, {
			key: '2',
			title: i18n.label.publicScope(),
		}]

		return tabs
	}

	getComponent = () => {
		const {
			hrmTrainArrange
		} = this.props, {
			tabInfo
		} = hrmTrainArrange, {
			selectedKey
		} = tabInfo;

		if (selectedKey == '0') {
			return <FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@gsjoqk`} />
		} else if (selectedKey == '1') {
			return <TrainSchedule ecId={`${this && this.props && this.props.ecId || ''}_TrainSchedule@e2lhm6`} />
		} else {
			return <SubTableInfo ecId={`${this && this.props && this.props.ecId || ''}_SubTableInfo@tme3bq`} />
		}
	}

	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')
	}

	render() {
		const {
			hrmTrainArrange
		} = this.props, {
			clickTab,
			tabInfo,
			openDialog,
			subTable
		} = hrmTrainArrange, {
			selectedKey
		} = tabInfo, {
			tableStore
		} = subTable;

		const len = tableStore.selectedRowKeys.length;

		return (
			<div>
            	<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@qa4o6z`}
            		datas={this.getTab()}
            		keyParam='key'
            		selectedKey={selectedKey}
            		onChange={key => clickTab(key)}
            		buttons={selectedKey == '2' ? [
			          <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@l0uwip`} buttonType='add' type="primary" onClick={() => openDialog('sub', 'new')}/>,
			          <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@y5v5i2`} buttonType='del' type="primary" disabled={len > 0 ? false : true} onClick={() => this.batchDelete()}/>,
			        ] : []}
         		/>
         		{this.getComponent()}
         	</div>
		)

	}
}