import React , { useEffect } from 'react';
import { WhiteBack } from '../Component/layout';
import './ops.scss';

import { Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import Loading from '../../Loading';

const About = Loadable({
  loader: () => import('./About'),
  loading: Loading,
})
const New = Loadable({
  loader: () => import('./disposePipeline'),
  loading: Loading,
})
const Dispose = Loadable({
  loader: () => import('./Dispose'),
  loading: Loading,
})
const Stucture = Loadable({
  loader: () => import('./Structure'),
  loading: Loading,
})
export default ((props)=>{
  const { projectsId , owner } = props.match.params;
  const open_devops = props.projectDetail && props.projectDetail.open_devops;

  // 工作流：两种状态进入的链接不同
  // useEffect(()=>{
  //   if(open_devops !== undefined){
  //     if(open_devops){
  //       props.history.replace(`/projects/${owner}/${projectsId}/devops/dispose`);
  //     }else{
  //       props.history.replace(`/projects/${owner}/${projectsId}/devops`);
  //     }
  //   }
  // },[open_devops])

  return(
    <WhiteBack className="opsPanel">
      <Switch {...props}>
        <Route path="/projects/:owner/:projectsId/devops/dispose/:disposeId"
          render={
            (p) => (<New {...props} {...p}/>)
          }
        ></Route>
        <Route path="/projects/:owner/:projectsId/devops/dispose/new"
          render={
            (p) => (<New {...props} {...p}/>)
          }
        ></Route>
        <Route path="/projects/:owner/:projectsId/devops/dispose"
          render={
            (p) => (<Dispose {...props} {...p}/>)
          }
        ></Route>
        <Route path="/projects/:owner/:projectsId/devops/list"
          render={
            (p) => (<Stucture {...props} {...p}/>)
          }
        ></Route>
        <Route path="/projects/:owner/:projectsId/devops"
          render={
            (p) => (<About {...props} {...p}/>)
          }
        ></Route>
      </Switch>
    </WhiteBack>
  )
})