/* eslint-disable */
import React from "react";
// import * as commonConfig from '../../utils/config';
// import * as commonServices from '../../services/services';
import { Menu, Dropdown } from "antd";
import { CaretUpOutlined } from "@ant-design/icons";
import * as commonUtils from "../../utils/utils";
import ShowType from "../../components/Common/CommonComponent";

class OeeSearchComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      onChangeValue: ""
    };
    this.bFilterCondition = true;
    this.textInput = null;
  }
  // componentWillReceiveProps(nextProps) {
  //   const { slaveConfig } = nextProps;
  //   const iIndex = slaveConfig.gdsconfigformslave.findIndex(item => item.bFind);
  //   if (iIndex > -1) {
  //     this.setState({ filterName: slaveConfig.gdsconfigformslave[iIndex].showName });
  //   }
  // }

  handleSearch = (name, sFieldName, changeValue) => {
    let { slaveFilterCondition } = this.state;
    !slaveFilterCondition && (slaveFilterCondition = []);
    const conIndex = slaveFilterCondition.findIndex(
      item => item.bFilterName === sFieldName
    );
    if (conIndex !== -1) {
      slaveFilterCondition.splice(conIndex, 1);
    }
    slaveFilterCondition.push({
      bFilterName: sFieldName,
      bFilterCondition: "like",
      bFilterValue: changeValue[sFieldName]
    });

    this.setState({
      [`onChangeValue${sFieldName}`]: changeValue[sFieldName],
      slaveFilterCondition
    });
  };

  /* 点按钮搜索 */
  handleBtnSearch = () => {
    let { slaveFilterCondition } = this.state;
    const { slaveConfig } = this.props;
    if (commonUtils.isEmpty(slaveFilterCondition)) {
      slaveFilterCondition = [];
    }
    this.props.onGetData(slaveConfig, slaveFilterCondition);
  };

  render() {
    const { slaveConfig, app, sModelsId } = this.props;
    const searchConfig = commonUtils.isNotEmptyObject(slaveConfig)
      ? slaveConfig.gdsconfigformslave.filter(
          item => item.bFind && item.bVisible
        )
      : [];

    let item, showTypeProps, searchConfig1;
    if (searchConfig.length) {
      item = searchConfig[0];
      item.placeholder = item.showName;
      showTypeProps = {
        app,
        record: {},
        sId: item.sId /*   修改当前编号(数据格式:字符串)   */,
        name: "slave",
        form: this.props.form,
        formId: sModelsId,
        getSqlDropDownData: this.props.getSqlDropDownData,
        getSqlCondition: this.props.getSqlCondition,
        handleSqlDropDownNewRecord: this.props.handleSqlDropDownNewRecord,
        getFloatNum: this.props.getFloatNum,
        getDateFormat: this.props.getDateFormat,
        onChange: this.handleSearch,
        showConfig: item,
        formItemLayout: {},
        textArea: false,
        enabled: true,
        dataValue: this.state[`onChangeValue${item.sName}`],
        bTable: true,
        onFilterDropDownData: this.props.onFilterDropDownData,
        onSaveState: this.props.onSaveState,
        formRoute: this.props.formRoute
      };
      searchConfig1 = [...searchConfig];
      searchConfig1.shift();
    }

    return (
      <div style={{ height: "100%" }}>
        <div
          style={{
            height: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
          }}
          className="oeeSearchComponent"
        >
          {searchConfig1 && searchConfig1.length ? (
            <>
              <Dropdown
                open={true}
                trigger={["click"]}
                overlayStyle={{
                  background: "red"
                }}
                overlay={
                  <Menu onClick={() => {}}>
                    {searchConfig1.map(item => {
                      item.placeholder = item.showName;
                      const showTypeProps = {
                        app,
                        record: {},
                        sId: item.sId /*   修改当前编号(数据格式:字符串)   */,
                        name: "slave",
                        form: this.props.form,
                        formId: sModelsId,
                        getSqlDropDownData: this.props.getSqlDropDownData,
                        getSqlCondition: this.props.getSqlCondition,
                        handleSqlDropDownNewRecord: this.props
                          .handleSqlDropDownNewRecord,
                        getFloatNum: this.props.getFloatNum,
                        getDateFormat: this.props.getDateFormat,
                        onChange: this.handleSearch,
                        showConfig: item,
                        formItemLayout: {},
                        textArea: false,
                        enabled: true,
                        dataValue: this.state[`onChangeValue${item.sName}`],
                        bTable: true,
                        onFilterDropDownData: this.props.onFilterDropDownData,
                        onSaveState: this.props.onSaveState,
                        formRoute: this.props.formRoute,
                        iColValue: 24
                      };
                      return (
                        <div
                          className="oeeSearchInput"
                          style={{
                            flex: 1,
                            fontSize: "1.1rem",
                            padding: "0 2px 2px 2px"
                          }}
                        >
                          <ShowType {...showTypeProps} />
                        </div>
                      );
                    })}
                  </Menu>
                }
              >
                <div
                  style={{
                    height: "110%",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontSize: "26px",
                    color: "#177ddc",
                    width: "30px"
                  }}
                >
                  <CaretUpOutlined />
                </div>
              </Dropdown>
              <div
                className="oeeSearchInput"
                style={{ flex: 1, fontSize: "1.1rem" }}
              >
                <ShowType {...showTypeProps} />
                <div className="oeeSearch">
                  {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                  <a
                    key={0}
                    style={{ background: "rgb(23, 125, 220)" }}
                    onClick={() => this.handleBtnSearch()}
                  >
                    查询
                  </a>
                </div>
              </div>
            </>
          ) : commonUtils.isNotEmptyArr(searchConfig) ? (
            searchConfig.map(item => {
              item.placeholder = item.showName;
              const showTypeProps = {
                app,
                record: {},
                sId: item.sId /*   修改当前编号(数据格式:字符串)   */,
                name: "slave",
                form: this.props.form,
                formId: sModelsId,
                getSqlDropDownData: this.props.getSqlDropDownData,
                getSqlCondition: this.props.getSqlCondition,
                handleSqlDropDownNewRecord: this.props
                  .handleSqlDropDownNewRecord,
                getFloatNum: this.props.getFloatNum,
                getDateFormat: this.props.getDateFormat,
                onChange: this.handleSearch,
                showConfig: item,
                formItemLayout: {},
                textArea: false,
                enabled: true,
                dataValue: this.state[`onChangeValue${item.sName}`],
                bTable: true,
                onFilterDropDownData: this.props.onFilterDropDownData,
                onSaveState: this.props.onSaveState,
                formRoute: this.props.formRoute
              };
              return (
                <div
                  className="oeeSearchInput"
                  style={{ flex: 1, fontSize: "1.1rem" }}
                >
                  <ShowType {...showTypeProps} />
                  <div className="oeeSearch">
                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                    <a
                      key={0}
                      style={{ background: "rgb(23, 125, 220)" }}
                      onClick={() => this.handleBtnSearch()}
                    >
                      查询
                    </a>
                  </div>
                </div>
              );
            })
          ) : (
            ""
          )}
        </div>
      </div>
    );
  }
}
export default OeeSearchComponent;