<template>
  <button type="button" :class="classes" ref="iButton">
    <slot></slot>
  </button>
</template>
<script>
const colorArray = ['default', 'primary', 'success', 'info', 'warning', 'danger', 'parent','headmaster','teacher']
const typeArray = ['icon', 'icon-2x', 'link', 'rounded', 'block']
const sizeArray = ['xs', 'sm', 'lg', 'xlg']
export default {
  name: 'IButton',
  props: {
    color: {
      type: String,
      validator: function(value) {
        return colorArray.includes(value)
      }
    },
    type: {
      type: Array,
      default: function() {
        return []
      }
    },
    size: {
      type: String,
      validator: function(value) {
        return sizeArray.includes(value)
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    classes() {
      let typeStr = [],
        colorlist = ['btn'];
      Array.from(this.type).forEach((I, i) => {
        if (typeArray.includes(I)) {
          if ('icon-2x' == I) {
            typeStr.push('icon-2x')
          } else {
            typeStr.push('btn-' + I)
          }
        }
      })
      if (!!this.color) {
        colorlist.push('btn-' + this.color)
      }

      if (!!this.size) {
        colorlist.push('btn-' + this.size)
      }

      let all = colorlist.concat(typeStr)

      if(!!this.disabled){
      	all.push('disabled')
      }

      return `${all.join(' ')}`
    }
  },
  mounted(){
    if(this.disabled){
      this.$refs.iButton.setAttribute('disabled','disabled')
    }
  },
  watch:{
    disabled(newValue,oldValue){
      if(newValue){
        this.$refs.iButton.setAttribute('disabled','disabled')
      } else {
        this.$refs.iButton.removeAttribute('disabled')
      }
    }
  }
}
</script>