/*
 * Author: 黎永顺
 * name: 更多菜单列表
 * Description:
 * Date: 2023/12/28
 */
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import { Menu } from "antd";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showDrop: false
    };
  }

  render() {
    const { showDrop } = this.state;
    const { dropMenuDatas } = this.props;
    const menu = dropMenuDatas ?
      <Menu mode="vertical" onClick={(o) => {
        dropMenuDatas.forEach(d => d.key === o.key && typeof d.onClick === "function" && d.onClick(o.key));
      }}>
        {
          dropMenuDatas && dropMenuDatas.map((d, i) => {
            return (
              <Menu.Item disabled={d.disabled} key={d.key || i}>
                <span className="menu-icon">{d.icon}</span>
                {d.content}
              </Menu.Item>
            );
          })}
      </Menu> : "";
    return (
      <div className="more-btn-menu-wrapper">
        {
          !_.isEmpty(dropMenuDatas) &&
          <span className="more-btn" onClick={() => this.setState({ showDrop: true })}>
            <i className="more-btn-icon icon-New-Flow-menu"/>
          </span>
        }
        <div className="more-btn-menu"
             onMouseLeave={() => this.setState({ showDrop: false })}
             style={{ display: showDrop ? "block" : "none" }}>
          <span className="more-btn"
                onClick={() => this.setState({ showDrop: false })}>
            <i className="more-btn-icon icon-New-Flow-menu"/>
          </span>
          <div className="more-btn-menu-icon-background"></div>
          {menu}
        </div>
      </div>
    );
  }
}

export default Index;