<template>
  <div class="n-form-label" :class="['n-form-label-' + position, 'n-form-label-' + size]" :style="styles">
    <div class="n-form-label-text">
      <n-icon class="n-form-label-required" type="required" v-if="isRequired"></n-icon>
      <span>{{input.label}}</span>
    </div>
    <n-builder v-if="input.labelBuilder" :name="input.labelBuilder" :params="input"></n-builder>
  </div>
</template>

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

export default {
  name: 'n-form-label',
  components: {
    NIcon,
    NBuilder
  },
  props: {
    // 输入props
    input: prop.object(),
    // label 位置
    position: prop.inArray(['left', 'top'], 'left'),
    // label 宽度
    labelWidth: prop.stringNumber(130),
    // 大小
    size: prop.inArray(['small', 'middle', 'large'], 'middle')
  },
  computed: {
    isRequired ({input}) {
      return parseInputs(input).some(input => input.required)
    },
    styles ({position, labelWidth}) {
      return position === 'left' ? {width: labelWidth + 'px'} : null
    }
  }
}
</script>
