<template>
  <div class="sliderBox">
    <div class="slider-container theme-green" ref="sliderBar" :style="{width:sliderWidth+'px'}">
      <div class="back-bar">
        <div v-for="(item,index) in barList" :key="index" @mousedown="drag(index)">
          <div class="pointer" :style="{left:item.left+'px',zIndex:item.zIndex}"></div>
          <div :class="`colorBar${index}`" class="color" :style="{width:item.width+'px',left:barList[index].wLeft + 'px'}"></div>
          <div class="pointer-label" :style="{left:item.left+'px'}">
            <div class="content">{{showList[index]}}</div>
            <div class="arrow"></div>
          </div>
        </div>
      </div>
    </div>
    <b-btn class="btn"  variant="primary" @click="range" style="width:70px">查詢</b-btn>
  </div>
</template>

<script>
export default {
  name: 'ScrollBar',
  data () {
    return {
      sumlist: [0, 0.1, 0.3, 0.5, 1, 2, 3, 5, 7, 10, 15, 20, 25, 30, 40, 50, 60, 80, 100, 120, 140, 160, 180, 200,
        250, 300, 350, 400, 450, 500, 600, 700, 800, 900, 1000, 1500, 2000, 5000, 10000],
      showList: ['2萬', '15萬', '50萬', '140萬', '300萬', '600萬', '1500萬', '10000萬'],
      sliderWidth: 787, // bar的寬度14px  20px為一個分割
      zIndex: 2,
      bar: 14, // bar的寬度14px
      singleRange: 20, // 單個區間的寬度
      standardData: [5, 10, 15, 20, 25, 30, 35, 38], // 傳值給後臺的資料 20px 為1
      barList: [{
        left: 93,
        width: 93,
        wLeft: 0,
        zIndex: 2
      },
      {
        left: 193,
        width: 100,
        wLeft: 93,
        zIndex: 2
      },
      {
        left: 293,
        width: 100,
        wLeft: 193,
        zIndex: 2
      },
      {
        left: 393,
        width: 100,
        wLeft: 293,
        zIndex: 2
      },
      {
        left: 493,
        width: 100,
        wLeft: 393,
        zIndex: 2
      },
      {
        left: 593,
        width: 100,
        wLeft: 493,
        zIndex: 2
      },
      {
        left: 693,
        width: 100,
        wLeft: 593,
        zIndex: 2
      },
      {
        left: 753,
        width: 60,
        wLeft: 693,
        zIndex: 2
      }]
    }
  },
  methods: {
    drag (index) {
      document.onmousemove = (e) => {
        e.preventDefault()
        let left = this.$refs.sliderBar.offsetLeft
        let hideFlag = document.getElementById('x-side-menu').className.indexOf('hide')
        if (hideFlag > -1) {
          left = this.$refs.sliderBar.offsetLeft + 54
        } else {
          left = this.$refs.sliderBar.offsetLeft + 214
        }
        let position = e.clientX - left
        let leftRange = this.bar / 2 // bar居中放
        let minWidth = this.singleRange - this.bar / 2
        let maxWidth = this.sliderWidth - this.singleRange - leftRange // 最後兩格居中
        this.barList[index].left = position - leftRange
        if (index === 0) {
          if (position <= 20) {
            this.barList[index].left = minWidth // bar為14 一個區間是20，bar正好在中間 所以 20 - 7
            this.barList[index].width = minWidth
            position = minWidth
          }
          if (this.barList[index].left >= this.barList[index + 1].left) {
            this.barList[index].left = this.barList[index + 1].left
            this.barList[index].width = this.barList[index].left
            position = this.barList[index].left + leftRange
          }
          this.barList[index].width = left
          this.barList[index + 1].wLeft = this.barList[index].left
          this.barList[index + 1].width = this.barList[index + 1].left - this.barList[index].left
        } else if (index === 7) {
          if (position >= maxWidth) {
            this.barList[index].left = maxWidth
            this.barList[index].width = this.barList[index].left - this.barList[index - 1].left
            this.barList[index].wLeft = this.barList[index - 1].left
            position = maxWidth
          }
          if (this.barList[index].left <= this.barList[index - 1].left) {
            this.barList[index].left = this.barList[index - 1].left
            this.barList[index].width = 0
            this.barList[index].wLeft = this.barList[index - 1].left
            position = this.barList[index].left + leftRange
          }
          this.barList[index].wLeft = this.barList[index - 1].left
          this.barList[index].width = this.barList[index].left - this.barList[index - 1].left
        } else {
          this.barList[index].width = this.barList[index].left - this.barList[index - 1].left
          if (this.barList[index].left <= this.barList[index - 1].left) {
            this.barList[index].left = this.barList[index - 1].left
            position = this.barList[index].left + leftRange
          }
          if (this.barList[index].left >= this.barList[index + 1].left) {
            this.barList[index].left = this.barList[index + 1].left
            position = this.barList[index].left + leftRange
          }
          this.barList[index].wLeft = this.barList[index - 1].left
          this.barList[index].width = this.barList[index].left - this.barList[index - 1].left
          this.barList[index + 1].wLeft = this.barList[index].left
          this.barList[index + 1].width = this.barList[index + 1].left - this.barList[index].left
        }
        this.standardData[index] = parseInt((position + leftRange) / this.singleRange)
        this.showList[index] = this.sumlist[this.standardData[index]] + '萬'
      }
      document.onmousedown = () => {
        this.barList[index].zIndex = this.zIndex++
      }
      document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    range () {
      let range = Array.from(new Set(this.standardData))
      this.$emit('rangeValue', range) // 向頁面傳值
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   .sliderBox .btn {
     margin-left: 20px;
    float:left;
  }
  .slider-container {
    height:46px;
    float:left;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
  }
  .slider-container .back-bar {
    height: 12px;
    margin-top:15px;
    position: relative;
    background:#57ee7a;
    border-radius: 5px;
  }
  .slider-container .back-bar .pointer {
    position: absolute;
    cursor:pointer;
    opacity: 1;
    z-index: 2;
    width: 14px;
    height: 32px;
    top: -8px;
    border-radius:30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #328cff;
  }
  .slider-container .back-bar .pointer-label {
    position: absolute;
    top: -40px;
    height:32px;
  }
  .slider-container .back-bar .color{
    height:12px;
    position:absolute
  }
  .slider-container .back-bar .colorBar0{
    border-radius:5px 0 0 5px;
    background:#e8fded
  }
  .slider-container .back-bar .colorBar1{
    background:#dcfae4
  }
  .slider-container .back-bar .colorBar2{
    background:#cdf6d7
  }
  .slider-container .back-bar .colorBar3{
    background:#b9f2c6
  }
  .slider-container .back-bar .colorBar4{
    background:#a6eeb6
  }
  .slider-container .back-bar .colorBar5{
    background:#72e28c
  }
  .slider-container .back-bar .colorBar6{
    background:#6ae084
  }
  .slider-container .back-bar .colorBar7{
    background:#4fe071;
  }
  .slider-container .back-bar .content{
    line-height: 22px;
    padding: 0 10px;
    color: #666;
    background: #e7e8ec;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    font-size: 14px;
    position: absolute;
    left:8px;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    z-index: 1;
  }
  .slider-container .back-bar .arrow{
    width: 0;
    height: 0;
    line-height: 0;
    bottom:-6px;
    border:8px solid #e7e8ec;
    border-color: #e7e8ec transparent transparent transparent;
    position: absolute;
    z-index: 2;
  }
  .slider-container .back-bar .focused {
    z-index: 10;
  }
  .slider-container .clickable-dummy {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .slider-container .scale {
    top: 2px;
    position: relative;
  }
  .slider-container .scale span {
    position: absolute;
    height: 5px;
    border-left: 1px solid #999;
    font-size: 0;
  }
  .slider-container .scale ins {
    font-size: 9px;
    text-decoration: none;
    position: absolute;
    left:-5px;
    top: 8px;
    color: #999;
    line-height: 1;
  }
  .slider-container.slider-readonly .clickable-dummy,
  .slider-container.slider-readonly .pointer {
    cursor: auto;
  }

  .theme-green .back-bar .pointer-label {
    color: #999;
  }
  .theme-green .back-bar .focused {
    color: #333;
  }
  .theme-green .scale span {
    border-left: 1px solid #e5e5e5;
  }
  .theme-green .scale ins {
    color: #999;
  }
</style>