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

import SubTab from './SubTab';
import ThirdTab from './ThirdTab';
import FormInfo from './FormInfo';
import SubTable from './SubTable';

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

	getButtons = () => {
		const {
			hrmTrainActivity
		} = this.props, {
			mainTable,
			formInfo,
			subTab,
			thirdTab,
			save,
		} = hrmTrainActivity, {
			index,
			selectedRowKey,
		} = mainTable;

		let btns = [];

		const sv = (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ly55oz`} type="primary" disabled={formInfo.loading} onClick={() => save()}>{i18n.button.save()}</Button>);

		const mr = (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@112eza`} />);

		if (!selectedRowKey) btns = [sv, mr]; //新建培训活动

		if ((index == '0' && subTab.curKey == '0')) btns = [sv, mr]; //编辑培训活动 - 基本信息

		if (index == '1') btns = [sv, mr]; //添加培训人

		if (index == '2' && thirdTab.curKey == '0') btns = [sv, mr]; //添加培训日程

		if (index == '5') btns = [sv, mr]; //结束活动

		return btns;
	}

	getContent = () => {
		const {
			hrmTrainActivity
		} = this.props, {
			mainTable,
			mainDialog
		} = hrmTrainActivity, {
			index,
			selectedRowKey,
		} = mainTable, {
			visible
		} = mainDialog;

		if (index == '1' || index == '2' || index == '5' || index == '6' || !selectedRowKey) return visible && <FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@xvprdk`} />; //增加培训人、结束活动、培训信息、新建培训活动

		if (index == '0' || index == '3' || index == '4') return visible && <SubTab ecId={`${this && this.props && this.props.ecId || ''}_SubTab@s9y37l`} />; //编辑、培训考核、培训考评


	}

	render() {
		const {
			hrmTrainActivity
		} = this.props, {
			closeMainDialog,
			mainDialog,
			mainTable,
		} = hrmTrainActivity, {
			title,
			visible,
		} = mainDialog, {
			index
		} = mainTable, {
			width,
			height,
		} = this.state;

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

	}
}