import React, { useEffect, useMemo, useState } from 'react';

import { InputNumber } from 'antd';

function LargeScreenComponentInputNumber(
  props: ILargeScreenComponentInputNumber
) {
  const {
    styles,
    key,
    title = 'label',
    value,
    change,
    min,
    max,
    disabled = false,
    textStyle,
    inputStyle
  } = props;
  const [inputValue, setInputValue] = useState(value); //value的值
  //改变value的值
  useEffect(() => {
    setInputValue(value);
  }, [value]);
  return (
    <div style={{ ...styles }} key={key}>
      <span style={{ ...textStyle }}>{title}</span>
      <InputNumber
        size="small"
        keyboard
        controls={false}
        style={{ width: '100%',...inputStyle }}
        // min={min}
        // max={max}
        value={inputValue}
        disabled={disabled}
        onChange={(value) => {
                change?.({ value: parseInt(value), type: 'changeEvent' });
                setInputValue(parseInt(value));
            
        }}
        onPressEnter={(e) => {
          e.preventDefault();
          e.stopPropagation();
          if (
            isNaN(inputValue)
          ) {
            setInputValue(value);
            change?.({
                value: value,
                type: 'enterEvent'
              });
          }else{
            setInputValue(Math.max(min, Math.min(inputValue,max)));
            change?.({
                value: Math.max(min, Math.min(inputValue,max)),
                type: 'enterEvent'
              });
          }
        }}
        onBlur={() => {
          if (
            isNaN(inputValue)
          ) {
            setInputValue(value);
            change?.({
                value: value,
                type: 'blurEvent'
              });
          }else{
            setInputValue(Math.max(min, Math.min(inputValue,max)));
            change?.({
                value: Math.max(min, Math.min(inputValue,max)),
                type: 'blurEvent'
              });
          }
        }}
      />
    </div>
  );
}

export default LargeScreenComponentInputNumber;

export interface ILargeScreenComponentInputNumber {
  key: string | number;
  styles: React.CSSProperties;
  textStyle?: React.CSSProperties;
  inputStyle?: React.CSSProperties;
  title?: any;
  value?: number;
  change?: Function;
  size?: string;
  disabled?: boolean;
  suffixicon?: string;
  paddingSize?: string;
  min?: number;
  max?: number;
  wrapStyle?: React.CSSProperties;
  inputValueMin?: Number;
  minValue?: number;
  maxValue?: number;
}