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 from "../CustIcon";
// import menuData from "./data.json";

// 首页商品分类
class MenuComp extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isHover: false, // 判断是否hover一级菜单
      menuTowStatus: "0", // 二级菜单显示
      menuThreeData: [], // 三级导航数据
      menuTowData: [], // 二级导航数据
      isOpenPanel: false,
      positionTop: 45
    };
  }
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 : []
      });
    } else {
      this.setState({
        isHover: false
      });
    }
  }
  mouseoutHandle(e) {
    this.setState({
      isHover: false
    });
  }
  menuMoreHover(e) {
    e.stopPropagation();
    this.setState({
        isHover: false
    });
  }
  menuTowClick(item, index) {
    this.setState({
      menuThreeData: item,
      menuTowStatus: index
    });
  }
  goodsLevelDialogSelect() {
    this.setState({
      isOpenPanel: !this.state.isOpenPanel
    });
    setTimeout(() => {
      this.setState({
        positionTop: this.props.refsHight.clientHeight
      });
    }, 200);
  }
  // 菜单点击
  menuMore(item, index) {
    const { bindLevelClick } = this.props;
    bindLevelClick(item.id, index || "0");
    this.setState({
      isHover: false
  });
  }
  menuOneHtml() {
    const { goodsLevelData, defaultIndex } = this.props;
    const newGoodsLevelData = goodsLevelData ? goodsLevelData : [];
    const menuOneHtml = (newGoodsLevelData).map((item, index) => {
        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}${item.code}`}
          >
              <span className={defaultIndex == index ? styles.menuActive : ''}>{item.name}</span>
          </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}
              onMouseOver={this.menuTowClick.bind(this, item.items, index)}
              onFocus={this.menuTowClick.bind(this, item.items, index)}
              onClick={this.menuMore.bind(this, item)}
            >
              {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)}>{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", top: this.state.positionTop }}
      >
        {/* 二级菜单 */}
        {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)} >
              {item.name}
            </a>
          ))}
        </div>
      );
      return menuFourContent;
    }
  }
  render() {
    const { defaultIndex } = this.props;
    return (
      <div>
        <div className={styles.menuOneBox} style={{ height: this.state.isOpenPanel ? 'auto' : 45 }}>
          <span className={styles.allGoodsClass} style={defaultIndex == "all" ? { fontWeight: "bold", color: "#000" } : {}} onClick={this.menuMore.bind(this, "", "all")}>全部商品分类</span>
          <ul
            style={{ padding: 0 }}
            onMouseOver={this.mouseoverUlHandle.bind(this)}
            onFocus={this.mouseoverUlHandle.bind(this)}
            onMouseOut={this.mouseoutUlHandle.bind(this)}
            onBlur={this.mouseoutUlHandle.bind(this)}
            className={styles.menuUl}
          >
            {this.menuOneHtml()}
            {this.hoverMenuHtml()}
          </ul>
          <span className={styles.loadData}>
            <Icon
              type="down"
              className={styles.moreBtn}
              style={{ display: this.state.isOpenPanel ? "none" : "", fontSize: 16 }}
              onClick={this.goodsLevelDialogSelect.bind(this)}
            />
            <Icon
              type="up"
              className={styles.moreBtn}
              style={{ display: this.state.isOpenPanel ? "" : "none", fontSize: 16 }}
              onClick={this.goodsLevelDialogSelect.bind(this)}
            />
          </span>
        </div>
      </div>
    );
  }
}
export default connect(state => ({
  goodsLevelData: state.goodsLevel.goodsLevelData
}))(MenuComp);
