import create from "../utils/create";
import { addUnit } from "../utils/format/unit";
import Touch from "../mixins/touch";
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c(_vm.tag, {
      tag: "component",
      class: _vm.b([{
        loading: _vm.loading,
        block: _vm.block,
        disabled: _vm.disabled
      }, _vm.size, _vm.radius]),
      style: _vm.style,
      attrs: {
        "disabled": _vm.disabled
      },
      on: {
        "click": _vm.onClick,
        "touchstart": function touchstart($event) {
          $event.stopPropagation();
          return _vm.onTouchStart($event);
        },
        "touchend": function touchend($event) {
          $event.stopPropagation();
          return _vm.onTouchEnd($event);
        },
        "touchcancel": function touchcancel($event) {
          $event.stopPropagation();
          return _vm.onTouchEnd($event);
        }
      }
    }, [_vm.iconPosition === 'left' ? _c('icon', {
      class: _vm.b('icon'),
      attrs: {
        "name": _vm.icon
      }
    }) : _vm._e(), _vm.loading ? [_c('icon', {
      staticClass: "vm-icon-spin",
      attrs: {
        "name": "spinner"
      }
    }), _vm._v("\n    " + _vm._s(_vm.loadingText) + "\n  ")] : _vm._t("default", [_vm._v(_vm._s(_vm.text))]), _vm.iconPosition === 'right' ? _c('icon', {
      class: _vm.b('icon'),
      attrs: {
        "name": _vm.icon
      }
    }) : _vm._e()], 2);
  },
  name: "button",
  mixins: [Touch],
  props: {
    tag: {
      type: String,
      default: "button"
    },
    radius: {
      type: String,
      default: "nc"
    },
    size: {
      type: String,
      default: "md"
    },
    icon: String,
    iconPosition: {
      type: String,
      default: "left"
    },
    block: Boolean,
    plain: Boolean,
    loading: Boolean,
    loadingText: String,
    text: String,
    color: String,
    background: String,
    disabled: Boolean,
    width: [String, Number],
    height: [String, Number],
    longPress: {
      type: Boolean,
      default: true
    },
    longPressTime: {
      type: Number,
      default: 1000
    }
  },
  data: function data() {
    return {
      timeout: {}
    };
  },
  methods: {
    onClick: function onClick(event) {
      if (!this.loading && !this.disabled) {
        this.$emit("click", event);
      }
    },
    onLongPress: function onLongPress(event) {
      if (!this.loading && !this.disabled) {
        this.$emit("longPress", event);
      }
    },
    onTouchStart: function onTouchStart(event) {
      var disabled = this.disabled,
          loading = this.loading,
          longPressTime = this.longPressTime,
          onLongPress = this.onLongPress,
          longPress = this.longPress;

      if (disabled || loading || !longPress) {
        return;
      }

      this.touchStart(event);
      this.timeout = setTimeout(function () {
        onLongPress(event);
      }, longPressTime);
    },
    onTouchEnd: function onTouchEnd() {
      var disabled = this.disabled,
          loading = this.loading,
          timeout = this.timeout,
          longPress = this.longPress;

      if (disabled || loading || !longPress) {
        return;
      }

      clearTimeout(timeout);
    }
  },
  computed: {
    style: function style() {
      var width = this.width,
          height = this.height,
          color = this.color,
          background = this.background;
      width = addUnit(width);
      height = addUnit(height);
      var lineHeight = height;
      return {
        width: width,
        height: height,
        lineHeight: lineHeight,
        color: color,
        background: background
      };
    }
  }
});