<template>
  <div class="n-form" :class="['n-form-list-' + list, 'n-form-position-' + position]">
    <template v-for="input in _inputs">
      <n-form-item :key="getInputKey(input)" :style="styles" v-bind="{input, _inputs, position, labelWidth, size, autoValidate}" v-on="$listeners"></n-form-item>
      <n-form-patch v-if="input.afterPatch" :key="getInputKey(input) + '_patch'" :type="input.afterPatch" :list="list" :styles="styles"></n-form-patch>
    </template>
    <n-form-patch type="break" :list="list" :styles="styles"></n-form-patch>
  </div>
</template>

<script>
import NFormItem from '@uif/next/lib/components/form-item'
import {prop} from '@uif/next/lib/utils/tools'
import NFormPatch from './form-patch'
import {getInputKey} from '_common/formUtils'

export default {
  inheritAttrs: false,
  name: 'n-form',
  components: {
    NFormItem,
    NFormPatch
  },
  props: {
    // FormItem props 集合
    inputs: prop.array(),
    // 最大列数
    list: prop.stringNumber(4),
    // 最小列数宽
    minWidth: prop.stringNumber(280),
    // label 位置
    position: prop.inArray(['left', 'top'], 'left'),
    // label 宽度
    labelWidth: prop.stringNumber(130),
    // 大小
    size: prop.inArray(['small', 'middle', 'large'], 'middle'),
    // 自动检查
    autoValidate: prop.boolean(true)
  },
  data () {
    return {
      getInputKey
    }
  },
  computed: {
    // 可见的inputs
    _inputs ({inputs}) {
      return inputs.filter(input => !input.hidden)
    },
    // 样式
    styles ({minWidth}) {
      return {'min-width': minWidth + 'px'}
    }
  }
}
</script>
