import React , { useEffect , useState } from 'react';
import { Menu } from 'antd';
import './Index.scss';
import CIdispose from './CIdispose';
import CIList from './CIList';


function DevOpsCI(props){
  const [ selectKey , setSelectKey ] =  useState("dispose");

  function changeKeys(e){
    setSelectKey(e.key);
  }
  
  return(
    <div>
      <Menu mode="horizontal" className="menuStyle" onClick={changeKeys} selectedKeys={[selectKey]}>
        <Menu.Item key="dispose">服务器配置</Menu.Item>
        <Menu.Item key="list">项目列表</Menu.Item>
      </Menu>
      {
        selectKey === "dispose" ? 
        <CIdispose {...props}/>
        :
        <CIList {...props}/>
      }
    </div>
  )
}
export default DevOpsCI;