<template>
  <button
    class="b-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :type="nativeType"
    :class="[
      type ? 'b-button--' + type : '',
      buttonSize ? 'b-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-hover': state === 'hover',
        'is-click': state === 'click'
      },
    ]"
  >
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
    <i class="b-icon-loading b-icon--right" v-if="loading"></i>
  </button>
</template>

<script>
export default {
  name: "b-button",

  props: {
    type: {
      type: String,
      default: "default",
    },
    size: String,
    icon: {
      type: String,
      default: "",
    },
    nativeType: {
      type: String,
      default: "button",
    },
    loading: Boolean,
    disabled: Boolean,
    plain: Boolean,
    autofocus: Boolean,
    round: Boolean,
    circle: Boolean,
    state: {
      type: String,
      default: ""
    }
  },

  computed: {
    buttonSize() {
      return this.size || "";
    },
    buttonDisabled() {
      return this.disabled || false;
    },
  },

  methods: {
    handleClick(evt) {
      this.$emit("click", evt);
    },
  },
};
</script>