<template>
  <button class="s-button" :class="classes" @click="handleClick">
    <s-icon class="s-button__icon" v-if="icon" :icon="icon" />
    <span class="s-button__inner"><slot></slot></span>
  </button>
</template>

<script>
import SIcon from '../../icon';
// @ is an alias to /src
export default {
  name: 's-button',
  components: { SIcon },
  props: {
    type: {
      type: String,
      validator(val) {
        return ['', 'primary', 'info', 'error', 'warning'].indexOf(val) !== -1;
      },
    },
    size: {
      type: String,
      default: 'md',
      validator(val) {
        return ['lg', 'md', 'sm'].indexOf(val) !== -1;
      },
    },
    icon: {
      type: String,
    },
    block: {
      type: Boolean,
      default: false,
    },
    ghost: {
      type: Boolean,
      default: false,
    },
    link: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    dashed: {
      type: Boolean,
      default: false,
    },
    circle: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  watch: {},
  computed: {
    classes() {
      return Object.keys(this.$props).map(item => {
        return this[item]
          ? `s-button--${typeof this[item] === 'string' ? this[item] : item}`
          : '';
      });
    },
  },
  methods: {
    handleClick(e) {
      if (!this.loading || !this.disabled) {
        this.$emit('click', e);
      }
    },
  },
};
</script>
