import React, { Component } from 'react';
import {observer} from 'mobx-react';
import {WeaTab} from 'ecCom';
import SearchBar from './SearchBar';
import TimeLineView from './TimeLineView';
import MapView from './MapView';
import DataListView from './DataListView';

@observer
export default class Content extends Component{
    render(){
        const {store} = this.props;
        const {tabProps} = store;
        const {selectedKey} = tabProps;

        return (
            <div className='content'>
                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@kj5nj9`} {...tabProps} />
                {
                    selectedKey != '2' && <SearchBar ecId={`${this && this.props && this.props.ecId || ''}_SearchBar@ku7gst`} store={store} />
                }
                {selectedKey == '0' && <TimeLineView ecId={`${this && this.props && this.props.ecId || ''}_TimeLineView@tbk9bf`} store={store} />}
                {selectedKey == '1' && <MapView ecId={`${this && this.props && this.props.ecId || ''}_MapView@rfn362`} store={store} />}
                {selectedKey == '2' && <DataListView ecId={`${this && this.props && this.props.ecId || ''}_DataListView@7zve0v`} store={store} />}
            </div>
        )
    }
}