<template>
  <div>
    <a-input-number
      :placeholder="minPlaceholder"
      :value="minValue"
      @change="onMinChange"
      style="width: 40%;"
      :min="min"
      :max="max"
      :step="step"
      :allowClear="true"
    />
    <span style="padding: 0 3px;">~</span>
    <a-input-number
      :placeholder="maxPlaceholder"
      :value="maxValue"
      @change="onMaxChange"
      style="width: 40%;"
      :min="min"
      :max="max"
      :step="step"
      :allowClear="true"
    />
  </div>
</template>

<script>

export default {
  name: 'RangeNumber',
  props: {
    placeholder: Array,
    value: Array,
    min: Number,
    max: Number,
    step: Number,
  },
  data() {
    return {
      minValue: null,
      maxValue: null,
      minPlaceholder: null,
      maxPlaceholder: null,
    }
  },
  created() {
    if (this.placeholder && this.placeholder.length === 2) {
      this.minPlaceholder = this.placeholder[0]
      this.maxPlaceholder = this.placeholder[1]
    }
  },
  watch: {
    value: {
      handler() {
        if (this.value && this.value.length === 2) {
          this.minValue = this.value[0]
          this.maxValue = this.value[1]
        } else {
          this.minValue = null
          this.maxValue = null
        }
      },
      immediate: true
    }
  },
  methods: {
    onMinChange(value) {
      const newValue = [value || value === 0 ? value : null, this.maxValue || this.maxValue === 0 ? this.maxValue : null]
      this.$emit("change", newValue)
    },
    onMaxChange(value) {
      const newValue = [this.minValue || this.minValue === 0 ? this.minValue : null, value || value === 0 ? value : null]
      this.$emit("change", newValue)
    }
  }
}

</script>
