import './index.less';
import {Select as TSelect} from 'tdesign-react';
import {DeleteIcon} from 'tdesign-icons-react';

export default function (props) {
    const {
        options,
        className,
        clearable,
        customClear,
        multiple,
        filterable,
        autoWidth,
        popupProps,
        name,
        value,
    } = props;
    // autoWidth默认为true
    const propsAutoWidth = autoWidth ?? true;
    const propsPopupProps = popupProps ?? {};
    const propsFilterable = filterable ?? false;
    const propsCustomClear = customClear ?? false;
    const realName = name ?? '';
    const onChange = (value) => {
        if (props.onChange) {
            props.onChange(value, realName);
        }
    };

    // 清空数据
    const onClear = () => {
        if (props.onChange) {
            props.onChange('', realName);
        }
    }

    return (
        <TSelect
            className={className}
            value={value}
            clearable={clearable}
            filterable={propsFilterable}
            autoWidth={propsAutoWidth}
            popupProps={propsPopupProps}
            multiple={multiple}
            onChange={onChange}
            options={options}
            suffix={propsCustomClear ?
                (
                    <span onClick={onClear}>
                    <DeleteIcon/>
                    </span>
                ) : null}
        />
    );
}
