import * as React from 'react';
import { Layout } from 'antd';
import { Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import fetchData from 'utils/fetchData';
import { RootState } from 'store/store';
import './index.scss';

const projectConfig = require('configure/projectConfig.json');

const { Header } = Layout;
function Headers() {
  const user = useSelector((state: RootState) => state.user);
  const fetchLogout = () => {
    const { logout } = projectConfig;
    return fetchData(logout.ajax);
  };
  const handleLogout = () => {
    fetchLogout().then(() => {
      window.location.reload()
    })
  }
  const menu = (
    <Menu>
      <Menu.Item key="logout">
        <span onClick={handleLogout}>
          退出
        </span>
      </Menu.Item>
    </Menu>
  );
  return (
    <Header className="head">
      <div className="head_logo" />
      <div className="head_title">{projectConfig.name}</div>
      <Dropdown overlay={menu}>
        <a className="ant-dropdown-link" style={{ height: '40px' }} onClick={e => e.preventDefault()}>
          {user.userName}<DownOutlined />
        </a>
      </Dropdown>
    </Header>
  );
}

export default Headers;