<template>
  <button 
  :type="nativeType"
  class="cl-button"
  :class="['cl-button--' + type, 'cl-button--' + size, {'is-disabled': disabled, 'is-plain': plain, 'is-circle': circle}]"
  @click="handleClick"
  :disabled="disabled">
    <span class="cl-button-icon" v-if="icon || $slots.icon">
      <slot name="icon">
        <i class="cl-icon" :class="'icon-' + icon" v-if="icon"></i>
      </slot>
    </span>
    <span class="cl-button-icon" v-if="loading">
      <i class="cl-icon cl-icon__loading icon-loader icon-load-a"></i>
    </span>
    <span class="cl-button-text"><slot></slot></span>
  </button>
</template>

<script>
export default {
  name: 'cl-button',
  props: {
    icon: String,
    disabled: Boolean,
    nativeType: String,
    plain: Boolean,
    loading: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'default',
      validator (value) {
        return [
          'default',
          'danger',
          'primary',
          'warning'
        ].indexOf(value) > -1
      }
    },
    size: {
      type: String,
      default: 'normal',
      validator (value) {
        return [
          'normal',
          'small',
          'middle',
          'large'
        ].indexOf(value) > -1
      }
    }
  },
  data: function () {
    return {
    }
  },
  computed: {},
  methods: {
    handleClick (event) {
      if (!this.loading && !this.disabled) {
        this.$emit('click', event)
      }
    }
  },
  components: {}
}
</script>

<style lang="scss">
</style>
