import React, { useState, useRef, useEffect, useCallback } from "react";
import { Input, Popup, Button, Toast, PickerView, SearchBar,Checkbox } 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 => {
  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 { downIndex, tableName, viewRow, itemDetail, sModelsId, sValue, name, id, No, quotationData, showDropDown } = props || {};
  const { masterData } = props.state;
  const [bCanInput, setBCanInput] = useState(props.bCanInput);
  const { bReadonly } = itemDetail || {};
  const [propsType, setPropsType] = useState("");
  useEffect(() => {
    if (!itemDetail) return;
    const type = itemDetail.sName.charAt(0);
    setPropsType(type);
    const viewRowNew = itemDetail.sName ? viewRow?.[itemDetail.sName] : "";
    if (itemDetail.sDropDownType === "const") {
      return;
    }
    if (tableName.includes("slaveDown")) {
      if (!viewRow.sBackProcessData) return;
      // const data = viewRow.sBackProcessData[downIndex][itemDetail.sName];
      // setValue(data);
    } else {
      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 ? 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, i) => ({
          label: item.sCustomerName || item.sName || item.sProcessName || item.sColorName || item.sMaterialsName,
          value: item.sId || item.sSlaveId,
          ...item,
        }));
        setColumns(list);
        setCopyColumns(res.data.dataset.rows);
      }
    });
  };
  const handleConfirm = () => {
    if (!values[0]) {
      setVisible(false);
      return;
    }
    // 判断是否是
    const index = columns.findIndex(item => item.value === values[0]);
    const data = coplyColumns[index];
    data[itemDetail.sName] = data[itemDetail.sName] ? data[itemDetail.sName] : data.label || data.sName || data.sProcessName || data.sColorName;
    setValue(columns[index]?.label || "");
    props.onDataChange(tableName, itemDetail.sName, data, data.sId, coplyColumns);
    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, sVisColumnName } = itemDetail;
    if (sVisColumnName && sVisColumnName === "sProcessName") {
      if (sDropDownType === "sql") {
        const list = JSON.parse(itemDetail.sChineseDropDown).map(x => {
          return {
            label: x.sProcessName,
            value: x.sId,
            ...x,
          };
        });
        setColumns(list);
        setCopyColumns(list);
        // getSqlDropDownData(searchValue);
      } else if ((sDropDownType = "const")) {
        if (!itemDetail.showDropDown) return;
        const list = Object.entries(JSON.parse(itemDetail.showDropDown)).map(([key, value]) => ({
          label: value,
          value: key,
        }));
        setColumns(list);
        setCopyColumns(list);
      }
    } else {
      if (sDropDownType === "sql") {
        getSqlDropDownData(searchValue);
      } else if ((sDropDownType = "const")) {
        if (!itemDetail.showDropDown) return;
        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 = () => {
    setVisible(true);
  };
  return (
    <div>
      <div className={styles.inputBox}>
        {propsType === "b" ? (
         <Checkbox style={{height:'3.125rem'}}/>
        ) : (
          <div>
            {" "}
            <Input
              placeholder=""
              value={value}
              onChange={val => {
                setValue(val);
                props.onDataChange(tableName, itemDetail.sName, { [itemDetail.sName]: val }, null, coplyColumns);
              }}
              readOnly={bReadonly}
            />
            {!bCanInput ? (
              <div className={styles.icons} onClick={clickBtn}>
                <DownOutline />
              </div>
            ) : null}
          </div>
        )}
      </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;