<template>
<div class="inline-date">
    <el-popover placement="bottom" trigger="click">
        <div class="aos-number-range">
          <span>>=</span>
          <el-input-number
            ref="startDate"
            v-model="copyStart"
            :step="startStep"
            controls-position="right"
            :placeholder="startPlaceholder"
            :precision="startPrecision"
            :disabled="startDisabled"
            @change="handleStartChange"
            @blur="handleStartBlur"
            @focus="handleStartFocus"
          ></el-input-number>
          <span class="separators">{{separators}}</span>
          <el-input-number
            ref="endDate"
            v-model="copyEnd"
            :step="endStep"
            controls-position="right"
            :placeholder="endPlaceholder"
            :precision="endPrecision"
            :disabled="endDisabled"
            @change="handleEndChange"
            @blur="handleEndBlur"
            @focus="handleEndFocus"
          ></el-input-number>
        </div>
      <el-input slot="reference" v-model="fullDate" @input="handleInput" placeholder="请选择数值范围"></el-input>
    </el-popover>
  </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
    }
  },
  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
        }
        this.copyEndMin = this.copyStart
        this.copyStartMax = this.copyEnd
      },
      immediate: true
    }
  },
  computed: {
    copyValue () {
      const array = []
      array.push(this.copyStart)
      array.push(this.copyEnd)
      return array
    },
    fullDate() {
      return this.copyStart + "-" + this.copyEnd;
    }
  },
  created () {
    this.copyStartMax = this.copyEnd
    this.copyEndMin = this.endMin
  },
  data () {
    return {
      copyStart: null,
      copyEnd: null,
      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)
    }
  }
};
</script>
