import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaRightMenu,
	WeaRadioGroup
} from 'ecCom';
import DataList from './DataList';
import Import from './Import';
import {
	i18n
} from '../../../public/i18n';

@observer
export default class TabPane extends Component {
	constructor(props) {
		super(props);
		this.state = {
			radioGroupConfig: [],
			refreshTab: 0
		}
	}

	componentDidMount() {
		const {
			store
		} = this.props;
		const {
			getRadioGroupConfig
		} = store;
		this.setState({
			radioGroupConfig: getRadioGroupConfig(),
			refreshTab: store.refreshTab
		})
	}

	componentWillReceiveProps(nextProps) {
		const newV = nextProps.store.refreshTab,
			oldV = this.state.refreshTab;
		const {
			store
		} = this.props;
		if (newV != oldV) {
			this.setState({
				radioGroupConfig: store.getRadioGroupConfig(),
				refreshTab: newV
			})
		}
	}

	render() {
		const {
			store,
			rightMenu
		} = this.props;
		const {
			onRadioGroupChange
		} = store;
		const {
			radioGroupConfig
		} = this.state;
		return (
			<div className='tabPane tabPane-include'>
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@0ows3n`} datas={rightMenu}>
					<div className='search'>
 						<WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@8ih5su`} config={radioGroupConfig} onChange={onRadioGroupChange}/>
					</div>
					<div className='list'>
						<DataList ecId={`${this && this.props && this.props.ecId || ''}_DataList@ldert0`} store={store}/>
                    </div>
                </WeaRightMenu>
                <Import ecId={`${this && this.props && this.props.ecId || ''}_Import@mxc3f9`} store={store}/>
			</div>
		)
	}
}