import React, {PureComponent} from 'react';
import { Tooltip, InputNumber } from 'antd';
import styles from '../index.less'
import {NumberInput} from "@/components/NumberInput";


const formatNumber = (value) => {
    value += '';
    const list = value.split('.');
    const prefix = list[0].charAt(0) === '-' ? '-' : '';
    let num = prefix ? list[0].slice(1) : list[0];
    let result = '';
    while (num.length > 3) {
        result = `,${num.slice(-3)}${result}`;
        num = num.slice(0, num.length - 3);
    }
    if (num) {
        result = num + result;
    }
    return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
}

/**
 * 金额处理
 */
class NumericInput extends PureComponent {

    state = {
        disabled: false,
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        if(undefined != nextProps.disabled && nextProps.disabled !== this.props.disabled) {
            this.setState({disabled: nextProps.disabled});
        }
    }

    onChange = e => {
        // const { value } = e.target; // input 取值方式
        const value = e + '';
        const reg = /^\d*(\.\d*)?$/;
        if ((!isNaN(value) && reg.test(value)) || value === '') {
            this.props.onChange(value);
        }
    };

    // '.' at the end or only '-' in the input box.
    onBlur = () => {
        const { value, onBlur, onChange } = this.props;

        if(value) {

            let valueTemp = value + '';
            if (typeof(valueTemp) == 'string' && valueTemp?.charAt(valueTemp.length - 1) === '.') {
                valueTemp = valueTemp.slice(0, -1);
            }
            onChange(valueTemp?.replace(/0*(\d+)/, '$1'));
            if (onBlur) {
                onBlur();
            }
        }


    };

    render() {
        const { value, placeholder, min,precision } = this.props;
        const valueTem = value || value != undefined ? value + '' : '';
        const {disabled} = this.state;
        const title = valueTem ? (
            <span className={styles.numericInputTitle}>{valueTem !== '-' ? '￥' + formatNumber(valueTem) : '-'}</span>
        ) : (
            '请输入'
        );
        return (
            <Tooltip
                trigger={['focus']}
                title={title}
                placement="topLeft"
                overlayClassName="numeric-input"
            >
                <InputNumber
                    min={min !== 0 ? min : 0}
                    max={10000000000}
                    {...this.props}
                    value={valueTem}
                    onChange={this.onChange}
                    onBlur={this.onBlur}
                    placeholder={placeholder !== "" ? placeholder : ""}
                    formatter={value => `￥${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',').replace(/￥+/g, "￥")}
                    parser={value => `${value}`.replace(/\￥|\$\sR?|(,*)/g, '').replace(/￥+/g, "")}
					precision={precision? precision : 2}
                    maxLength={14}
                    disabled={disabled}
                    // addonAfter={('元')}
                />
            </Tooltip>
        );
    }
}

export default NumericInput;
