import React, { useState, useRef, useEffect, useCallback } from "react";
import { Input, Popup, Button, Toast, PickerView, SearchBar } from "antd-mobile";
import { DownOutline } from "antd-mobile-icons";
import commonConfig from "@/utils/config";
import * as commonServices from "@/services/services";
import * as commonFunc from "@/components/Common/commonFunc";
import * as commonUtils from "@/utils/utils";
import styles from "./selectInput.less";
import debounce from "lodash/debounce";

const SelectInput = props => {
  console.log("🚀 ~ selectInputValue:", props);
  const [value, setValue] = useState("");
  const [values, setValues] = useState("");
  const [searchValue, setSearchValue] = useState("");
  const [visible, setVisible] = useState(false);
  const { sId } = props.formData || {};
  const { sModelsId, bCanInput, sValue } = props || {};

  const [columns, setColumns] = useState([]);
  const [coplyColumns, setCopyColumns] = useState(columns);
  const getSqlDropDownData = async searchValue => {
    const url = `${commonConfig.server_host}business/getSelectLimit/${sId}?sModelsId=${sModelsId}&sName=${""}`;
    const body = {
      sSqlCondition: "",
      sKeyUpFilterName: searchValue,
      pageNum: 1,
      pageSize: 20,
    };
    commonServices.postValueService(props.app.token, body, url).then(res => {
      if (res.data.code === 1) {
        const list = res.data.dataset.rows?.map(item => ({
          label: item.sCustomerName,
          value: item.sId,
        }));
        setColumns(list);
        setCopyColumns(list);
      }
    });
  };
  const handleConfirm = () => {
    const data = columns.find(item => item.value === values[0]);
    setValue(data?.label || "");
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const searchData = async val => {
    if (val === "" || val === null || val === undefined) {
      setSearchValue("");
    } else {
      setSearchValue(val);
    }
    getSqlDropDownData(val);
  };
  // 处理选择器变化
  const debouncedChangeOption = useCallback(
    debounce(val => {
      setValues(val);
    }, 300), // 防抖时间设置为 300ms
    [columns]
  );

  const changeOption = val => {
    debouncedChangeOption(val);
  };
  useEffect(() => {
    if (!visible) return;
    getSqlDropDownData(searchValue);
  }, [visible]);
  useCallback;
  useEffect(() => {
    if (!sValue) return;
    setValue(sValue)
  }, [sValue]);
  useCallback;

  return (
    <div>
      <div className={styles.inputBox}>
        <Input
          placeholder=""
          value={value}
          onChange={val => {
            setValue(val);
          }}
        />
        {!bCanInput ? (
          <div className={styles.icons} onClick={() => setVisible(true)}>
            <DownOutline />
          </div>
        ) : null}
      </div>
      <Popup visible={visible} onMaskClick={() => setVisible(false)} onClose={() => setVisible(false)} bodyStyle={{ height: "50vh" }}>
        <div className={styles.popupHeader}>
          <Button onClick={handleCancel} color="primary" fill="none">
            取消
          </Button>
          <Button onClick={handleConfirm} color="primary" fill="none">
            确认
          </Button>
        </div>
        <div style={{ padding: "0 1.5rem", marginTop: "1rem" }}>
          <SearchBar placeholder="请输入内容" showCancelButton value={searchValue} onChange={val => searchData(val)} />
        </div>
        <PickerView columns={[columns]} value={values} onChange={changeOption} style={{ "--height": "200px", "--item-height": "2.8rem" }} />
      </Popup>
    </div>
  );
};

export default SelectInput;