<template>
  <div class="ipub-slider">
    <div :class="['ipub-slider__wrap', number?'':'ipub-slider--number']">
      <div class="relative">
        <div class="ipub-slider__content"
             :ref="uuid"
             @mousedown="handleChange"
             @mouseup="handleChange"
             @click="handleChange">
          <div class="ipub-slider__choose"
               :style="{width: width+5+'px'}"></div>
        </div>
        <div class="ipub-slider__button"
             @click.stop
             @mouseup.stop
             @drag="handleDrag"
             @drop.prevent
             @mousedown.stop
             :style="{left: width+'px'}"></div>
      </div>
    </div>
    <div v-if="number"
         class="ipub-slider__number ipub-p3">
      <span v-for="n in total"
            :key="'ipub-slider__number'+n">{{n}}</span>
    </div>
  </div>
</template>

<script>
import { guid } from '../../../src/utils/utils'
export default {
  name: 'IpubSlider',
  props: {
    value: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 10
    },
    number: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      uuid: '',
      totalWidth: 0,
      width: 0,
      val: 0,
    }
  },
  watch: {
    value: {
      handler (val) {
        this.val = val - 1
        if (this.val > this.total - 1) {
          this.val = this.total - 1
        } else if (this.val < 0) {
          this.val = 0
        }
        this.width = this.val * this.totalWidth / (this.total - 1)
      },
      immediate: true
    }
  },
  mounted () {
    this.uuid = guid()
    setTimeout(() => {
      this.totalWidth = this.$refs[this.uuid].clientWidth - 20
      this.width = this.val * this.totalWidth / (this.total - 1)
    })
  },
  methods: {
    handleChange (e) {
      this.width = e.layerX
      this.getWidth()
    },
    handleDrag (e) {
      e.preventDefault ? e.preventDefault() : (e.returnValue = false)

      if (e.clientX === 0 && e.screenX === 0) {
        return
      }
      this.width += e.layerX
      this.getWidth()
      return false
    },
    getWidth () {
      this.val = Math.floor(this.width * (this.total - 1) / this.totalWidth)
      this.width = this.val * this.totalWidth / (this.total - 1)
      if (this.width < 0) {
        this.width = 0
      } else if (this.width > this.totalWidth) {
        this.width = this.totalWidth
      }
      this.$emit('input', this.val + 1)
      this.$emit('change', this.val + 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.ipub-slider {
  // height: 40px;
  &__wrap {
    padding: 10px 0;
  }
  &--number {
    padding: 15px 0;
  }
  &__content {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: $line_color;
    overflow: hidden;
    // position: relative;
  }
  &__choose {
    width: 10%;
    height: 100%;
    border-radius: 5px;
    background: $main_color;
  }
  &__button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: $key_color;
    position: absolute;
    left: calc(10% - 5px);
    top: -5px;
    cursor: pointer;
  }
  &__number {
    display: flex;
    padding: 0 5px;
    box-sizing: border-box;
    width: 100%;
    justify-content: space-between;
    > span {
      width: 10px;
      text-align: center;
      line-height: 10px;
    }
  }
}
</style>
