import React, { PureComponent } from "react";
import { connect } from "dva";
import { Menu, Icon } from "antd";
import styles from "./index.less";
import { routerRedux } from "dva/router";

import CustIcon, { STATUS as IconStatus } from "../CustIcon";
// import menuData from "./data.json";

// 首页商品分类
class MenuComp extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isHover: false, // 判断是否hover一级菜单
      menuTowStatus: "0", // 二级菜单显示
      menuThreeData: [], // 三级导航数据
      menuTowData: [] // 二级导航数据
    };
  }
componentWillMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "goodsLevel/getGoodsLevel",
      payload: null
    });
  }
  mouseoverUlHandle() {
    this.setState({
      isHover: true
    });
  }
  mouseoutUlHandle() {
    this.setState({
      isHover: false
    });
  }
  mouseoverHandle(item, e) {
    e.stopPropagation();
    if (item) {
      this.setState({
        isHover: true,
        menuTowData: item,
        menuThreeData: item && item.length > 0 ? item[0].items : []
      });
    }
  }
  mouseoutHandle(e) {
    this.setState({
      isHover: false
    });
  }
  menuMore(item, index) {
    const { dispatch } = this.props;
    dispatch(
        routerRedux.push({
            pathname: "/buyer/goodsPurchase",
            query: {
              catcode: item.id,
              defaultIndex: index
            }
        })
    );
  }
  menuMoreHover(e) {
    e.stopPropagation();
    this.setState({
        isHover: false
    });
  }
  menuTowClick(item, index) {
    this.setState({
      menuThreeData: item,
      menuTowStatus: index
    });
  }
  menuOneHtml() {
    const { goodsLevelData } = this.props;
    const newGoodsLevelData = goodsLevelData ? goodsLevelData : [];
    let menuMore = [];
    if (newGoodsLevelData && newGoodsLevelData.length > 11) {
        menuMore = newGoodsLevelData.slice(0, 10);
        menuMore.push({
            name: '查看更多',
            key: 'more',
            id: ''
        });
    } else {
      menuMore = newGoodsLevelData;
    }
    const menuOneHtml = (menuMore).map((item, index) => {
      if (item.key == 'more') {
        return (
            <li
              className={styles.menuOneItem}
              onClick={this.menuMore.bind(this, item, index)}
              key={item.id}
            >
                <span>{item.name}</span>
                <CustIcon
                  type="icon-icon-right"
                  style={{ float: "right", color: "#FFF", fontSize: "16px", opacity: 0.6 }}
                />
            </li>
        );
      } else {
        return (
            <li
              className={styles.menuOneItem}
              onMouseOver={this.mouseoverHandle.bind(this, item.items)}
              onFocus={this.mouseoverHandle.bind(this)}
              onMouseOut={this.mouseoutHandle.bind(this)}
              onBlur={this.mouseoutHandle.bind(this)}
              onClick={this.menuMore.bind(this, item, index)}
              key={item.id}
            >
                <span>{item.name}</span>
              <CustIcon
                type="icon-icon-right"
                style={{ float: "right", color: "#FFF", fontSize: "16px", opacity: 0.6 }}
              />
            </li>
        );
      }
    });
    return menuOneHtml;
  }
  menuTowHtml() {
    const { menuTowData } = this.state;
    if (menuTowData && menuTowData.length > 0) {
      const menuTowContent = (
        <div className={styles.menuTowBox}>
          {menuTowData.map((item, index) => (
            <span
              className={styles.menuTowBtn}
              style={{
                backgroundColor:
                  this.state.menuTowStatus == index ? "#E14C46" : "#644D4D"
              }}
              key={item.id}
              onClick={this.menuMore.bind(this, item, index)}
              onMouseOver={this.menuTowClick.bind(this, item.items, index)}
              onFocus={this.menuTowClick.bind(this, item.items, index)}
            >
              {item.name}
            </span>
          ))}
        </div>
      );
      return menuTowContent;
    }
  }
  menuThreeHtml(threeItems) {
    const { menuThreeData } = this.state;
    if (menuThreeData) {
      const menuThreeContent = (
        <div className={styles.menuLastbox}>
          {menuThreeData.map((item, index) => (
            <div className={styles.menuLastItem} key={item.id}>
              <div className={styles.menuTree}>
                <a className={styles.menuTreeName} onClick={this.menuMore.bind(this, item, index)}>{item.name} &gt;</a>
              </div>
              {this.menuFourHtml(item.items)}
            </div>
          ))}
        </div>
      );
      return menuThreeContent;
    }
  }
  hoverMenuHtml() {
    const hoverMenuContent = (
      <div
        className={styles.hoverMenuBox}
        style={{ display: this.state.isHover ? "block" : "none" }}
      >
        {/* 二级菜单 */}
        {this.menuTowHtml()}
        {/* 二级菜单--结束 */}
        {/* 三级菜单 */}
        {this.menuThreeHtml()}
        {/* 三级菜单--结束 */}
      </div>
    );
    return hoverMenuContent;
  }
  menuFourHtml(fourItems) {
    if (fourItems[0]) {
      const menuFourContent = (
        <div className={styles.menuFour}>
          {fourItems.map((item, index) => (
            <a className={styles.menuFourName} key={item.id} onClick={this.menuMore.bind(this, item, index)}>
              {item.name}
            </a>
          ))}
        </div>
      );
      return menuFourContent;
    }
  }
  render() {
    return (
      <div className={styles.menuOneBox}>
        <ul
          style={{ padding: 0 }}
          onMouseOver={this.mouseoverUlHandle.bind(this)}
          onFocus={this.mouseoverUlHandle.bind(this)}
          onMouseOut={this.mouseoutUlHandle.bind(this)}
          onBlur={this.mouseoutUlHandle.bind(this)}
        >
          {this.menuOneHtml()}
          {this.hoverMenuHtml()}
        </ul>
      </div>
    );
  }
}
export default connect(state => ({
  goodsLevelData: state.goodsLevel.goodsLevelData
}))(MenuComp);
