/*
 * @Author: your name
 * @Date: 2021-12-20 09:53:02
 * @Description:
 * @FilePath: \zl-business\src\components\Unit\labelControlAndNumberInput\index.tsx
 */

import React, { useEffect, useState } from 'react';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { Slider, InputNumber } from 'antd';
import '../g.scss';

function LabelControlAndNumberInput(props: IControlAndNumberInput) {
  const {
    title,
    value,
    change,
    max,
    min,
    step,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    showUnit = true //是否显示单位
  } = props;

  const [inputValue, setInputValue] = useState(value);

  useEffect(() => {
    setInputValue(value);
  }, [value]);

  const _change = (type: string, e: any) => {
    change(type, e);
  };
  return (
    <div className="zl-large-screen-control-input" style={wrapStyle}>
      <div className="zl-large-screen-control-input-wrap">
        <div className="control">
          <Slider
            min={min}
            max={max}
            value={inputValue}
            step={step||1}
            onAfterChange={(value) => {
              _change('sliderblur', value);
            }}
            onChange={(value) => {
              setInputValue(value);
            }}
          />
        </div>
        <div className="zl-large-screen-input-number-control">
          {showUnit ? (
            <InputNumber
              controls={{
                upIcon: <CaretUpOutlined />,
                downIcon: <CaretDownOutlined />
              }}
              formatter={(value) => `${value}%`}
              parser={(value) => value.replace('%', '')}
              step={step||1}
              min={min}
              max={max}
              style={{ height: 28 }}
              value={inputValue}
              // defaultValue={inputValue}
              onChange={(value) => {
                setInputValue(value);
              }}
              onBlur={(e) => {
                let lastVal=step===1?parseInt(e.target.value):parseFloat(e.target.value)
                if (
                  e?.target?.value !== '' &&
                  !isNaN(lastVal)
                ) {
                  let value1 =
                    lastVal < min
                      ? min
                      : lastVal;
                  let newValue = value1 > max ? max : value1;
                  _change('inputnumberBlur', newValue);
                } else {
                  setInputValue(value);
                  _change('inputnumberBlur', value);
                }
              }}
              onPressEnter={(e) => {
                e.preventDefault();
                e.stopPropagation();
                let lastVal=step===1?parseInt(e.target.value):parseFloat(e.target.value)
                if (
                  e?.target?.value !== '' &&
                  !isNaN(lastVal)
                ) {
                  let value1 =
                    lastVal < min
                      ? min
                      : lastVal;
                  let newValue = value1 > max ? max : value1;
                  _change('inputnumberBlur', newValue);
                } else {
                  setInputValue(value);
                  _change('inputnumberBlur', value);
                }
              }}
            />
          ) : (
            <InputNumber
              controls={{
                upIcon: <CaretUpOutlined />,
                downIcon: <CaretDownOutlined />
              }}
              min={min}
              max={max}
              step={step||1}
              style={{ height: 28 }}
              value={inputValue}
              // defaultValue={inputValue}
              onChange={(value) => {
                setInputValue(value);
              }}
              onBlur={(e) => {
                let lastVal=step===1?parseInt(e.target.value):parseFloat(e.target.value)
                if (
                  e?.target?.value !== '' &&
                  !isNaN(lastVal)
                ) {
                  let value1 =
                    lastVal < min
                      ? min
                      : lastVal;
                  let newValue = value1 > max ? max : value1;
                  _change('inputnumberBlur', newValue);
                } else {
                  setInputValue(value);
                  _change('inputnumberBlur', value);
                }
              }}
              onPressEnter={(e) => {
                e.preventDefault();
                e.stopPropagation();
                let lastVal=step===1?parseInt(e.target.value):parseFloat(e.target.value)
                if (
                  e?.target?.value !== '' &&
                  !isNaN(lastVal)
                ) {
                  let value1 =
                    lastVal < min
                      ? min
                      : lastVal;
                  let newValue = value1 > max ? max : value1;
                  _change('inputnumberBlur', newValue);
                } else {
                  setInputValue(value);
                  _change('inputnumberBlur', value);
                }
              }}
            />
          )}
        </div>
      </div>
    </div>
  );
}

export default LabelControlAndNumberInput;

export interface IControlAndNumberInput {
  title?: string;
  value?: number;
  change?: Function;
  max?: number;
  min?: number;
  step?: number;
  wrapStyle?: React.CSSProperties;
  showUnit?: boolean;
}