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(props.sValue || ""); // 如果存在 name 属性，将其值赋值给 value
  const [values, setValues] = useState("");
  const [searchValue, setSearchValue] = useState("");
  const [visible, setVisible] = useState(false);
  const { sId } = props.itemDetail || {};
  const { viewRow, itemDetail, sModelsId, sValue, name, id, No, quotationData, showDropDown } = props || {};
  const [bCanInput, setBCanInput] = useState(props.bCanInput);
  const { bReadonly } = itemDetail || {};
  console.log("🚀 ~ formDatassss:", bReadonly);

  // useEffect(() => {
  //   setValue(props.sValue || ""); // 动态更新 value
  // }, [props.sValue]);
  useEffect(() => {
  if (!itemDetail) return;
  console.log(itemDetail.sName, 'viewRowNew');

  const viewRowNew = itemDetail.sName ? viewRow?.[itemDetail.sName] : "";
  console.log("🚀 ~ useEffect ~ viewRowNew:", viewRowNew);
  setValue(viewRowNew || ""); // 动态更新 value
}, [itemDetail, itemDetail?.sName, viewRow]);
  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: {
        sProductClassifyId: quotationData.sId,
      },
      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 || item.sName || item.sProcessName || item.sColorName,
          value: item.sId || item.sSlaveId,
        }));
        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;
    let { sDropDownType } = itemDetail;
    if (sDropDownType === "sql") {
      getSqlDropDownData(searchValue);
    } else if ((sDropDownType = "const")) {
      const list = Object.entries(JSON.parse(itemDetail.showDropDown)).map(([key, value]) => ({
        label: value,
        value: key,
      }));
      setColumns(list);
      setCopyColumns(list);
    }
  }, [visible]);
  useCallback;
  useEffect(() => {
    if (!sValue) return;
    setValue(sValue);
  }, [sValue]);
  useCallback;

  const clickBtn = () => {
    console.log(itemDetail, "clickBtn");

    setVisible(true);
  };
  return (
    <div>
      <div className={styles.inputBox}>
        <Input
          placeholder=""
          value={value}
          onChange={val => {
            setValue(val);
            props.setState(pre => ({ ...pre,[itemDetail.sName]:val}));
          }}
          readOnly={bReadonly}
        />
        {!bCanInput ? (
          <div className={styles.icons} onClick={clickBtn}>
            <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;