/*
  *  数据推送
  *   自定义薪资项目选择树
  * @Author:    黎永顺
  * @Date:      2024/11/20
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import { TreeSelect } from "antd";
import { formualSearchField, formualSearchGroup } from "../../../../apis/item";
import cs from "classnames";

const getLabel = WeaLocaleProvider.getLabel;
const TreeNode = TreeSelect.TreeNode;

class CustomTreeSelect extends Component {
  constructor(props) {
    super(props);
    this.state = { sourceList: [] };
  }

  componentDidMount() {
    formualSearchGroup({ referenceType: "sql" }).then(({ status, data }) => {
      if (status) this.setState({ sourceList: _.map(data, o => ({ ...o, isLeaf: true })) });
    });
  }

  getSourceItem = (sourceId) => {
    formualSearchField({ sourceId, extendParam: { referenceType: "sql" } }).then(({ status, data }) => {
      if (status) {
        this.setState({
          sourceList: _.map(this.state.sourceList, o => {
            if (o.key === sourceId) return {
              ...o,
              children: _.map(data, k => ({ key: k.fieldId, value: k.name, fieldType: k.fieldType, isLeaf: false }))
            };
            return { ...o };
          })
        });
      }
    });
  };
  generateTreeNodes = (data) => {
    const treeNodes = [], showData = [...data];
    showData.map((item) => {
      let title = (
        <div className="weapp-excel-code-action-list-variable">
          <span className="weapp-excel-code-action-list-variable-name">{item.value}</span>
          {
            item.fieldType ?
              <span
                className={cs("weapp-excel-code-action-list-variable-tip", { "danger": item.fieldType === "string" })}>{item.fieldType === "number" ? getLabel(111, "数字") : getLabel(111, "文本")}</span> :
              <span></span>
          }
        </div>
      );
      treeNodes.push(<TreeNode className="no-child-item" title={title} key={item.key} value={item.key}/>);
    });
    return treeNodes;
  };
  handleSelect = (nodeValue) => {
    const { form } = this.props, { sourceList } = this.state;
    const [source, __] = nodeValue.split("_");
    const itemName = _.find(_.find(sourceList, o => o.key === source).children, k => k.key === nodeValue).value;
    form.updateFields({ item: nodeValue, itemName, source });
  };

  render() {
    const { sourceList } = this.state, { detail } = this.props;
    const { itemName } = detail;
    return (
      <TreeSelect dropdownStyle={{ maxHeight: 320, overflow: "auto" }} defaultValue={itemName}
                  dropdownMatchSelectWidth className="custom_item_treeselect" showSearch
                  loadData={(node) => this.getSourceItem(node.props.value)}
                  onSelect={this.handleSelect}
                  treeNodeFilterProp="title"
                  filterTreeNode={(inputValue, treeNode) => {
                    const title = treeNode.props.title.props ? treeNode.props.title.props.children[0].props.children : treeNode.props.title;
                    return title.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0;
                  }}>
        {
          _.map(sourceList, o => (
            <TreeNode title={o.value} key={o.key} value={o.key} isLeaf={o.isLeaf} selectable={false}>
              {this.generateTreeNodes(o.children || [])}
            </TreeNode>))
        }
      </TreeSelect>
    );
  }
}

export default CustomTreeSelect;