import React , { useState } from 'react';
import './index.scss';
import logo from './image/logo.png';
import { Menu } from 'antd';
import Bind from './bind';
import UnBind from './unbind';

function Index(props){
  const [ key , setKey ] = useState("0");

  // 选择menu
  function chooseMenuFunc(e){
    setKey(e.key)
  }
  return(
    <div className={"bodies"}>
      <div className="logo">
        <img src={logo} alt="" height="48px" />
      </div>
      <div className={"content"}>
        <p>关联账号</p>
        <div className="panels">
          <Menu selectedKeys={[key]} mode={`horizontal`} className="panelsMenu" onClick={chooseMenuFunc}>
            <Menu.Item key="0">已有账号，进行绑定</Menu.Item>
            <Menu.Item key="1">无账号，注册并绑定</Menu.Item>
          </Menu>
          {
            key === "0" ?
            <Bind {...props}/>
            :
            <UnBind {...props}/>
          }
        </div>
      </div>
    </div>
  )
}
export default Index;