import { FormItem, Select } from '@formily/antd-v5';
import { Field } from '@formily/react';
import cx from 'classnames';
import './index.less';
import { FieldProps } from '../../typings';

const SelectInput: React.FC<FieldProps> = (props) => {
  const { name, title, options = [], validator = [], decoratorProps, componentProps } = props;

  return (
    <div className={cx('global_select')}>
      <Field
        {...props}
        name={name}
        title={title}
        dataSource={options}
        decorator={[
          FormItem,
          {
            ...decoratorProps,
          },
        ]}
        component={[
          Select,
          {
            allowClear: true,
            showSearch: true,
            filterOption: (inputValue, option) => {
              console.log('option.label3333', option.label);
              let l = option.label + '';

              return l && l.indexOf(inputValue) != -1;
            },
            ...componentProps,
            componenttypename: 'Select',
          },
        ]}
        validator={validator}
      />
    </div>
  );
};

export default SelectInput;