import { LogoutOutlined } from '@ant-design/icons';
import { Avatar, Menu, Spin } from 'antd';
import React from 'react';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import { setAuthority } from '@/utils/authority';
import { appConnector } from '@/containers/App/store';
import logo from '@/assets/images/logo/panda-logo2.png';
import connectHistoryHoc from '@/containers/connectHistoryHoc';

const roleName = {
  admin: '管理员',
  super: '超级管理员',
};
class AvatarDropdown extends React.Component {
  /* eslint-disable no-unused-vars */
  onMenuClick = event => {
    const { logout, history, loginName } = this.props;
    switch (event.key) {
      case 'logout':
        setAuthority([]);
        logout();
        history.push(`/user/login`);
        break;
      default:
        break;
    }
  };

  render() {
    const {
      loginName,
      currentUser = {
        avatar: logo,
        name: '',
      },
    } = this.props;
    const userName = sessionStorage.getItem('userName');
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {/* {
          <Menu.Item key="center">
            <UserOutlined />
            个人中心
          </Menu.Item>
        }
        {
          <Menu.Item key="settings">
            <SettingOutlined />
            个人设置
          </Menu.Item>
        }
        {<Menu.Divider />} */}

        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );
    return currentUser ? (
      <HeaderDropdown overlay={menuHeaderDropdown} trigger={['click']}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
          <span className={`${styles.name} anticon`}>
            {/* {currentUser.name || loginName === 'omsa' ? '超级管理员' : '管理员' || '管理员'} */}
            {userName || '管理员'}
          </span>
        </span>
      </HeaderDropdown>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }
}

export default connectHistoryHoc(appConnector(AvatarDropdown));
