<template>
  <form :class="classes" :autocomplete="autocomplete">
    <template v-for="input in vInputs">
      <!-- input 前置 patch-->
      <form-patch v-if="input.beforePatch" :type="input.beforePatch" :list="list" :patch-styles="minStyles" :key="`${getInputKey(input)}_beforePatch`"></form-patch>
      <!-- input 前置 render-->
      <!-- <base-render v-if="input.beforeRender" :render="input.beforeRender" :params="input" :key="`${getInputKey(input)}_beforeRender`"></base-render> -->
      <!-- form-item -->
      <form-item :key="getInputKey(input)" :position="position" :label-width="labelWidth" :style="minStyles"
                 v-bind="$attrs" v-on="$listeners" :input="input"></form-item>
      <!-- input 后置 patch-->
      <form-patch v-if="input.afterPatch" :type="input.afterPatch" :list="list" :patch-styles="minStyles" :key="`${getInputKey(input)}_afterPatch`"></form-patch>
      <!-- input 后置 render-->
      <!-- <base-render v-if="input.afterRender" :render="input.afterRender" :params="input" :key="`${getInputKey(input)}_afterRender`"></base-render> -->
    </template>
    <form-patch type="break" :list="list" :patch-styles="minStyles"></form-patch>
  </form>
</template>

<script>
import FormItem from '@uif/admin/lib/components/form-item'
import FormPatch from './form-patch'
import {oneOf} from '@uif/hq/lib/utils/assist'
import {filter} from '@uif/hq/lib/utils/array'
import {assign} from '@uif/hq/lib/utils/object'
import {getInputKey, parseInputs, getFormData, validate} from '@uif/admin/lib/utils/form'

export default {
  inheritAttrs: false,
  name: 'u-form',
  components: {
    FormItem,
    FormPatch
  },
  props: {
    // FormItem props 集合
    inputs: {
      type: Array,
      default () {
        return []
      }
    },
    autocomplete: {
      validator (value) {
        return oneOf(value, ['on', 'off'])
      },
      default: 'off'
    },
    // 最大列数
    list: {
      type: [Number, String],
      default: 4
    },
    // 最小列数宽
    minWidth: {
      type: [Number, String],
      default: 280
    },
    position: {
      type: String,
      default: 'left'
    },
    labelWidth: {
      type: [Number, String],
      default: 130
    }
  },
  data () {
    return {
      getInputKey
    }
  },
  computed: {
    // 可见的inputs
    vInputs () {
      return filter(this.inputs, input => !input.hidden)
    },
    classes () {
      return [
        'uif-form',
        'uif-form-position-' + this.position,
        'uif-form-list-' + this.list
      ]
    },
    minStyles () {
      return {
        'min-width': this.minWidth + 'px'
      }
    }
  },
  watch: {},
  created () {
  },
  mounted () {
  },
  methods: {
    // 获取formData
    getValue (original, full) {
      const inputs = this.getInputs(full)
      return assign(getFormData(inputs), original)
    },
    // 检查表单组
    check (full) {
      return new Promise((resolve, reject) => {
        validate(this.getInputs(full)).then(() => {
          resolve(this.getValue())
        }).catch((error) => reject(error))
      })
    },
    // 设置表单值
    // @formData {Object} input额外的参数
    set (name, value, formData) {
      filter(parseInputs(this.inputs), (input) => input.name === name).forEach(input => {
        this.$set(input, 'value', value)
        if (formData) this.$set(input, 'formData', formData)
      })
    },
    // 清空表单
    empty (full) {
      const inputs = this.getInputs(full)
      parseInputs(inputs).forEach(input => {
        this.$set(input, 'value', null)
        this.$set(input, 'formData', null)
      })
    },
    // 获取当前inputs
    getInputs (full) {
      return full ? this.inputs : this.vInputs
    }
  }
}
</script>
