import React from 'react';

import {
  Avatar,
  Popover,
  Spin,
} from 'antd';
import { withRouter } from 'react-router-dom';

import styles from './index.less';

class AvatarDropdown extends React.Component {
  /* eslint-disable no-unused-vars */
  onMenuClick = event => {
    createStoreage.remove('PANDA_STORE');
    this.props.history.push(
      `/user/login/?client=${window.globalConfig.client}`,
    );
    location.reload();
  };

  getRoles = () => {
    const roles = this.props.global.userInfo.roles || []
    let ret = []
    roles.forEach(item => {
      ret.push(item.name)
    })
    return ret.join(",")
  }

  render() {
    const props = this.props;
    const {
      currentUser = {
        avatar:
          (props.global &&
            props.global.userInfo &&
            props.global.userInfo.UserImge) ||
          'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
        name:
          (props.global &&
            props.global.userInfo &&
            props.global.userInfo.fullName) ||
          'Serati Ma',
      },
    } = this.props;

    const menuHeaderDropdown = (
      <div className={styles.userInfo}>
        <div className={styles.header}>
          <div className={styles.avatar} style={{backgroundImage: `url(${props.global.userInfo.UserImge})`}}></div>
          <div className={styles.name}>{props.global.userInfo.fullName}</div>
        </div>
        <div className={styles.body}>
          <div className={styles.item}>
            <ul>
              <li>
                <span></span>
                <span className={styles.label}>账号：</span>
                <span className={styles.value}>{props.global.userInfo.loginName}</span>
              </li>
              <li>
                <span></span>
                <span className={styles.label}>姓名：</span>
                <span className={styles.value}>{props.global.userInfo.fullName}</span>
              </li>
              <li>
                <span></span>
                <span className={styles.label}>部门：</span>
                <span className={styles.value}>{props.global.userInfo.depart.name}</span>
              </li>
              <li>
                <span></span>
                <span className={styles.label}>角色：</span>
                <span className={styles.value}>{this.getRoles()}</span>
              </li>
              <li>
                <span></span>
                <span className={styles.label}>企业编号：</span>
                <span className={styles.value}>{props.global.userInfo.site}</span>
              </li>
            </ul>
          </div>
          <div className={styles.exit}>
            <a href="javascript:;" onClick={this.onMenuClick}>退出登录</a>
          </div>
        </div>
      </div>
    );
    return currentUser && currentUser.name ? (
      <Popover overlayClassName={styles.userWrapper} placement="bottom" trigger="click" content={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar
            size="small"
            className={styles.avatar}
            src={currentUser.avatar}
            alt="avatar"
          />
          {/* <span className={`${styles.name} anticon`}>{currentUser.name}</span> */}
        </span>
      </Popover>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }
}


export default withRouter(AvatarDropdown)
