<template>
  <button :class="['owl-button', typeClass]"
          :style="btnStyle"
          @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'OwlButton',
  props: {
    type: { // default、disabled、light
      type: String,
      default: 'default'
    },
    icon: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    inline: {
      type: Boolean,
      default: false
    },
    outline: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    flat: {
      type: Boolean,
      default: false
    },
    ellips: {
      type: Boolean,
      default: false
    },
    triangle: {
      type: Boolean,
      default: false
    },
    btnStyle: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    typeClass () {
      return {
        'owl-button-default': this.type === 'default',
        'owl-button-disabled': this.type === 'disabled',
        'owl-button-light': this.type === 'light',
        'owl-button-danger': this.type === 'danger',
        'owl-button-warn': this.type === 'warn',
        'owl-button-search': this.icon === 'search',
        'owl-button-small': this.size === 'small',
        'owl-button-large': this.size === 'large',
        'owl=button-middle': this.size === 'middle',
        'owl-button-inline': this.inline,
        'owl-button-outline': this.outline,
        'owl-button-round': this.round,
        'owl-button-flat': this.flat,
        'owl-button-ellips': this.ellips,
        'owl-button-triangle': this.triangle

      }
    }
  },
  methods: {
    handleClick (event) {
      if (this.type === 'disabled') {
        event.preventDefault()
        event.stopPropagation()
        return
      }
      this.$emit('click', event)
    }
  }
}
</script>