import React, { useEffect } from 'react';
import { Route, Switch } from 'react-router-dom';
import "./index.scss";
import Loadable from 'react-loadable';
import Loading from '../../Loading';


const List = Loadable({
  loader: () => import('./List'),
  loading: Loading,
})
const Data = Loadable({
  loader: () => import('./data'),
  loading: Loading,
})
function ServerIndex(props){
  useEffect(()=>{
    const {projectDetail} = props;
    if(projectDetail){
      const { author, name} = projectDetail;
      document.title = `服务-${author.name}/${name}`;
    }
  },[])
  return(
    <div className="panels">
      <Switch {...props}>
        <Route path="/:owner/:projectsId/server/:id"
          render={
            () => (<Data {...props}/>)
          }
        ></Route>
        <Route path="/:owner/:projectsId/server"
          render={
            () => (<List {...props}/>)
          }
        ></Route>
      </Switch>
    </div>
  )
}
export default ServerIndex;