<template>
  <transition name="n-form-info">
    <div v-if="info" class="n-form-info" :class="classes">
      <n-icon :type="iconType"></n-icon>
      <span>{{info.message}}</span>
    </div>
  </transition>
</template>

<script>
import NIcon from '@uif/next/lib/components/icon'
import {prop} from '@uif/next/lib/utils/tools'

const maps = new Map([
  ['error', 'x-o'],
  ['info', 'circle-info'],
  ['tip', 'circle-info']
])

export default {
  components: {
    NIcon
  },
  props: {
    info: prop.object(null)
  },
  computed: {
    classes ({info}) {
      const type = info?.type
      return {
        'n-form-info-active': info,
        [`n-form-info-${type}`]: type
      }
    },
    iconType ({info}) {
      return maps.get(info?.type)
    }
  }
}
</script>
