import React , { useEffect , useState } from 'react';
import { Banner } from '../Component/layout';
import { Link } from 'react-router-dom';

import Dispost from './Dispose';
import Structure from './Structure';

import styled from 'styled-components';

const Div = styled.div`{
  padding:24px 30px;
}`;
export default ((props)=>{
  const [ menu , setMenu ] = useState(undefined);

  const path = props.location.pathname;
  useEffect(()=>{
    // console.log(props.match.params.projectsId)
    if(path === `/projects/${props.match.params.projectsId}/ops/list`){
      setMenu(true);
    }else{
      setMenu(false);
    }
  },[path])

  return(
    <div className="disposePanel">
      <Banner>
        <Link to={`/projects/${props.match.params.projectsId}/ops/dispose`}>工作流配置</Link>
        { menu ? <Link to={`/projects/${props.match.params.projectsId}/ops/list`} style={{ marginLeft:"66px",color:"#5091FF" }}>构建列表</Link>:""}
      </Banner>
      <Div>
        { menu && menu === true && <Structure {...props}/> }
        { menu && menu === false && <Dispost {...props}/> }
      </Div>
    </div>
  )
})