<template>
  <i :class="classes" :style="styles" @click="handleClick"></i>
</template>
<script>
import {oneOf} from '@uif/core/lib/utils/assist'
import {addAttr} from '@uif/core/lib/utils/object'
export default {
  name: 'u-icon',
  props: {
    type: {
      type: String,
      default: ''
    },
    custom: {
      type: String,
      default: ''
    },
    scene: {
      validator (value) {
        return oneOf(value, ['default', 'action', 'none'])
      },
      default: 'default'
    },
    hover: {
      type: Boolean,
      default: false
    },
    active: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: ''
    }
  },
  computed: {
    classes () {
      const classes = {
        'uif-i-disabled': this.disabled,
        'uif-i-available': !this.disabled,
        'uif-i-hover': this.hover,
        'uif-i-active': this.active
      }
      addAttr(classes, 'uicon-' + this.type, this.type)
      addAttr(classes, this.custom, this.custom)
      return [
        'uif-i',
        'uif-i-' + this.scene,
        classes
      ]
    },
    styles () {
      if (this.color) {
        return {color: this.color}
      }
      return {}
    }
  },
  methods: {
    handleClick (event) {
      if (this.disabled) return false
      this.$emit('click', event)
    }
  }
}
</script>
