/*
  *  自定义浏览框组件
  * 选择框右边
  * @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);
  };

  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}>
              {this.generateTreeNodes()}
            </Tree>
          </WeaNewScroll>
        </div>
      </div>
    );
  }
}

export default CustomBrowserMutiRight;