<template>
  <div class="hae-range-area">
    <div class="range-wrapper">
      <div ref="elL" class="min-round"></div>
      <div @click.self="setShowLine($event, 0)" ref="slider" class="range-slider"></div>
      <div @click.self="setShowLine($event, 1)" ref="elS" class="show-line"></div>
      <div ref="elR" class="add-round"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'range-area',
  data () {
    return {
      isDown: false,
      isDownR: false,
      cx: 0,
      ox: 0,
      cxR: 0,
      oxR: 0,
      rangeList: []
    };
  },
  props: {
    type: {
      type: String,
      default: 'value'
    },
    range: {
      type: Array,
      default: () => {
        return [0, 100];
      }
    }
  },
  methods: {
    setShowLine (e, type) {
      const offsetL = e.clientX - this.$refs.elL.offsetLeft < 0 ? this.$refs.elL.offsetLeft - e.clientX : e.clientX - this.$refs.elL.offsetLeft;
      const offsetR = e.clientX - this.$refs.elR.offsetLeft < 0 ? this.$refs.elR.offsetLeft - e.clientX : e.clientX - this.$refs.elR.offsetLeft;
      if (type === 0) {
        if (offsetL <= offsetR) {
          this.$refs.elL.style.left = e.offsetX - 11 + 'px';
        } else {
          this.$refs.elR.style.left = e.offsetX - 11 + 'px';
        }
      } else {
        if (this.$refs.elL.offsetLeft < this.$refs.elR.offsetLeft) {
          if (offsetL <= offsetR) {
            this.$refs.elL.style.left = e.offsetX + this.$refs.elL.offsetLeft + 'px';
          } else {
            this.$refs.elR.style.left = this.$refs.elL.offsetLeft + e.offsetX + 'px';
          }
        } else {
          // 交叉互换位置
          if (offsetL <= offsetR) {
            this.$refs.elL.style.left = this.$refs.elR.offsetLeft + e.offsetX + 'px';
          } else {
            this.$refs.elR.style.left = e.offsetX + this.$refs.elR.offsetLeft + 'px';
          }
        }
      }
      this.calculateLight();
    },
    calculateLight () {
      let left =
        this.$refs.elL.offsetLeft > this.$refs.elR.offsetLeft
          ? this.$refs.elR.offsetLeft + 11
          : this.$refs.elL.offsetLeft + 11;
      let width =
        this.$refs.elL.offsetLeft > this.$refs.elR.offsetLeft
          ? this.$refs.elL.offsetLeft - this.$refs.elR.offsetLeft
          : this.$refs.elR.offsetLeft - this.$refs.elL.offsetLeft;
      this.$refs.elS.style = 'left:' + left + 'px;width:' + width + 'px';
      this.calculateRange();
    },
    calculateRange () {
      const fullWidth = this.$refs.slider.clientWidth;
      let start = (this.$refs.elL.offsetLeft + 11) / fullWidth;
      let end = (this.$refs.elR.offsetLeft + 11) / fullWidth;
      switch (this.type) {
        case 'value':
          start = Math.ceil(start * this.range[1]);
          end = Math.ceil(end * this.range[1]);
          if (start > end) {
            if (start >= this.range[1]) {
              start = this.range[1];
            }
            if (end <= this.range[0]) {
              end = this.range[0];
            }
          } else {
            if (start <= this.range[0]) {
              start = this.range[0];
            }
            if (end > this.range[1]) {
              end = this.range[1];
            }
          }
          this.rangeList = start > end ? [end, start] : [start, end];
          break;
        case 'percent':
          if (start > end) {
            if (start >= 1) {
              start = 1;
            }
            if (end <= 0) {
              end = 0;
            }
          } else {
            if (start <= 0) {
              start = 0;
            }
            if (end >= 1) {
              end = 1;
            }
          }
          start = Math.ceil(start * 100);
          end = Math.ceil(end * 100);
          this.rangeList = start > end ? [end + '%', start + '%'] : [start + '%', end + '%'];
          break;
      }
      this.$emit('get-range', {
        type: this.type,
        value: this.rangeList
      });
    }
  },
  created () {
    this.$nextTick(() => {
      this.$refs.elL.addEventListener('touchstart', de => {
        const touch = de.touches[0];
        this.isDown = true;
        this.cx = touch.clientX;
        this.ox = this.$refs.elL.offsetLeft;
      });
      this.$refs.elR.addEventListener('touchstart', de => {
        const touch = de.touches[0];
        this.isDownR = true;
        this.cxR = touch.clientX;
        this.oxR = this.$refs.elR.offsetLeft;
      });
      document.addEventListener('touchmove', me => {
        if (this.isDown) {
          const touch = me.touches[0];
          const left = touch.clientX - this.cx + this.ox;
          const fullWidth = this.$refs.slider.clientWidth;
          if (left <= fullWidth - 11 && left >= -11) {
            this.$refs.elL.style.left =
              touch.clientX - (this.cx - this.ox) + 'px';
            this.calculateLight();
          }
        } else if (this.isDownR) {
          const fullWidth = this.$refs.slider.clientWidth;
          const touch = me.touches[0];
          const left = touch.clientX - this.cxR + this.oxR;
          if (left <= fullWidth - 11 && left >= -11) {
            this.$refs.elR.style.left =
              touch.clientX - (this.cxR - this.oxR) + 'px';
            this.calculateLight();
          }
        }
      });
      document.addEventListener('touchend', () => {
        this.isDown = false;
        this.isDownR = false;
      });
      this.calculateLight();
    });
  }
};
</script>
<style>
.range-wrapper {
  height: 2px;
  position: relative;
}
div.range-slider {
  height: 2px;
  width: 100%;
  background-color: #dddddd;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
}

div.min-round,
div.add-round {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid #108ee9;
  position: absolute;
  top: -12px;
  z-index: 2;
}

.show-line {
  height: 100%;
  background: #108ee9;
  position: absolute;
  z-index: 1;
  top: 0;
}

.min-round {
  left: -11px;
}

div.add-round {
  left: calc(100% - 11px);
}

.hae-range-area {
  padding: 30px;
}
</style>