import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { browserHistory } from 'amos-react-router';
import { Nav, NavItem, IndexNavItem } from 'amos-framework';
import { Popconfirm, Menu, Dropdown, Modal } from 'amos-antd';
import HDate from './HDate';
import Weather from './Weather';
import { secExtUrl, SecurityUrl } from 'CONSTS/urlConsts';
import { logout } from './../../../../services/securityServices';

const confirm = Modal.confirm;

class MenuList extends Component {
  static propTypes = {};

  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }

  componentDidMount() {

  }

  onClick = (es) => {
    window.localStorage.removeItem('major');
    window.localStorage.removeItem('fireDesc');

  };

  handleMenuClick = (e) => {
    if (e.key === '1') {
      this.setState({ visible: false });
      this.showConfirm();
    }
  }

  handleVisibleChange = (flag) => {
    this.setState({ visible: flag });
  }

  showConfirm = () => {
    confirm({
      title: '提示',
      content: '是否要退出登录?',
      onOk() {
        let storage = window.localStorage;
        const params = {
          loginType: 'WEB',
          userId: storage.getItem('userId')
        };

        logout(params).then(() => {
          window.localStorage.removeItem('major');
          window.localStorage.removeItem('fireDesc');
          window.localStorage.removeItem('activity');
          window.localStorage.removeItem('userxzqh');
          if (window.opener && !window.opener.closed) {
            window.opener.location.href = `${window.location.origin}/login`;
            window.close();
          } else {
            browserHistory.push('/login');
          }
        });
      },
      onCancel() {
      }
    });
  }

  renderNavItem = (dataList = []) => {
    return dataList.map((es, index) => {
      if (index === 0) {
        return <IndexNavItem key={es.key} onClick={e => this.onClick(es)} icon={es.icon} title={es.name} href={es.url} />;
      } else {
        return <NavItem key={es.key} onClick={e => this.onClick(es)} icon={es.icon} title={es.name} href={es.url} />;
      }
    });
  };

  render() {
    let { submenu } = this.props;
    const navItem = this.renderNavItem(submenu);
    const menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="1">
          <p>退出登录</p>
        </Menu.Item>
      </Menu>
    );
    return (
      <div className="top-header">
        <Nav direction="horizontal" href="/">
          {navItem}
        </Nav>
        <div className="top-right">
          <div>
            <HDate />
            <Weather />
          </div>
          <div>
            <Dropdown overlay={menu}
              onVisibleChange={this.handleVisibleChange}
              visible={this.state.visible}
            >
              <img src="/src/assets/img/sign-out.png" alt="人员" className="sign-out" />
            </Dropdown>
          </div>
        </div>
      </div>
    );
  }
}
MenuList.propTypes = {
  submenu: PropTypes.array
};
export default MenuList;
