<template>
  <i :class="svgClass" @click.stop="onClick" />
</template>

<script>
export default {
  name: 'ThIcon',
  props: {
    // 默认颜色类型
    type: {
      type: String,
      default: 'primary'
      // primary\success\warning\info\danger
    },
    // 图标前缀，空表示使用element icon, 传th表示用本包的icon
    prefix: {
      type: String,
      default: 'th'
    },
    // svg图标名称
    icon: {
      type: String,
      required: true
    },
    // svg的大小
    size: {
      type: String,
      default: ''
      // large28\medium22\default16\small14\mini12
    },
    // 是否禁止点击
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否响应点击事件
    isButton: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    svgClass() {
      let cls = `th-icon`
      if (this.prefix) {
        cls += ` el-icon-${this.prefix}-${this.icon}`
      } else {
        cls += ` el-icon-${this.icon}`
      }
      if (this.type) {
        cls += (' th-icon--' + this.type)
      }
      if (this.size) {
        cls += (' th-icon--' + this.size)
      }
      if (this.isButton) {
        cls += ' is-button'
      }
      if (this.disabled) {
        cls += ' is-disabled'
      }
      return cls
    }
  },
  methods: {
    onClick(e) {
      if (this.isButton && !this.disabled) {
        this.$emit('click', e)
      }
    }
  }
}
</script>
