<template>
  <div :title="tips" class="n-note" :class="classes">
    <span v-if="label" class="n-note-label">{{label}}</span>
    <span v-if="toString(value)" class="n-note-value">{{value}}</span>
    <n-builder v-if="builder" :name="builder"></n-builder>
  </div>
</template>
<script>
import NBuilder from '@uif/next/lib/components/builder'
import {prop, joinUnique, toString} from '@uif/next/lib/utils/tools'
export default {
  inheritAttrs: false,
  components: {
    NBuilder
  },
  name: 'n-note',
  props: {
    // 描述标签，可为空
    label: prop.string(),
    // 描述值
    value: {},
    // 自定义title
    title: prop.stringNumber(),
    // 自定义渲染/插槽
    builder: {
      type: [String, Function],
      default: null
    },
    // 换行
    wrap: prop.boolean(),
    // flex布局
    flex: prop.boolean()
  },
  data () {
    return {
      toString
    }
  },
  computed: {
    tips ({title, label, value}) {
      return title || joinUnique([label, value], ': ')
    },
    classes ({wrap, flex}) {
      return {
        'n-note-wrap': wrap,
        'n-note-flex': flex
      }
    }
  }
}
</script>
