import React, { Component } from 'react';

import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';

import "../usersInfo.css"
import "../../../courses/css/members.css"
import "../../../courses/css/Courses.css"

import Loadable from 'react-loadable';
import Loading from '../../../../Loading';

import BanksMenu from './banksMenu'
// 毕设选题
const GtopicBanks = Loadable({
	loader: () => import('./GtopicBanks'),
	loading: Loading,
})
const GtopicBanksAnswer = Loadable({
	loader: () => import('./GtopicBanksAnswer'),
	loading: Loading,
})

class BanksTabIndex extends Component{
  constructor(props){
    super(props);
    this.state={
      banksMenu:undefined
    }
  }

  initPublic = (crumbData,menuData) =>{
    this.setState({
      banksMenu:menuData
    })
    this.props.initPublic(crumbData);
  }

  render(){
    let{
      banksMenu      
    }=this.state

    const common={
      initPublic:this.initPublic,
    }
    return(
      <React.Fragment>
        {
          banksMenu && 
          <BanksMenu 
            banksMenu={banksMenu}
            {...this.props}
            {...this.state} 
            {...common}
          ></BanksMenu>
        }
        <Switch {...this.props}>

          <Route path='/banks/gtopic/:bankId/answer' 
            render={
              (props) => {
                return (<GtopicBanksAnswer {...this.props} {...props} {...this.state} {...common} />)
              }
          }></Route>

          <Route path='/banks/gtopic/:bankId' 
            render={
              (props) => {
                return (<GtopicBanks {...this.props} {...props} {...this.state} {...common} />)
              }
          }></Route>

        </Switch>
      </React.Fragment>
    )
  }
}
export default (BanksTabIndex);