import React , { useEffect , useState , useRef } 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(false);
  const [ permission , setPermission ] = useState("");
  const childRef = useRef();

  const path = props.location.pathname;
  const owner = props.match.params.owner;
  const projectsId = props.match.params.projectsId;

  const projectDetail = props.projectDetail;
  useEffect(()=>{
    if(path === `/projects/${owner}/${projectsId}/devops/list`){
      setMenu(true);
    }else{
      setMenu(false);
    }
  },[path])

  useEffect(()=>{
    if(projectDetail){
      setPermission(props.projectDetail.permission);
    }
  },[projectDetail])

  const updateChildState = () => {
    // changeVal就是子组件暴露给父组件的方法
    if (childRef.current) {
      childRef.current.changeVal();
    }
  }

  return(
    <div className="disposePanel">
      <Banner>
        { permission !=="Reporter" && <Link to={`/projects/${owner}/${props.match.params.projectsId}/devops/dispose`}>工作流配置</Link>}
        {/* <Link to={`/projects/${owner}/${props.match.params.projectsId}/devops/list`}className={menu===true && "color-blue"}>构建列表</Link> */}
        {/* { menu===true && <a onClick={updateChildState} style={{float:"right",fontSize:"14px",color:"#FF6E21",marginTop:"5px"}}>刷新</a>} */}
      </Banner>
      <Div>
        {/* { menu === true && <Structure {...props}  wrappedComponentRef={(form) => childRef.current = form} ref={childRef}/> } */}
        <Dispost {...props}/>
      </Div>
    </div>
  )
})