import "../../../src/scss/switch.scss"; // Utils

import { getTouch } from "../../../lib/utils";
import mixins from "../../../lib/utils/mixins"; // Mixins

import Toggleable from "../../../lib/mixins/toggleable"; // 开关的行程

var THUMB_STROKE = 20;
export default mixins(Toggleable).extend({
  name: 'w-switch',
  props: {
    disabled: Boolean
  },
  data: function data() {
    return {
      startX: 0,
      offset: 0,
      startOffset: 0,
      transition: ''
    };
  },
  computed: {
    thumbStyle: function thumbStyle() {
      return {
        transition: this.transition,
        transform: "translate3d(".concat(this.offset, "px, 0, 0)")
      };
    }
  },
  mounted: function mounted() {
    this.offset = this.isActive ? THUMB_STROKE : 0;
  },
  methods: {
    onClick: function onClick(e) {
      e.preventDefault();
      if (this.disabled) return;
      this.isActive = !this.isActive;
    },
    touchStart: function touchStart(e) {
      if (this.disabled) return;
      var touch = getTouch(e);
      this.startX = touch.clientX;
      this.startOffset = this.offset;
      this.transition = '';
    },
    touchMove: function touchMove(e) {
      if (this.disabled) return;
      var touch = getTouch(e);
      var deltaX = touch.clientX - this.startX;
      var targetOffset = this.startOffset + deltaX;

      if (targetOffset >= 0 && targetOffset <= THUMB_STROKE) {
        this.offset = targetOffset;
      } else if (targetOffset < 0) {
        this.offset = 0;
      } else if (targetOffset > THUMB_STROKE) {
        this.offset = THUMB_STROKE;
      }
    },
    onTouchend: function onTouchend(e) {
      if (this.disabled) return;
      var touch = getTouch(e);
      var deltaX = touch.clientX - this.startX;
      this.transition = '-webkit-transform .35s cubic-bezier(0.4, 0.4, 0.25, 1.35)';

      if (this.isActive) {
        if (deltaX < THUMB_STROKE / -2) {
          this.isActive = false;
        } else {
          this.offset = THUMB_STROKE;
        }
      } else {
        if (deltaX > THUMB_STROKE / 2) {
          this.isActive = true;
        } else {
          this.offset = 0;
        }
      }
    }
  },
  watch: {
    isActive: function isActive(val) {
      this.$emit('input', val);
      this.$emit('change', val);
      this.offset = val ? THUMB_STROKE : 0;
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    return h("div", {
      "class": {
        'wv-switch': true,
        'wv-switch-on': this.isActive,
        'wv-switch-disabled': this.disabled
      },
      "on": {
        "click": function click(e) {
          _this.onClick(e);
        }
      }
    }, [h("div", {
      "class": "background"
    }), h("div", {
      "class": "thumb",
      "style": this.thumbStyle,
      "on": {
        "touchstart": this.touchStart,
        "touchmove": this.touchMove,
        "touchend": this.onTouchend,
        "touchcancel": this.onTouchend
      }
    })]);
  }
});
//# sourceMappingURL=WSwitch.js.map