<template>
  <i class="n-icon" :class="classes" :disabled="disabled" :style="styles" @click="onClick"></i>
</template>
<script>
import {prop, inArray, toNumber} from '@uif/next/lib/utils/tools'

export default {
  name: 'n-icon',
  props: {
    // 图标类型
    type: prop.string(),
    // 自定义class
    custom: prop.string(),
    // 场景，可选值 default,primary, dark, gray
    scene: prop.inArray(['default', 'primary', 'gray', 'light', 'dark'], '', true),
    // 大小，可选值 12, 16, 20, 24
    size: prop.stringNumber(),
    // 经过样式
    hover: prop.boolean(),
    // 激活样式
    active: prop.boolean(),
    // 禁用样式
    disabled: prop.boolean(),
    // 颜色
    color: prop.string()
  },
  computed: {
    classes ({custom, type, size, scene, hover, active}) {
      return {
        [custom]: custom,
        [`ni-${type}`]: type,
        [`n-icon-${size}`]: inArray([12, 16, 20, 24], toNumber(size)),
        [`n-icon-${scene}`]: scene,
        hover,
        active
      }
    },
    styles ({color}) {
      return color ? {color} : null
    }
  },
  methods: {
    onClick (event) {
      if (!this.disabled) {
        this.$emit('click', event)
      }
    }
  }
}
</script>
