<template>
  <i :class="classes" :style="styles" @click="handleClick"></i>
</template>
<script>
import {oneOf} from '@uif/hq/src/utils/assist'
export default {
  name: 'u-icon',
  props: {
    type: {
      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 isAction = this.scene === 'action'
      return [
        'uif-i',
        'uif-i-' + this.scene,
        'uicon-' + this.type,
        {
          'disabled': isAction && this.disabled,
          'available': isAction && !this.disabled,
          'hover': isAction && this.hover,
          'active': isAction && this.active
        }
      ]
    },
    styles () {
      return this.color ? {color: this.color} : null
    }
  },
  methods: {
    handleClick (event) {
      if (this.disabled) return false
      this.$emit('click', event)
    }
  }
}
</script>
