import React, { useEffect, useState } from 'react';
import { Dropdown, Input, Menu, Spin, Tooltip } from 'antd';
import styles from './index.less';
import { DownOutlined } from '@ant-design/icons';

const InputSelect = (props) => {
  const { value = '', onChange, list } = props;
  const [show, setShow] = useState(false);
  useEffect(() => {
    setShow(false);
  }, [value]);
  return (
    <div className={styles.main}>
      <Input
        value={value}
        onChange={(e) => {
          onChange(e.target.value);
          setShow(false);
        }}
        // addonAfter={<DownOutlined />}
        onFocus={() => setShow(true)}
        allowClear
      />
      {show && list && list.length > 0 && (
        <ul className={styles.downUl}>
          {list.map((item) => (
            <Tooltip title={item.value}>
              <li
                key={item.key}
                onClick={(e) => {
                  onChange(item.value);
                }}
              >
                {item.value}
              </li>
            </Tooltip>
          ))}
        </ul>
      )}
    </div>
  );
};

export default InputSelect;
