import React, { useEffect, useState } from 'react';
import { AutoComplete, InputNumber } from 'antd';
import { useRef } from 'react/index';
/**
* @params {string} type 单元格 统计栏
* */
const NumberConfig = ({ value, onChange, defaultValues, type }) => {
  const [values, setValues] = useState({
    prefix: '',
    suffix: '',
    precision: '',
    ratio: 1,
  });
  const wrapper = {
    display: 'flex',
    gap: 6,
  };
  const width = { width: 80 };
  const optRef = useRef({
    prefix: [
      { value: '$' }, { value: '￥' },
    ],
    suffix: [
      { value: '千' }, { value: '万' }, { value: '元' }, { value: '万元' },
    ],
    precision: [
      { value: '0.0' }, { value: '0.00' }, { value: '0.000' }, { value: '0.0000' },
    ],
  });
  const valueChange = (key, value) => {
    let _values = { ...values };
    _values[key] = value;
    setValues(_values);
    onChange(_values);
  };
  useEffect(() => {
    let _values = { ...values };
    _values.prefix = value;
  }, [value]);
  return <div style={wrapper}>
    {/* 精度 倍率 前缀 后缀 类型*/}
    <AutoComplete onChange={(e) => valueChange('prefix', e)}
                  value={values.prefix} placeholder={'前缀'}
                  options={optRef.current.prefix} style={{ ...width }}/>
    <AutoComplete onChange={(e) => valueChange('suffix', e)}
                  value={values.suffix} placeholder={'单位/后缀'}
                  options={optRef.current.suffix}
                  style={{ ...width, width: 100 }}/>
    <AutoComplete onChange={(e) => valueChange('precision', e)}
                  value={values.precision} placeholder={'精度'}
                  options={optRef.current.precision} style={{ ...width }}/>
    <span>倍率：<InputNumber onChange={(e) => valueChange('ratio', e)}
                          value={values.ratio} step={1} style={{ ...width }}
                          min={1}/></span>
  </div>;
};
export default NumberConfig;