<template>
    <div>
        <div class="input-number-range" :class="{ 'is-disabled': disabled }">
            <div class="flex">
                <div class="from">
                    <a-input ref="input_from" v-model:value="userInputForm" :disabled="disabled" placeholder="最小值"
                        @blur="handleBlurFrom" @focus="handleFocusFrom" @input="handleInputFrom"
                        @change="handleInputChangeFrom" size="small"></a-input>
                </div>
                <div class="center">
                    <span>至</span>
                </div>
                <div class="to">
                    <a-input ref="input_to" v-model:value="userInputTo" :disabled="disabled" placeholder="最大值"
                        @blur="handleBlurTo" @focus="handleFocusTo" @input="handleInputTo" @change="handleInputChangeTo"
                        size="small"></a-input>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { isEmpty } from '@/utils/validate'
export default {
    name: 'ProInputNumberRange',

    props: {
        // 初始化范围
        value: { required: true },

        // 是否禁用
        disabled: {
            type: Boolean,
            default: false
        },

        // 精度参数
        precision: {
            type: Number,
            default: 0,
            validator (val) {
                return val >= 0 && val === parseInt(val, 10)
            }
        },
        // 最大值
        max: {
            type: Number
        },
        min: {
            type: Number
        },
        readIgnore: {
            type: String,
            default: null
        }
    },

    data () {
        let sMax = this.max
        let sMin = this.min
        // 获取max
        let maxTemp = this.getMax()
        if (isEmpty(sMax)) {
            sMax = maxTemp
        }
        if (isEmpty(sMin)) {
            sMin = -maxTemp
        }
        return {
            userInputForm: null,
            userInputTo: null,
            sMax: sMax,
            sMin: sMin,
        }
    },

    watch: {
        value: {
            immediate: true,
            handler (value) {
                /** 初始化范围 */
                if (value instanceof Array && this.precision !== undefined) {
                    this.userInputForm = value[0] ? value[0] : null
                    this.userInputTo = value[1] ? value[1] : null
                } else {
                    this.userInputForm = null
                    this.userInputTo = null
                }
            }
        }
    },

    methods: {
        getMax () {
            // 限制为整数和小数一共十五位，否则会有精度损失
            //2位小数，整数支持13位（15,2），3位小数，整数支持12位（15,3）
            let precision = this.precision
            if (precision != 0) {
                let integerPart = 9
                let integerPartRes = 0
                let fractionalPart = 0.9
                let fractionalPartRes = 0.9
                for (let index = 0; index < 15 - precision; index++) {
                    integerPartRes += integerPart
                    integerPart *= 10
                }
                for (let index = 0; index < precision - 1; index++) {
                    fractionalPart /= 10
                    fractionalPartRes += fractionalPart
                }
                return integerPartRes + fractionalPartRes
            } else {
                return 999999999999999
            }
        },
        // 根据精度保留数字
        toPrecision (num, precision) {
            if (precision === undefined) precision = 0;
            num = parseFloat(num);
            if (isNaN(num)) {
                return null;
            }
            num = Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision);
            let result = Number(num).toFixed(precision)
            return result;
        },

        handleBlurFrom (event) {
            this.$emit('blurfrom', event)
        },

        handleFocusFrom (event) {
            this.$emit('focusfrom', event)
        },

        handleBlurTo (event) {
            this.$emit('blurto', event)
        },

        handleFocusTo (event) {
            this.$emit('focusto', event)
        },

        handleInputFrom (value) {
            this.$emit('inputfrom', value)
        },

        handleInputTo (value) {
            this.$emit('inputto', value)
        },

        // from输入框change事件
        handleInputChangeFrom (value) {
            // 如果是非数字空返回null
            if (isNaN(value) || value === '') {
                this.$emit('input', [null, this.userInputTo])
                this.$emit('changefrom', this.userInputForm)
                return
            }

            // 初始化数字精度
            this.userInputForm = this.setPrecisionValue(value)
            // 如果from > to 将from值替换成to
            if (typeof this.userInputTo === 'number') {
                this.userInputForm =
                    parseFloat(this.userInputForm) <= parseFloat(this.userInputTo)
                        ? this.userInputForm
                        : this.userInputTo
            }
            //限制最大值最小值
            if (parseFloat(this.userInputForm) < this.sMin) {
                this.userInputForm = this.sMin
            }
            if (parseFloat(this.userInputForm) > this.sMax) {
                this.userInputForm = this.sMax
            }
            this.$emit('input', [this.userInputForm, this.userInputTo])
            this.$emit('changefrom', this.userInputForm)
        },

        // to输入框change事件
        handleInputChangeTo (value) {
            // 如果是非数字空返回null
            if (isNaN(value) || value === '') {
                this.$emit('input', [this.userInputForm, null])
                this.$emit('changefrom', this.userInputTo)
                return
            }

            // 初始化数字精度
            this.userInputTo = this.setPrecisionValue(value)

            // 如果to < tfrom 将to值替换成from
            if (typeof this.userInputForm === 'number') {
                this.userInputTo =
                    parseFloat(this.userInputTo) >= parseFloat(this.userInputForm)
                        ? this.userInputTo
                        : this.userInputForm
            }
            //限制最大值最小值
            if (parseFloat(this.userInputTo) < this.sMin) {
                this.userInputTo = this.sMin
            }
            if (parseFloat(this.userInputTo) > this.sMax) {
                this.userInputTo = this.sMax
            }
            this.$emit('input', [this.userInputForm, this.userInputTo])
            this.$emit('changeto', this.userInputTo)
        },

        // 设置成精度数字
        setPrecisionValue (value) {
            if (this.precision !== undefined) {
                const val = this.toPrecision(value, this.precision)
                return val
            }
            return null
        }
    }
}
</script>
<style lang="scss" scoped>
.from,
.to {
    width: 100%;

    // 取消element原有的input框样式
    ::v-deep .el-input__inner {
        text-align: center;
        margin: 0;
        padding: 0 15px;
        background-color: transparent;
    }
}

.input-number-range {
    background-color: #fff;
    border-radius: 4px;
}

.flex {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;

    .center {
        margin-top: 1px;
        margin: 0 10px;
    }
}

.is-disabled {
    background-color: #eef0f6;
    border-color: #e4e7ed;
    color: #c0c4cc;
    cursor: not-allowed;
}
</style>
