<style lang="less" scoped>
.numberInput {
    width: calc(~"47% - 4px");
    border: 1px solid #dddee1;
}
</style>

<template>
    <div>
        <input
            class="numberInput ivu-input-number-input"
            type="number"
            :value="value[0]"
            :placeholder="placeholder"
            @input="handleInput0"
            ref="begin"
        />
        <span style="display:inline-block;text-align:center;width:6%">至</span>
        <input
            class="numberInput ivu-input-number-input"
            type="number"
            :value="value[1]"
            :placeholder="placeholder"
            @input="handleInput1"
            ref="end"
        />
    </div>
</template>
<script>
export default {
    name: "NumberRange",
    data() {
        return {
            data: [null, null]
        };
    },
    mounted() {
        if (this.value) {
            this.data = this.value;
        } else {
            this.data = [null, null];
            this.$refs.begin.value = null;
            this.$refs.end.value = null;
        }
    },
    watch: {
        value: function () {
            if (this.value) {
                this.data = this.value;
            } else {
                this.data = [null, null];
                this.$refs.begin.value = null;
                this.$refs.end.value = null;
            }
        }
    },
    methods: {
        handleInput0(event) {
            let value = Number(event.target.value);
            //let arr = [].concat(this.value);
            this.data[0] = value;
            if (this.data[0] > this.data[1]) {
                this.data[1] = this.data[0];
                this.$refs.end.value = this.data[1];
            }
            this.$emit("input", this.data); //触发 input 事件，并传入新值
        },
        handleInput1(event) {
            let value = Number(event.target.value);
            this.data[1] = value;
            // if (this.data[0] > this.data[1]) {
            //     this.data[0] = this.data[1];
            //     this.$refs.begin.value = this.data[1];
            // }
            this.$emit("input", this.data); //触发 input 事件，并传入新值
        }
    },
    props: {
        value: {
            type: Array,
            default: () => {
                return [];
            }
        },
        placeholder: {
            type: String,
            default: () => {
                return "";
            }
        }
    }
};
</script>
<style scoped>
input::-webkit-input-placeholder {
    /*WebKit browsers*/
    color: #bbbec4;
}
</style>