import React, { Component } from 'react';
import { InputNumber, Modal } from 'antd';
import styles from './styles.less';
import { NumberProps, NumberState } from '../editInterface';

export default class extends Component<NumberProps, NumberState> {
    static getDerivedStateFromProps(nextProps: NumberProps, prevState: NumberState) {
        const { prevProps } = prevState;
        let nextState: NumberState = {
            ...prevState,
            prevProps: nextProps,
            value: nextProps.value,
            cellData: nextProps.cellData,
        };
        if (JSON.stringify(prevProps.value) !== JSON.stringify(nextProps.value)) {
            nextState.value = nextProps.value;
        }
        if (JSON.stringify(prevProps.cellData) !== JSON.stringify(nextProps.cellData)) {
            nextState.cellData = nextProps.cellData;
        }
        return nextState;
    }
    constructor(props: NumberProps) {
        super(props);
        const { value, cellData } = props;
        this.state = {
            prevProps: props,
            value,
            cellData,
        };
    }

    onChange = (changedValue: number | undefined) => {
        this.setState({
            value: changedValue,
        });
    };

    resetValue = () => {
        const { cellData } = this.state;
        this.setState({
            value: cellData && cellData.length > 0 ? cellData[0].value : undefined,
            cellData,
        });
    };

    onBlur = (e: any) => {
        const {
            onChange,
            floatRange,
            columnConfig: { columnChsName },
            rowId,
        } = this.props;
        const { cellData } = this.state;
        const originValue = Array.isArray(cellData) && cellData.length > 0 ? cellData[0].value : undefined;
        // 检测浮动条件：编辑时，有浮动标记，原值不为0
        if (rowId && floatRange && originValue && Number(originValue) !== 0) {
            // 新值默认取0只用于计算，对应清空操作
            const changedValue = e.target.value || 0;
            const range = Math.abs(Number(changedValue) - Number(originValue)) / Number(originValue);
            if (Number(range) > Number(floatRange)) {
                const confirm = Modal.confirm({
                    title: '确认提示',
                    content: `${columnChsName}变更浮动较大，是否确认提交？`,
                    onOk: () => {
                        onChange({ changedValue: e.target.value, isBlur: true });
                    },
                    onCancel: () => {
                        this.resetValue();
                        confirm.destroy();
                    },
                });
                return;
            }
        }
        onChange({ changedValue: e.target.value, isBlur: true });
    };

    render() {
        const { value } = this.state;
        const { precision, min, max } = this.props;
        const selfProps = { value, precision, min, max };
        return (
            <div className={styles.container}>
                <InputNumber {...selfProps} onChange={this.onChange} onBlur={this.onBlur} value={value} />
            </div>
        );
    }
}