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

const getLabel = WeaLocaleProvider.getLabel;

let timeout = null;

class CustomBrowserMutiLeft extends Component {
  constructor(props) {
    super(props);
    this.dataObj = {};
  }

  onClick = (data) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      let { selectedKeys } = this.props;
      let keys = selectedKeys ? [...selectedKeys] : [];
      let datas = [];
      if (keys.indexOf(data.id) > -1) {
        keys = keys.filter((k) => k !== data.id);
      } else {
        keys.push(data.id);
      }
      keys.forEach((k) => this.dataObj[k] && datas.push(this.dataObj[k]));
      this.props.onClick && this.props.onClick(keys, datas);
    }, 200);
  };
  onDoubleClick = (data) => {
    clearTimeout(timeout);
    this.props.onDoubleClick && this.props.onDoubleClick([data]);
  };
  cls = (item) => {
    const { selectedKeys, filterData } = this.props;
    let cls = [];
    if (selectedKeys && selectedKeys.indexOf(item.id) > -1) {
      cls.push("selected");
    }
    if (filterData && filterData.filter((d) => d.id === item.id).length > 0) {
      cls.push("hide");
    }
    return cls.join(" ");
  };

  render() {
    const { datas, selectedKeys } = this.props;
    const list = datas.map(item => {
      this.dataObj[item.id] = item;
      return <li className={this.cls(item)} onClick={() => this.onClick(item)}
                 onDoubleClick={() => this.onDoubleClick(item)}>
        <div className="item-wrap" style={{ fontSize: 12 }}> {item.name} </div>
        <div className="icon-wrap"/>
        <i className="icon-coms-Selected"/>
      </li>;
    });
    return (
      <div className="wea-crm-list">
        <ul className="wea-crm-list-wrapper">
          {list}
        </ul>
        {
          list.length === 0 &&
          <div className="empty-tip" style={{ color: "#2f2929", paddingTop: 30, textAlign: "center" }}>
            {getLabel(111, "没有可显示的数据")}
          </div>
        }
      </div>
    );
  }
}

export default CustomBrowserMutiLeft;