import Vue from 'vue';
import "../../../src/scss/slider.scss"; // Utils

import { getTouch } from "../../../es5/utils";
export default Vue.extend().extend({
  name: 'w-slider',
  props: {
    min: {
      type: Number,
      default: 0,
      validator: function validator(val) {
        return val >= 0;
      }
    },
    max: {
      type: Number,
      default: 100
    },
    step: {
      type: Number,
      default: 1,
      validator: function validator(val) {
        return val > 0;
      }
    },
    value: {
      type: Number
    },
    showValue: {
      type: Boolean,
      default: true
    },
    enableClick: {
      type: Boolean,
      default: true
    },
    disabled: Boolean
  },
  data: function data() {
    return {
      handlerStartPos: 0,
      sliderLeft: 0,
      sliderLength: 0
    };
  },
  computed: {
    percent: function percent() {
      if (typeof this.value === 'undefined' || this.value === null) return 0;
      return Math.floor((this.value - this.min) / (this.max - this.min) * 100);
    },
    stepWidth: function stepWidth() {
      return this.sliderLength * this.step / (this.max - this.min);
    }
  },
  created: function created() {
    if (this.min >= this.max) {
      throw new Error('property:max must be bigger than property:min');
    }
  },
  mounted: function mounted() {
    this.sliderLeft = this.$refs.inner.offsetLeft;
    this.sliderLength = this.$refs.inner.getBoundingClientRect().width;
  },
  methods: {
    getHandlerStartPos: function getHandlerStartPos() {
      var innerRect = this.$refs.inner.getBoundingClientRect();
      var handlerRect = this.$refs.handler.getBoundingClientRect();
      return handlerRect.left - innerRect.left;
    },
    onClick: function onClick(e) {
      e.preventDefault();
      if (this.disabled || !this.enableClick) return; // 距初始值的目标步数

      var steps = Math.round((e.clientX - this.sliderLeft) / this.stepWidth);
      var value = this.min + this.step * steps;
      this.$emit('input', value);
      this.$emit('change', value);
    },
    touchStart: function touchStart() {
      if (this.disabled) return;
      this.handlerStartPos = this.getHandlerStartPos();
    },
    touchMove: function touchMove(e) {
      if (this.disabled) return;
      var touch = getTouch(e); // 距初始值的目标步数

      var steps = Math.round((touch.clientX - this.sliderLeft) / this.stepWidth);
      var value = this.min + this.step * steps;
      value = value < this.min ? this.min : value > this.max ? this.max : value;
      this.$emit('input', value);
      this.$emit('change', value);
    }
  },
  render: function render() {
    var h = arguments[0];
    return h("div", {
      "class": "weui-slider-box"
    }, [h("div", {
      "class": {
        'weui-slider': true,
        'wv-slider--disabled': this.disabled
      }
    }, [h("div", {
      "class": "weui-slider__inner",
      "ref": "inner",
      "on": {
        "click": this.onClick
      }
    }, [h("div", {
      "style": {
        width: this.percent + '%'
      },
      "class": "weui-slider__track"
    }), h("div", {
      "style": {
        left: this.percent + '%'
      },
      "class": "weui-slider__handler",
      "ref": "handler",
      "on": {
        "touchstart": this.touchStart,
        "touchmove": this.touchMove
      }
    })])]), this.showValue && h("div", {
      "class": "weui-slider-box__value"
    }, [this.$slots.valueBox || this.value])]);
  }
});
//# sourceMappingURL=WSlider.js.map