<template>
  <button
    :class="_class"
    :disabled="disabled"
    :type="_buttonType"
    @click="onClick"
  >
    <Icon
      icon="loading_gradient"
      :class="_iconClass"
      v-if="loading"
    />
    <Icon
      :icon="icon"
      :class="_iconClass"
      v-if="icon && !loading"
    />

    <span v-if="!iconOnly">
      <!-- @slot button 内容 -->
      <slot />
    </span>

    <Icon
      :icon="suffixIcon"
      :class="_suffixIconClass"
      v-if="suffixIcon"
    />
  </button>
</template>

<script>
import Icon from '../icon';
import FormSize from '../scripts/mixins/form-size';

const name = 'hive-button';

export default {
  name,
  components: {
    Icon
  },
  mixins: [FormSize],
  props: {
    /**
     * button 类型
     * @member default | primary | text
     */
    theme: {
      type: String,
      default: 'default'
    },
    /**
     * @ignore
     */
    type: {
      type: String
    },
    /**
     * button 大小
     * @member large | default | small
     */
    size: {
      type: String,
      default: 'default'
    },
    /**
     * 圆角，如果只有图标，则渲染为圆形按钮
     */
    round: Boolean,
    /**
     * loading，指定后会覆盖 icon 参数，显示 loading 图标
     * @ignore
     */
    loading: Boolean,
    /**
     * 禁用
     */
    disabled: Boolean,
    icon: String,
    suffixIcon: String,
    /**
     * @ignore
     */
    htmlType: {
      type: String
    },
    /**
     * 图标按钮
     */
    iconOnly: Boolean,
    /**
     * 块级按钮
     */
    block: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  inject: {
    buttonGroupProps: { default: {} }
  },
  computed: {
    _class() {
      return [
        `${name}`,
        `${name}--size-${this.buttonGroupProps.size || this.curSize}`,
        `${name}--type-${this.buttonGroupProps.theme || this._buttonTheme}`,
        {
          [`${name}--disabled`]: this.buttonGroupProps.disabled || this.disabled,
          [`${name}--notext`]: this.iconOnly,
          [`${name}--loading`]: this.loading,
          [`${name}--round`]: this.round,
          [`${name}--block`]: this.buttonGroupProps.block || this.block
        }
      ];
    },
    _iconClass() {
      return [`${name}__icon`];
    },
    _suffixIconClass() {
      return [`${name}__suffix-icon`];
    },
    _buttonTheme() {
      if (['primary', 'default', 'text'].indexOf(this.type) > -1) {
        return this.type;
      } else {
        return this.theme;
      }
    },
    _buttonType() {
      if (['primary', 'default', 'text'].indexOf(this.type) > -1) {
        return this.htmlType || 'button';
      } else {
        return this.type || this.htmlType || 'button';
      }
    }
  },

  methods: {
    onClick(event) {
      /**
       * click 事件
       */
      this.$emit('click', event);
    }
  }
};
</script>
