import React from "react";
import { Menu, Icon, Layout } from "antd";
import "@/account/leftTab.less";
const SubMenu = Menu.SubMenu;
import { Link } from "react-router";
import { adminMenu } from "../menu";
import logo from "img/acc-logo.png";

const LeftTab = React.createClass({
  getInitialState() {
    return {
      openKeys: ["sub1"],
      current: "index",
      switch: false,
      rootSubmenuKeys: [
        "advertisementList",
        "proservlist",
        "buyList",
        "firmList",
        "talentsList",
        "activity"
      ]
    };
  },
  menuClick(e) {
    this.setState({
      current: e.key
    });
    window.location.hash = e.key;
  },
  iconFun() {
    let menuW = document.querySelector(".ant-layout-sider");
    if (this.state.switch) {
      menuW.style.width = "200px";
      menuW.style.flex = "0 0 200px";
    } else {
      menuW.style.width = "50px";
      menuW.style.flex = "0 0 50px";
    }
    this.setState({
      switch: !this.state.switch
    });
  },
  onOpenChange(openKeys) {
    const latestOpenKey = openKeys.find(
      key => this.state.openKeys.indexOf(key) === -1
    );
    if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys });
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : []
      });
    }
  },
  componentWillMount() {
    if (window.location.hash) {
      let current = window.location.hash.substr(2),
        open = [];
      if (!current.length) {
        window.location.hash = "index";
        this.setState({
          openKeys: ["advertisementList"],
          current: "advertisementList"
        });
      } else {
        adminMenu.map(item => {
          if (item.children) {
            item.children.map(atem => {
              if (current == atem.url) {
                open.push(item.url);
                return false;
              }
            });
          }
        });
        this.setState({
          openKeys: open,
          current
        });
      }
    } else {
      window.location.hash = "index";
      this.setState({
        openKeys: ["advertisementList"],
        current: "advertisementList"
      });
    }
  },
  render() {
    return (
      <div>
        <div className="acc-index">
          {!this.state.switch && <img src={logo} alt="" />}
          {!this.state.switch && (
            <span>
              <a href={globalConfig.context + "/admin/index.html"}>
                管理员中心
              </a>
            </span>
          )}
          {/* <Icon type={this.state.switch ? 'forward' : 'backward'} className="icon" onClick={this.iconFun} /> */}
        </div>
        <Menu
          onClick={this.menuClick}
          defaultOpenKeys={this.state.openKeys}
          selectedKeys={[this.state.current]}
          openKeys={this.state.openKeys}
          onOpenChange={this.onOpenChange}
          mode={this.state.switch ? "vertical" : "inline"}
          theme="dark"
          className="account-left"
        >
          {adminMenu.map(subMenu => {
            if (subMenu.children && subMenu.children.length) {
              return (
                <SubMenu
                  key={subMenu.url}
                  title={
                    <span>
                      <Icon type={subMenu.icon} />
                      {!this.state.switch && <span>{subMenu.name}</span>}
                    </span>
                  }
                >
                  {subMenu.children.map(menu => (
                    <Menu.Item key={menu.url}>{menu.name}</Menu.Item>
                  ))}
                </SubMenu>
              );
            }
            return (
              <Menu.Item key={subMenu.url}>
                <Icon type={subMenu.icon} />
                <span className="nav-text">{subMenu.name}</span>
              </Menu.Item>
            );
          })}
        </Menu>
      </div>
    );
  }
});

export default LeftTab;