<template>
  <div :class="classes">
    <template v-if="info">
      <Icon :type="icons[info.type]" scene="none"></Icon>
      <span>{{info.message}}</span>
    </template>
  </div>
</template>

<script>
import Icon from '@uif/hq/lib/components/icon'
export default {
  components: {
    Icon
  },
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      icons: {
        'error': 'circle-x',
        'info': 'circle-info-filled',
        'tip': 'circle-info-filled'
      }
    }
  },
  computed: {
    classes () {
      return [
        'uif-form-info',
        'uif-form-info-' + (this.info ? this.info.type : ''),
        {
          'uif-form-info-active': this.info
        }
      ]
    }
  }
}
</script>
