<template>
  <div class="aos-number-range">
    <el-input-number
      v-model="copyStart"
      :step="startStep"
      controls-position="right"
      :placeholder="startPlaceholder"
      :precision="startPrecision"
      :min="startMin"
      :max="copyStartMax"
      :disabled="startDisabled"
      @change="handleStartChange"
      @blur="handleStartBlur"
      @focus="handleStartFocus"
    ></el-input-number>
    <span class="separators">{{separators}}</span>
    <el-input-number
      v-model="copyEnd"
      :step="endStep"
      controls-position="right"
      :placeholder="endPlaceholder"
      :precision="endPrecision"
      :min="copyEndMin"
      :max="endMax"
      :disabled="endDisabled"
      @change="handleEndChange"
      @blur="handleEndBlur"
      @focus="handleEndFocus"
    ></el-input-number>
  </div>
</template>

<script>
export default {
  name: "AosNumberRange",
  props: {
    value: {
      type: [Array,String],
      default: ""
    },
    separators: {
      type: String,
      default: "-",
    },
    startStep: {
      type: Number,
      default: 1,
    },
    endStep: {
      type: Number,
      default: 1,
    },
    startPlaceholder: {
      type: String,
      default: "请输入起始数值",
    },
    endPlaceholder: {
      type: String,
      default: "请输入结束数值",
    },
    startPrecision: {
      type: Number,
      default: 0,
    },
    endPrecision: {
      type: Number,
      default: 0,
    },
    startMin: {
      type: Number,
      default: -Infinity
    },
    startMax: {
      type: Number,
      default: Infinity
    },
    endMin: {
      type: Number,
      default: -Infinity
    },
    endMax: {
      type: Number,
      default:Infinity
    },
    checkMinAndMax: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value: {
      handler: function (val, oldVal) {
        if (val) {
          if (!this.$_.isEqual(val, oldVal)) {
            if (Array.isArray(val)) {
                this.copyStart = val[0] ? val[0] : 0
                this.copyEnd = val[1] ? val[1] : 0
            } else {
              const array = val.split(this.separators)
              if (array.length === 2) {
                this.copyStart = array[0]
                this.copyEnd = array[1]
              }
            }
          }
        } else {
          this.copyStart = 0
          this.copyEnd = 0
        }
        if (this.checkMinAndMax) {
          this.copyEndMin = this.copyStart
          this.copyStartMax = this.copyEnd
        } else {
          this.copyStartMax = Infinity
          this.copyEndMin = -Infinity
        }
      },
      immediate: true
    }
  },
  computed: {
    copyValue () {
      const array = []
      array.push(this.copyStart)
      array.push(this.copyEnd)
      return array
    }
  },
  created () {
    this.initStartMaxAndEndMin()
  },
  data () {
    return {
      copyStart: 0,
      copyEnd: 0,
      startDisabled: false,
      endDisabled: false,
      copyStartMax: 0,
      copyEndMin: 0
    }
  },
  methods: {
    initStartMaxAndEndMin() {
      if (this.checkMinAndMax) {
        this.copyStartMax = this.copyEnd
        this.copyEndMin = this.endMin
      } else {
        this.copyStartMax = Infinity
        this.copyEndMin = -Infinity
      }
    },
    checkStartEndValue (start, end) {
      if (start <= end) {
        return true
      } else {
        return false
      }
    },
    handleStartChange (currentValue, oldValue) {
      if (currentValue) {
        if (this.checkMinAndMax) {
          if (this.checkStartEndValue(currentValue, this.copyEnd)) {
            this.copyStart = currentValue
          } else {
            this.copyStart = oldValue
          }
        } else {
          this.copyStart = currentValue
        }
      } else {
        this.copyStart = 0
      }
      if (this.checkMinAndMax) {
        this.copyEndMin = this.copyStart
      }
      this.$emit('change', this.copyValue)
    },
    handleStartBlur (event) {
      this.$emit('blur', event)
    },
    handleStartFocus (event) {
      this.$emit('focus', event)
    },
    handleEndChange (currentValue, oldValue) {
      if (currentValue) {
        if (this.checkMinAndMax) {
          if (this.checkStartEndValue(this.copyStart, currentValue)) {
            this.copyEnd = currentValue
          } else {
            this.copyEnd = oldValue
          }
        } else {
          this.copyEnd = currentValue
        }
        if (this.checkMinAndMax) {
          this.copyStartMax = this.copyEnd
        }
        this.$emit('change', this.copyValue)
      } else {
        if (this.checkMinAndMax) {
          this.copyStart = 0;
          this.copyEnd = 0;
          this.copyEndMin = 0
          this.copyStartMax = this.copyEnd
        } else {
          if (currentValue === 0) {
            this.copyEnd = 0;
            this.$emit('change', this.copyValue)
          } else {
            this.copyEnd = '';
            this.$emit('change', [])
          }
        }
      }
    },
    handleEndBlur (event) {
      this.$emit('blur', event)
    },
    handleEndFocus (event) {
      this.$emit('focus', event)
    }
  }
};
</script>
