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

import FormInfo from './FormInfo';
import BasicSet from './BasicSet';

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

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

		setSelectedRowsKeys(id);
	}

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

		clickTab('0');
	}

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

		return tabs
	}

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

		return (selectedKey == '0') ? <BasicSet ecId={`${this && this.props && this.props.ecId || ''}_BasicSet@1bkfo1`} /> : <FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@rh4ekh`} />;
	}

	render() {
		const {
			hrmWorkHour
		} = this.props, {
			clickTab,
			tabInfo
		} = hrmWorkHour, {
			selectedKey
		} = tabInfo;

		return (
			<div>
            	<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@gwd47a`}
            		datas={this.getTab()}
            		keyParam='key'
            		selectedKey={selectedKey}
            		onChange={key => clickTab(key)}
         		/>
         		{this.getComponent()}
         	</div>
		)

	}
}