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 styles from "./selectInput.less";
import debounce from "lodash/debounce";


const SelectInput = (props) => {
  console.log(props, "SelectInput props");
  
  const [value, setValue] = useState("");
  const [values, setValues] = useState("");
  const [searchValue, setSearchValue] = useState("");
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    // 监听滚动事件
    // const data = getSqlDropDownData()
    // console.log(data, "data");
    
  }, [visible]);
  const [columns, setColumns] = useState([
    { label: "选项1", value: "option1" },
    { label: "选项2", value: "option2" },
    { label: "选项3", value: "option3" },
  ]);
  const [coplyColumns, setCopyColumns] = useState(columns);
  //
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);

  const handleConfirm = () => {
    console.log(values, "values");
    setValue(values);
    setVisible(false);
  };

  const handleCancel = () => {
    Toast.show("取消按钮被点击");
    setVisible(false);
  };
  const changeInputValue = val => {
    console.log(val, "val");
  };

  const searchData = val => {
    // todo调用接口
    setSearchValue(val);
    const list = columns.filter(item => item.label.includes(val));
    setColumns(list);
    if (val === "") {
      console.log(36666);
      setColumns(coplyColumns);
    }
  };
  // 处理选择器变化
  const changeOption = val => {
    setValues(val[0]);
  };

  const getSqlDropDownData = async ({ sId, sModelsId, sName }) => {
    const url = `${commonConfig.server_host}business/getSelectLimit/${sId}?sModelsId=${sModelsId}&sName=${sName}`;
    const body = {
      sSqlCondition: "",
      sKeyUpFilterName: "",
      pageNum: 1,
      pageSize: 20,
    };
    const retrunData = await commonServices.postValueService(props.app.token, body, url);
    const sColumnNameConfigStr = retrunData.data?.dataset?.rows?.[0]?.sColumnNameConfig;
    return commonUtils.convertStrToObj(sColumnNameConfigStr, []);
  };
  return (
    <div>
      <div className={styles.inputBox}>
        <Input
          placeholder=""
          value={value}
          onChange={val => {
            setValue(val);
          }}
        />
        <div className={styles.icons} onClick={() => setVisible(true)}>
          <DownOutline />
        </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={val => changeOption(val)}
          style={{ "--height": "200px", "--item-height": "2.8rem" }}
        />
      </Popup>
    </div>
  );
};

export default SelectInput;