/*
 * @Author: your name
 * @Date: 2021-12-16 14:37:12
 * @Description:
 * @FilePath: \zl-business\src\components\Unit\textInput\index.tsx
 */

import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';
import { Slider, Input } from 'antd';
import { returnClass } from '../unit';
import '../g.scss';

function LabelControlScope(props: ILabelTextInput) {
  const {
    title = 'label',
    value,
    change,
    size = 'normal',
    max,
    min,
    step,
    paddingSize = 'normal',
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  //如果接受数据是对象，有disabled的状态
  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className={returnClass(paddingSize)}>{title}</div>
        <div className="zl-large-screen-unit-scope-wrap">
          <Slider
            max={max}
            min={min}
            step={step||1}
            value={value}
            onAfterChange={(value) => {
              change(value, 'sliderblur');
            }}
            onChange={(value) => change(value, 'sliderchange')}
          />
          <div className="zl-large-screen-unit-scope-wrap-max-min">
            <span className="zl-large-screen-unit-scope-wrap-span">
              {min}
              <span>。</span>
            </span>
            <Input
              value={value}
              style={{ margin: '0 5px' }}
              onChange={(e) => change?.(e.target.value, 'change')}
              onPressEnter={(e) => {
                e.preventDefault();
                e.stopPropagation();
                change(e.target.value, 'blur');
              }}
              onBlur={(e) => change(e.target.value, 'blur')}
            />
            <span className="zl-large-screen-unit-scope-wrap-span">
              {max}
              <span>。</span>
            </span>
          </div>
        </div>
      </Wrap>
    );
  }, [title, value, paddingSize]);

  return Redio;
}

export default LabelControlScope;

export interface ILabelTextInput {
  title?: string;
  value?: number;
  change?: Function;
  size?: string;
  max?: number;
  min?: number;
  step?: number;
  paddingSize?: string;
  wrapStyle?: React.CSSProperties;
}