/*
 * Author: 黎永顺
 * name: 薪资账套-申报字段对应查询弹框
 * Description:
 * Date: 2023/8/16
 */
import React, { Component } from "react";
import { Icon, Popover } from "antd";
import { WeaInputSearch, WeaLocaleProvider } from "ecCom";
import { commonBrowserData } from "../../../apis";
import LedgerSalaryItemSelectDialog from "./ledgerSalaryItemSelectDialog";

const { getLabel } = WeaLocaleProvider;

class LedgerFieldsItemPopver extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataList: [],
      keywords: "",
      salaryItemSelectDialog: {
        visible: false, salarySobId: ""
      }
    };
    this.handleDebounce = null;
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.record !== this.props.record && nextProps.record.visible) {
      this.commonBrowserData(nextProps);
    } else {
      const { record } = nextProps;
      const salaryItemName = record.salaryItem[0] ? record.salaryItem[0].name : "";
      this.setState({ dataList: [], keywords: salaryItemName });
    }
  }

  handleFocusChange = (visible) => {
    const { keywords } = this.state;
    const { record, onChangeSwitch } = this.props;
    visible && onChangeSwitch(visible, record.id);
    if (visible && keywords) {
      this.setState({ keywords: "" });
    }
  };
  handleChange = (keywords) => {
    this.setState({ keywords }, () => this.handleSearch());
    !keywords && this.props.onChange([], this.props.record.id);
  };
  commonBrowserData = (props) => {
    const { salarySobId } = props;
    const { keywords } = this.state;
    const payload = {
      type: "salaryItemBrowser",
      jsonParam: JSON.stringify({ salarySobId, key: keywords })
    };
    commonBrowserData(payload).then(({ status, data }) => {
      if (status) {
        const { list: dataList } = data;
        this.setState({ dataList });
      }
    });
  };
  handleSearch = () => {
    if (!this.handleDebounce) {
      this.handleDebounce = _.debounce(() => {
        this.commonBrowserData(this.props);
        this.handleDebounce = null;
      }, 500);
    }
    this.handleDebounce();
  };
  handleClickItem = (item) => {
    this.setState({
      keywords: item.name
    }, () => this.props.onChange([item], this.props.record.id));
  };

  render() {
    const { keywords, dataList, salaryItemSelectDialog } = this.state;
    const { record, onChangeSwitch, salarySobId } = this.props;
    return (
      <React.Fragment>
        <Popover content={
          <ul className="income_result_wrapper">
            {
              !_.isEmpty(dataList) ?
                _.map(dataList, it => (<li key={it.key} onClick={() => this.handleClickItem(it)}>{it.name}</li>)) :
                <li className="emptyLi">
                  <Icon type="inbox"/>
                  <p className="empty-title">{getLabel(83553, "暂无数据")}</p>
                </li>
            }
          </ul>
        } trigger="click" placement="right" overlayClassName="income_pop_wrapper"
                 visible={record.visible}
                 onVisibleChange={(visible) => onChangeSwitch(visible, record.id)}
        >
          <WeaInputSearch
            style={{ width: 200 }} placeholder={getLabel(18214, "请选择")}
            onFocusChange={this.handleFocusChange}
            value={keywords} onSearchChange={this.handleChange}
            onSearch={() => this.setState({
              salaryItemSelectDialog: {
                ...salaryItemSelectDialog,
                visible: true,
                salarySobId
              }
            })}
          />
        </Popover>
        <LedgerSalaryItemSelectDialog
          {...salaryItemSelectDialog}
          handleClickItem={this.handleClickItem}
          handleClearSalaryItem={() => {
            this.setState({
              salaryItemSelectDialog: {
                ...salaryItemSelectDialog,
                visible: false,
                salarySobId: ""
              }
            }, () => this.props.onChange([], this.props.record.id));
          }}
          onCancel={() => this.setState({
            salaryItemSelectDialog: {
              ...salaryItemSelectDialog,
              visible: false,
              salarySobId: ""
            }
          })}
        />
      </React.Fragment>
    );
  }
}

export default LedgerFieldsItemPopver;
