<template>
  <button
    class="xb-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'xb-button--' + type : '',
      buttonSize ? 'xb-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"
  >
    <div class="xb-icon-spinner" v-if="loading">
      <div v-for="index in 3" :key="index" :class="['spinner-container','container'+index]">
        <div v-for="item in 4" :key="item" :class="'circle'+item"></div>
      </div>
    </div>
    <i :class="icon" v-if="icon && !iconRight  && !loading"></i>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
    <i :class="icon" class="xb-icon--right" v-if="iconRight && !loading"></i>
  </button>
</template>
<script>
export default {
  name: 'XbButton',

  inject: {
    xbForm: {
      default: ''
    },
    xbFormItem: {
      default: ''
    }
  },

  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,
    iconRight: Boolean
  },

  computed: {
    _xbFormItemSize() {
      return (this.xbFormItem || {}).xbFormItemSize;
    },
    buttonSize() {
      return this.size || this._xbFormItemSize || (this.$XINBAO || {}).size;
    },
    buttonDisabled() {
      return this.disabled || (this.xbForm || {}).disabled;
    }
  },

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