import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
import "../../../src/scss/cell-swipe.scss";
import { getTouch } from "../../../es5/utils";
import WCell from "../WCell";
import ClickOutside from "../../directives/click-outside"; // Utils

import mixins from "../../../es5/utils/mixins"; // Mixins

import Routable from "../../../es5/mixins/routable";
export default mixins(Routable).extend({
  name: 'w-cell-swipe',
  components: {
    WCell: WCell
  },
  directives: {
    ClickOutside: ClickOutside
  },
  props: {
    title: [String, Number],
    value: [String, Number],
    isLink: Boolean
  },
  data: function data() {
    return {
      startPosX: 0,
      rightWidth: 0,
      offset: 0,
      startOffset: 0,
      deltaX: 0,
      transition: ''
    };
  },
  computed: {
    style: function style() {
      return {
        transition: this.transition,
        transform: "translate3d(".concat(this.offset, "px, 0px, 0px)")
      };
    }
  },
  mounted: function mounted() {
    this.rightWidth = this.$refs.rightBtns.clientWidth;
  },
  methods: {
    touchStart: function touchStart(e) {
      var touch = getTouch(e);
      this.startPosX = touch.clientX;
      this.startOffset = this.offset;
      this.transition = '';
    },
    touchMove: function touchMove(e) {
      var touch = getTouch(e);
      this.deltaX = touch.clientX - this.startPosX;
      var targetOffset = this.startOffset + this.deltaX;
      this.offset = targetOffset > 0 ? 0 : targetOffset < -this.rightWidth ? -this.rightWidth : targetOffset;
    },
    onTouchend: function onTouchend() {
      this.transition = 'all 200ms ease'; // when the moving distance is smaller than 20,
      // the state of the cell-swipe will recover

      if (Math.abs(this.deltaX) < 20) {
        this.offset = this.startOffset;
        return;
      }

      if (this.startOffset < 0 && this.deltaX > 0) {
        this.offset = 0;
      } else if (this.startOffset === 0 && this.deltaX < 0) {
        this.offset = -this.rightWidth;
      }
    },
    onClickOutside: function onClickOutside() {
      this.offset = 0;
    }
  },
  render: function render(h) {
    var directives = [{
      name: 'click-outside',
      arg: 'touchstart',
      value: this.onClickOutside
    }];
    return h("div", _mergeJSXProps([{
      "class": "weui-cell weui-cell_swiped"
    }, {
      directives: directives
    }]), [h("div", {
      "class": "weui-cell__bd",
      "ref": "cellBd",
      "on": {
        "touchstart": this.touchStart,
        "touchmove": this.touchMove,
        "touchend": this.onTouchend,
        "touchcancel": this.onTouchend
      },
      "style": this.style
    }, [h(WCell, {
      "attrs": {
        "title": this.title,
        "value": this.value,
        "is-link": this.isLink,
        "to": this.to,
        "url": this.routeLink
      },
      "ref": "cell"
    }, [h("template", {
      "slot": "icon"
    }, [this.$slots.icon]), !this.title && h("template", {
      "slot": "bd"
    }, [this.$slots.bd]), typeof this.value === 'undefined' && h("template", {
      "slot": "ft"
    }, [this.$slots.ft])])]), h("div", {
      "class": "weui-cell__ft",
      "ref": "rightBtns"
    }, [this.$slots.right])]);
  }
});
//# sourceMappingURL=WSwipeCell.js.map