import { useModel } from '@umijs/max';
import { Select } from 'antd';
import { useEffect } from 'react';

const { Option } = Select;

function InnerContactField(props) {
  const {
    initialState: { user },
  } = useModel('@@initialState');
  const { value, onChange, disabled = false } = props;
  const { userList, run, loading } = useModel('userList');
  useEffect(() => {
    run();
  }, []);
  useEffect(() => {
    if (user && userList) onChange?.(String(user.ID));
  }, [user, userList]);
  return (
    <Select
      showSearch
      value={user.ID}
      defaultValue={value ? Number(value) : undefined}
      onChange={(value) => {
        onChange?.(String(value));
        // onChange(JSON.stringify([value]));
      }}
      loading={loading}
      filterOption={(input, option) =>
        option.children.toLowerCase().includes(input.toLowerCase())
      }
      disabled={true}
    >
      {(userList || []).map((item) => (
        <Option key={item.ID} value={item.ID}>
          {item.CName}
        </Option>
      ))}
    </Select>
  );
}

export default InnerContactField;
