/*
  *  自定义浏览框组件
  * 选择框右边
  * @Author:    黎永顺
  * @Date:      2024/8/30
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { WeaInputSearch, WeaLocaleProvider, WeaNewScroll } from "ecCom";
import { Tree } from "antd";

const getLabel = WeaLocaleProvider.getLabel;
const TreeNode = Tree.TreeNode;

let timeout = null;

class CustomBrowserMutiRight extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: ""
    };
    this.nodeIds = [];
    this.nodeObj = {};
  }

  generateTreeNodes = () => {
    const { data } = this.props, { key } = this.state;
    const treeNodes = [];
    let showData = [...data];
    if (_.trim(key)) {
      showData = showData.filter((item) => {
        return item.name.indexOf(_.trim(key)) > -1;
      });
    }
    showData = _.uniqBy(showData, "id");
    this.nodeIds = [];
    this.nodeObj = {};
    showData.map((item) => {
      let title = (
        <div>
          <div className="item-wrap" style={{ whiteSpace: "normal" }}>
            <div className="item-top">
              <span style={{ marginRight: "5px" }}>{item.name}</span>
            </div>
            <div className="item-bottom"></div>
          </div>
        </div>
      );
      treeNodes.push(<TreeNode title={title} key={item["id"]} isLeaf={true}/>);
      this.nodeIds.push(item["id"]);
      this.nodeObj[item["id"]] = item;
    });
    return treeNodes;
  };
  handleSearchChange = (v) => this.setState({ key: v });
  checkHandler = (v) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      this.props.checkedCb && this.props.checkedCb(v);
    }, 200);
  };
  onDoubleClick = (key) => {
    clearTimeout(timeout);
    this.props.onDoubleClick && this.props.onDoubleClick(key);
  };
  onDragStart = (obj) => {
    clearTimeout(timeout);
    this.props.checkedCb && this.props.checkedCb([]);
  };
  onDrop = (obj) => {
    const dragNodes = obj.dragNodesKeys;
    const targetNode = obj.node.props.eventKey;
    const result = [];
    this.nodeIds.filter((item) => {
      return dragNodes.indexOf(String(item)) === -1;
    }).forEach((id) => {
      if (String(id) === targetNode) {
        dragNodes.forEach((drag) => {
          result.push(this.nodeObj[drag]);
        });
      }
      result.push(this.nodeObj[id]);
    });
    this.props.onDrag && this.props.onDrag(result);
  };

  render() {
    const { height, checkedKeys } = this.props;
    return (
      <div className="wea-transfer-right">
        <WeaInputSearch placeholder={getLabel(111, "请输入关键字搜索")} value={this.state.key}
                        onSearchChange={_.debounce(this.handleSearchChange, 200)}/>
        <div>
          <WeaNewScroll height={height || 400}>
            <Tree className="transfer-tree" draggable multiple={true} async={true} selectable={true}
                  onSelect={this.checkHandler} onDoubleClick={this.onDoubleClick} selectedKeys={checkedKeys}
                  onDragStart={this.onDragStart} onDrop={this.onDrop}>
              {this.generateTreeNodes()}
            </Tree>
          </WeaNewScroll>
        </div>
      </div>
    );
  }
}

export default CustomBrowserMutiRight;
