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

import TrainArrangeTabInfo from './TrainArrangeTabInfo'; //编辑“培训安排”（tab组件）
import FormInfo from './FormInfo'; //表单组件
import SubTableInfo from './SubTableInfo'; //“公开范围”列表组件

@inject('hrmTrainArrange')
@observer
export default class MainDialog extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			width: 700,
			height: 600,
		}
	}

	getButtons = () => {
		const {
			hrmTrainArrange,
		} = this.props, {
			save,
			saveSchedule,
			tabInfo,
			mainDialog,
			formInfo,
			mainTable,
		} = hrmTrainArrange, {
			selectedKey,
		} = tabInfo, {
			funcIndex
		} = mainTable;

		if (selectedKey == '2' || funcIndex == '2') { //公共范围弹框下面没有按钮
			return [];
		}

		const buttons = [
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@amky0d`} 
				type="primary" 
				disabled={ this.getDisabledCondition()} 
				onClick={() => (selectedKey == '1') ? saveSchedule() : save('main')}
			 >
				{i18n.button.save()}
			</Button>),
			(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@m5mil0`} />),
		];

		return formInfo.hasBtn ? buttons : buttons.slice(1, 2); //新建、编辑“培训安排”，“培训日程”按钮

	}

	getDisabledCondition = () => {
		const {
			hrmTrainArrange
		} = this.props, {
			tabInfo,
			schedule,
			formInfo,
		} = hrmTrainArrange, {
			selectedKey
		} = tabInfo;

		if ((selectedKey == '1' && !schedule.loading)) { //培训日程有数据时
			return false
		}
		if (!formInfo.loading) { //成功获取表单、保存成功后
			return false
		}
		return true

	}

	batchDelete() { //“公开范围”批量删除按钮
		const {
			hrmTrainArrange
		} = this.props, {
			subTable,
			setSelectedRowsKeys,
		} = hrmTrainArrange, {
			tableStore,
		} = subTable;

		let keys = toJS(tableStore.selectedRowKeys).toString();

		if (!keys) {
			message.warning(i18n.message.pleaseConfirmDelRows());
			return;
		}

		setSelectedRowsKeys(keys);

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

	getComponent = () => {
		const {
			hrmTrainArrange,
		} = this.props, {
			mainTable,
			mainDialog
		} = hrmTrainArrange, {
			selectedRowsKeys
		} = mainTable, {
			contentType,
			visible
		} = mainDialog;

		if (contentType == 'new') { //新建“培训安排”
			return visible && <FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@uksg2g`} />
		} else if (contentType == 'edit') { //编辑“培训安排”
			return visible && <TrainArrangeTabInfo ecId={`${this && this.props && this.props.ecId || ''}_TrainArrangeTabInfo@co45qo`} params={{id:selectedRowsKeys}}/>
		} else { //“公开范围”列表
			return visible && <SubTableInfo ecId={`${this && this.props && this.props.ecId || ''}_SubTableInfo@uemm4c`} />
		}
	}

	render() {
		const {
			hrmTrainArrange
		} = this.props, {
			closeDialog,
			mainDialog,
		} = hrmTrainArrange, {
			title,
			visible,
		} = mainDialog, {
			width,
			height,
		} = this.state;

		return (
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@vc9m3c`}
	          	title={title}
	          	icon="icon-coms-hrm"
	          	iconBgcolor="#217346"
	          	visible={visible}
	          	closable={true}
	          	hasScroll={true}
	          	onCancel={() => closeDialog('main')}
	          	buttons={this.getButtons()}
	          	style={{width: width, height: height}}
	          	onChangeHeight={(h) => this.setState({height: h})}
	        >
	          	{this.getComponent()}
	        </WeaDialog>
		)

	}
}