<template>
  <div class="uif-tips" :class="classes">
    <u-icon v-if="icon" class="uif-tips-icon" :type="icon"></u-icon>
    <div v-if="value" class="uif-tips-value">{{value}}</div>
    <slot>
      <u-base-slot v-if="slotName" :slot-name="slotName" :params="{value}"></u-base-slot>
    </slot>
  </div>
</template>

<script>
import UIcon from '@uif/hq/src/components/icon'
import UBaseSlot from '@uif/hq/src/components/base-slot'
import {oneOf} from '@uif/hq/src/utils/assist'

export default {
  name: 'u-tips',
  components: {
    UIcon,
    UBaseSlot
  },
  props: {
    type: {
      validator (value) {
        return oneOf(value, ['large', 'small', 'info', 'import', 'alert', 'success', 'message', 'warning'])
      },
      default: 'large'
    },
    icon: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    slotName: {
      type: String,
      default: ''
    }
  },
  computed: {
    classes () {
      return [
        {
          'no-icon': !this.icon
        },
        this.type
      ]
    }
  }
}
</script>
