import React , { useEffect , useState } from 'react';
import { Menu } from 'antd';
import './Index.scss';
import BlockchainExCreate from './BlockchainExCre';
import BlockchainExList from './BlockchainExList';
import BlockchainExVerify from './BlockchainExVerify';
import BlockchainExHistory from './BlockchainExHistory';


function BlockchainExMenu(props){
  const [ selectKey , setSelectKey ] =  useState("list");

  function changeKeys(e){
    setSelectKey(e.key);
  }

  function renderMenu() {
    if (selectKey === "list") {return (<BlockchainExList {...props}/>)}
    else if (selectKey == 'create') {return (<BlockchainExCreate {...props}/>)}
    else if (selectKey == "verify") {return (<BlockchainExVerify {...props}/>)}
    else if (selectKey == "history") {return (<BlockchainExHistory {...props}/>)}
  }

  return(
    <div>
      <Menu mode="horizontal" className="menuStyle" onClick={changeKeys} selectedKeys={[selectKey]}>
        <Menu.Item key="list">交易列表</Menu.Item>
        <Menu.Item key="create">创建交易</Menu.Item>
        <Menu.Item key="verify">确认交易</Menu.Item>
        <Menu.Item key="history">历史交易</Menu.Item>
      </Menu>
      {
        renderMenu()
      }
    </div>
  )
}
export default BlockchainExMenu;