import React from 'react';
// import PropTypes from 'prop-types';
import { Menu, Icon} from 'antd';
import 'whatwg-fetch';
import './adminmenu.less';
const SubMenu = Menu.SubMenu;

// 时间轴
import { Timeline } from 'antd';

// 存储所有导航节点
const menuNode =[];
class AdminMenu extends React.Component {
  constructor() {
    super();
    this.state = {
      collapsed: false,  //  侧边栏导航收起
      isNavReady: false,  //  是否正确接收导航数据,
      currentGroup: null,
      current: null
    }
    this.renderMenu = this.renderMenu.bind(this);
  }
  componentWillMount() {
    // 判断当前页面索引
    if(false){
      this.renderMenu(JSON.parse(window.localStorage.navdata));
    }else{
      const { url } = this.props;
       fetch(url,
         {
           credentials: 'include',
           headers: {
             'Content-Type': 'application/x-www-form-urlencoded',
           },
           method: 'GET'
         })
      .then((response) => response.json())
      .then(data => {
        // 获取后台数据中导航数据
        const navdata = data.data;
        window.localStorage.setItem('navdata',JSON.stringify(navdata));
        window.localStorage.setItem('userID','id');
        // 遍历导航数据
        // this.renderMenu(navdata);
        this.renderMenu(JSON.parse(window.localStorage.navdata));
        this.setState({
          isNavReady: true,
        })
      })
      .catch(err => {
        console.log(err);
      })
    }
  }
  renderMenu(data) {
    let pathIndex = window.location.pathname;
    const _this = this;
    data.map(function(item,key) {
      // 存在二级导航
      if(item.hasOwnProperty("submenu")) {
        let subMenuNode = [];
        // 遍历二级导航
        item.submenu.map(function(subItem,subKey) {
          if ((subItem.url+'').replace(/\./,'') === pathIndex) {
            _this.setState({
              currentGroup:key+'',
              current:key+''+subKey
            })
          }
          subMenuNode.push(
            <Menu.Item
              key={key+''+subKey}>
              <a href={subItem.url}>
                <span className="sub-menu">
                  <ul>
                    <Timeline.Item>
                      {subItem.name}
                    </Timeline.Item>
                  </ul>
                </span>
              </a>
            </Menu.Item>
          );
        });
        // 生成一级导航+二级导航DOM节点
        menuNode.push(
          <SubMenu
            key={key}
            title={
              <span className="main-menu">
                <Icon type={item.icon}/>
                <span>
                {item.name}
                </span>
              </span>
            }>
              {subMenuNode}
          </SubMenu>
          );
      }else{
        // 不存在二级导航,生成一级导航DOM节点
         if ((item.url+'').replace(/\./,'') === pathIndex) {
            _this.setState({
              current:key+''
            })
          }
        menuNode.push(
          <Menu.Item
            key={key}>
            <a href={item.url}>
              <Icon type={item.icon} />
              <span className="main-menu">{item.name}</span>
            </a>
          </Menu.Item>)
      }
    })
    this.setState({
      isNavReady:true,
    })
  }
  toggleCollapsed() {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }
  handleMenuClick(item ) {
    console.log(item.key)
  }
  render() {
    return (
      <div className="left-menu">
        {this.state.isNavReady &&
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={['0']}
            defaultOpenKeys={[this.state.currentGroup]}
            //defaultOpenKeys={['0','1','2','3','4']}
            selectedKeys={[this.state.current]}
            onClick={this.handleMenuClick}>
            {this.state.isNavReady && menuNode}
          </Menu>
        }
      </div>
    );
  }
}

export default AdminMenu;