import React, { Component } from 'react';
import { Row, Col, Menu, Icon } from 'antd';
import { withRouter } from 'react-router';
import { inject } from 'mobx-react';
import { getItem } from '../../utils';
import './header.less';

const MenuItem = Menu.Item;
const { SubMenu } = Menu;
// const { Option } = Select;

@withRouter
@inject('login')
@inject('global')
export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: ''
    };
  }

  componentDidMount() {
    const user = getItem('user');
    if (!user) {
      return;
    }
    this.setState({ username: user.username });
  }

  onSearch = e => {
    console.log(e);
  };

  quit = async () => {
    await this.props.login.logout();
    this.props.history.push('/login');
  };

  notificationClick = e => {
    this.props.global.notificationToggle(true);
  };

  trunHelp = () => {
    this.props.history.push('/help');
  };

  render() {
    return (
      <Row>
        {/* <Col className="env-col">
          <Select defaultValue="默认环境" className="env-select" dropdownClassName="env-select-wrap">
            <Option value="aa">默认环境1</Option>
            <Option value="bb">默认环境2</Option>
          </Select>
        </Col> */}
        <Col className="right-col">
          <Menu mode="horizontal" selectedKeys={[]} className="header-menu">
            {/* <MenuItem>
              <i className="iconfont icon-tongzhi1 moria-icon small-icon" />
              <span className="menu-text">通知</span>
            </MenuItem>
            <MenuItem>
              <i className="iconfont icon-yaochi moria-icon small-icon" />
              <span className="menu-text">服务令牌</span>
            </MenuItem> */}
            <SubMenu
              title={(
                <span className="text-wrap">
                  <span className="name-text">{this.state.username}</span>
                  <i className="iconfont icon-iconfontgengduo" />
                </span>
              )}
              className="username"
            >
              <MenuItem>
                <p>
                  <Icon type="profile" />
                  <span>当前用户</span>
                </p>
              </MenuItem>
              <MenuItem>
                <p onClick={this.quit}>
                  <Icon type="logout" />
                  <span>退出登录</span>
                </p>
              </MenuItem>
            </SubMenu>
          </Menu>
          {/* <div className="icon-item-wrap" onClick={this.notificationClick}>
            <i className="iconfont icon-tongzhi" />
            {this.props.notificationNewCount > 0 && <i className="tip">{this.props.notificationNewCount}</i>}
          </div> */}
          <div
            className={`icon-item-wrap no-margin ${this.props.history.location.pathname === '/help' ? 'active' : ''}`}
            onClick={this.trunHelp}
            title="帮助文档"
          >
            <i className="iconfont icon-wendang1" />
          </div>
          {/* <div className="search-wrap">
            <Input.Search placeholder="Search" onSearch={this.onSearch} className="search" />
          </div> */}
        </Col>
      </Row>
    );
  }
}