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 ThirdTab from './ThirdTab';
import FormInfo from './FormInfo';

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

	getButtons = () => {
		const {
			hrmTrainActivity,
		} = this.props, {
			formInfo,
			thirdTab,
			subDialogmenu,
			thirdTable,
			save,
		} = hrmTrainActivity, {
			loading
		} = formInfo, {
			curKey
		} = thirdTab;

		let btns = [];

		if (curKey == '1') {
			const len = thirdTable.tableStore.selectedRowKeys.length;

			toJS(subDialogmenu.topMenu).map((item, index) => {
				btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bdtdrz@${index}`} type='primary' disabled={len > 0 ? false : true} onClick={() => this.handleClick(item)}>{item.menuName}</Button>);
			});
		} else {
			btns = [
				(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@u7leqa`} type="primary" disabled={loading} onClick={() => save()}>{i18n.button.save()}</Button>),
				(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@2xun1g`} />)
			];
		}

		return btns;
	}

	handleClick = (item) => {
		this[item.menuFun] && this[item.menuFun]()
	}

	join = () => {
		const {
			hrmTrainActivity
		} = this.props, {
			attend
		} = hrmTrainActivity;

		attend();
	}

	getComponet = () => {
		const {
			hrmTrainActivity
		} = this.props, {
			mainTable,
			subTable,
			subTab,
			subDialog
		} = hrmTrainActivity, {
			index
		} = mainTable, {
			curKey
		} = subTab, {
			selectedRowKey
		} = subTable;

		if (index == '0' && curKey == '1' && selectedRowKey) {
			return subDialog.visible && <ThirdTab ecId={`${this && this.props && this.props.ecId || ''}_ThirdTab@jncutk`} />
		} else {
			return subDialog.visible && <FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@yrionu`} />
		}
	}

	render() {
		const {
			hrmTrainActivity,
		} = this.props, {
			subDialog,
			closeSubDialog,
		} = hrmTrainActivity, {
			visible,
			title,
		} = subDialog, {
			width,
			height,
		} = this.state;

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

	}
}