<template>
  <div class="inline-number-range">
    <div>
      <el-input-number
        style="width: 100%"
        ref="startDate"
        clearable
        v-model="copyStart"
        :step="startStep"
        controls-position="right"
        :placeholder="startPlaceholder"
        :precision="precision"
        :disabled="startDisabled"
        @change="handleStartChange"
        @blur="handleStartBlur"
        @focus="handleStartFocus"
      ></el-input-number>
    </div>
    <div style="margin-top: 8px">
      <el-input-number
        style="width: 100%"
        ref="endDate"
        clearable
        v-model="copyEnd"
        :step="endStep"
        controls-position="right"
        :placeholder="endPlaceholder"
        :precision="precision"
        :disabled="endDisabled"
        @change="handleEndChange"
        @blur="handleEndBlur"
        @focus="handleEndFocus"
      ></el-input-number>
    </div>
  </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: "<=",
    },
    precision: {
      type: Number,
      default: 0,
    },
    startMin: {
      type: Number,
      default: -Infinity
    },
    startMax: {
      type: Number,
      default: Infinity
    },
    endMin: {
      type: Number,
      default: -Infinity
    },
    endMax: {
      type: Number,
      default:Infinity
    }
  },
  watch: {
    value: {
      handler: function (val, oldVal) {
        if (val) {
          if (!this.$_.isEqual(val, oldVal)) {
            if (Array.isArray(val)) {
                this.copyStart = val[0] ? val[0] : undefined
                this.copyEnd = val[1] ? val[1] : undefined
            } else {
              const array = val.split(this.separators)
              if (array.length === 2) {
                this.copyStart = array[0]
                this.copyEnd = array[1]
              }
            }
          }
        } else {
          this.copyStart = undefined
          this.copyEnd = undefined
        }
        this.copyEndMin = this.copyStart ? this.copyStart : -Infinity
        this.copyStartMax = this.copyEnd ? this.copyStart : Infinity
      },
      immediate: true
    }
  },
  computed: {
    copyValue () {
      const array = ['', '']
      if (this.copyStart) {
        array[0] = this.copyStart
      }
      if (this.copyEnd) {
        array[1]= this.copyEnd
      }
      return array
    },
    fullDate() {
      return this.copyStart + "-" + this.copyEnd;
    }
  },
  created () {
    this.copyStartMax = this.copyEnd
    this.copyEndMin = this.endMin
  },
  data () {
    return {
      copyStart: undefined,
      copyEnd: undefined,
      startDisabled: false,
      endDisabled: false,
      copyStartMax: 0,
      copyEndMin: 0
    }
  },
  methods: {
    handleInput() {
      this.$refs.startDate.focus();
      this.$refs.endDate.focus();
    },
    checkStartEndValue (start, end) {
      if (start <= end) {
        return true
      } else {
        return false
      }
    },
    handleStartChange (currentValue, oldValue) {
      // if (currentValue) {
      //   if (this.checkStartEndValue(currentValue, this.copyEnd)) {
      //     this.copyStart = currentValue
      //   } else {
      //     this.copyStart = oldValue
      //   }
      // } else {
      //   this.copyStart = 0
      // }
      // this.copyEndMin = this.copyStart
      this.copyStart = currentValue
      this.$emit('change', this.copyValue)
    },
    handleStartBlur (event) {
      this.$emit('blur', event)
    },
    handleStartFocus (event) {
      this.$emit('focus', event)
    },
    handleEndChange (currentValue, oldValue) {
      this.copyEnd = currentValue
      this.$emit('change', this.copyValue)
      // if (currentValue) {
      //   if (this.checkStartEndValue(this.copyStart, currentValue)) {
      //     this.copyEnd = currentValue
      //   } else {
      //     this.copyEnd = oldValue
      //   }
      //   this.copyStartMax = this.copyEnd
      //   this.$emit('change', this.copyValue)
      // } else {
      //   this.copyStart = 0;
      //   this.copyEnd = 0;
      //   this.copyEndMin = 0
      //   this.copyStartMax = this.copyEnd
      //   this.$emit('change', [])
      // }
      
    },
    handleEndBlur (event) {
      this.$emit('blur', event)
    },
    handleEndFocus (event) {
      this.$emit('focus', event)
    },
    reset () {
      this.copyStart = undefined
      this.copyEnd = undefined
    }
  }
};
</script>
