import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaTab,
} from 'ecCom'
import {
	i18n
} from '../../public/i18n';

import FormInfo from './FormInfo';
import ThirdTable from './ThirdTable';

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

	componentDidMount() {
		const {
			hrmTrainActivity
		} = this.props, {
			clickTab,
		} = hrmTrainActivity;

		clickTab('0', 'third');
	}

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

		return tabs
	}

	getContent = () => {
		const {
			hrmTrainActivity
		} = this.props, {
			thirdTab
		} = hrmTrainActivity, {
			curKey
		} = thirdTab;

		if (curKey == '0') {
			return <FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@mzsbi5`} />
		} else {
			return <ThirdTable ecId={`${this && this.props && this.props.ecId || ''}_ThirdTable@acen7m`} />
		}
	}

	render() {
		const {
			hrmTrainActivity
		} = this.props, {
			clickTab,
			thirdTab,
			getTableInfo,
			setSearchValue,
		} = hrmTrainActivity, {
			curKey,
			shValue,
		} = thirdTab;

		return (
			<div>
            	<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@rj4es8`}
            		datas={this.getTab()}
            		keyParam='key'
            		selectedKey={curKey}
            		onChange={key => clickTab(key, 'third')}
            		searchType={curKey == '0' ? [] : ['base']}
					searchsBaseValue={shValue}
					onSearch={() => getTableInfo()}
					onSearchChange={val => setSearchValue(val, 'third')}
         		/>
         		{this.getContent()}
         	</div>
		)

	}
}