<template>
  <div class="number-range">
    <Input
      v-model="startNum"
      v-bind="$attrs"
      @on-blur="onBlurStartHandler"
      @on-change="onStartChange"
    ></Input>
    <span class="hr-range"> ~ </span>
    <Input
      v-model="endNum"
      v-bind="$attrs"
      @on-blur="onBlurEndHandler"
      @on-change="onEndChange"
    ></Input>
  </div>
</template>

<script>
export default {
  name: 'NumberRangeFix',

  components: {},

  props: {
    start: {
      type: [Number, String],
      default: ''
    },
    end: {
      type: [Number, String],
      default: ''
    },
    startAmount: {
      type: String,
      default: ''
    },
    endAmount: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      startNum: this.start,
      tempStart: '',
      endNum: this.end,
      tempEnd: ''
    };
  },

  computed: {},

  watch: {
    startAmount() {
      console.log('this.startAmount', this.startAmount);
      if (!this.startAmount) {
        this.$emit('inputStart', '');
        this.tempStart = '';
        this.startNum = '';
      }
    },
    endAmount() {
      if (!this.endAmount) {
        this.$emit('inputEnd', '');
        this.tempEnd = '';
        this.endNum = '';
      }
    }
  },

  created() {},

  mounted() {},

  methods: {
    // 千分位 保留2位小数点
    milliFormat(val) {
      if (/[^0-9\.]/.test(val)) {
        return '0.00';
      };

      val = val.replace(/^(\d*)$/, '$1.');
      val = (val + '00').replace(/(\d*\.\d\d)\d*/, '$1');
      val = val.replace('.', ',');
      const re = /(\d)(\d{3},)/;
      while (re.test(val)) {
        val = val.replace(re, '$1,$2');
      }
      val = val.replace(/,(\d\d)$/, '.$1');
      return val.replace(/^\./, '0.');
    },
    onBlurStartHandler() {
      if (this.startNum == this.tempStart) return;

      this.startNum = this.startNum.split(',').join('');
      const numStartNum = Number(this.startNum);

      const numEndNum = Number(this.endNum.split(',').join(''));
      if (numEndNum && numStartNum > numEndNum) {
        this.$emit('inputStart', '');
        this.startNum = '';
        return;
      }

      if (/[^0-9\.]/.test(this.startNum)) {
        this.$emit('inputStart', '');
        this.tempStart = '';
        this.startNum = '';
        return;
      };

      this.$emit('inputStart', this.startNum);
      const start = this.milliFormat(this.startNum);
      this.tempStart = start;
      this.startNum = start;
    },
    onBlurEndHandler() {
      if (this.endNum == this.tempEnd) return;
      this.endNum = this.endNum.split(',').join('');
      const numEndNum = Number(this.endNum);
      // 判断开始金额不能大于结束金额
      const numStartNum = Number(this.startNum.split(',').join(''));
      if (numStartNum && numStartNum > numEndNum) {
        this.$emit('inputEnd', '');
        this.endNum = '';
        return;
      }

      if (/[^0-9\.]/.test(this.endNum)) {
        this.$emit('inputEnd', '');
        this.tempEnd = '';
        this.endNum = '';
        return;
      };
      this.$emit('inputEnd', this.endNum);
      const end = this.milliFormat(this.endNum);
      this.tempEnd = end;
      this.endNum = end;
    },
    onStartChange(e) {
      console.log(e);
      if (!e.target.value) {
        this.$emit('inputStart', '');
        this.tempStart = '';
        this.startNum = '';
      }
    },
    onEndChange(e) {
      console.log(e);
      if (!e.target.value) {
        this.$emit('inputEnd', '');
        this.tempEnd = '';
        this.endNum = '';
      }
    }
  }
};
</script>

<style lang='less' scoped>
.number-range {
  display: flex;
  align-items: center;
  /deep/ .ivu-input {
    width: 100%;
  }
}
.hr-range {
  margin: 0 4px;
}
</style>
