import React from 'react';
import { Input, InputNumber } from 'antd';
import './styles.less';

const { Group: InputGroup } = Input;

export default function RegionNumber(props) {
  const { currentVal = {}, itemProps = {} } = props;
  let { regionKey, minProps: minPropsVal, maxProps: maxPropsVal, ...otherProps } = itemProps;
  if (!regionKey || !Array.isArray(regionKey)) {
    regionKey = ['minNum', 'maxNum'];
  }
  let compoProps = {
    ...otherProps,
  };
  let minProps = {
      ...minPropsVal,
      value: currentVal[regionKey[0]],
      onChange: value => props.onChange(value, `.${regionKey[0]}`),
    },
    maxProps = {
      ...maxPropsVal,
      value: currentVal[regionKey[1]],
      onChange: value => props.onChange(value, `.${regionKey[1]}`),
    };

  return (
    <InputGroup compact className={"region-number"}>
      <InputNumber
        {...compoProps}
        placeholder="最小值"
        {...minProps}
        className={"min-input-number"}
      />
      <Input placeholder="至" disabled className={"split-input"} />
      <InputNumber
        {...compoProps}
        placeholder="最大值"
        {...maxProps}
        className={"max-input-number"}
      />
    </InputGroup>
  );
}