import { Button, Input } from 'antd';
import React, { useRef } from 'react';
import FormItem from '../FormItem/FormItem'
import { getItemProps } from "../../utils"
import schema from "./schema"

const InputSearchWapper = (item: any) => {
  const data: any = getItemProps(schema, item)
  const { FormItemProps, ControlProps, btnAttr } = data;
  const Ref: any = useRef();
  const { placeholder } = ControlProps
  const { enterButtonText, onClick, loading } = btnAttr
  return (
    <FormItem
      label={FormItemProps.label}
      style={FormItemProps?.style}
    >
      <div style={{ display: 'flex' }}>
        <FormItem
          name={FormItemProps.name}
          rules={FormItemProps.rules}
          noStyle
        >
          <Input className='kx_antd_input' {...ControlProps} ref={Ref} placeholder={placeholder || `请输入${FormItemProps.label}`} />
        </FormItem>
        <Button
          loading={loading}
          style={{ marginLeft: '10px' }}
          onClick={() => {
            onClick && onClick(Ref.current.input.value);
          }}
          type="primary"
        >
          {enterButtonText}
        </Button>
      </div>
    </FormItem>
  );
};

export default InputSearchWapper;