<template>
  <div :class="['n-form-item', 'n-form-item-' + position, input.classes]" :style="input.styles">
    <!-- label -->
    <n-form-label v-if="input.label" v-bind="{size, input, position, labelWidth}"></n-form-label>
    <!-- content -->
    <div class="n-form-content">
      <div :class="getFormBorderClass(input, size)">
        <!-- inputs  -->
        <template v-for="(_input, index) in inputs">
          <!-- 分割符  -->
          <div v-if="index > 0" class="n-form-item-split" :key="_input.name + '_split'"></div>
          <!-- 主体  -->
          <n-form-block :key="_input.name + '_block'" :input="_input" :inputs="$inputs" :size="size"
                        v-on="$listeners" @u-focus="onUFocus" @u-blur="onUBlur"></n-form-block>
        </template>
        <!-- 后置 builder  -->
        <template v-if="input.builder">
          <n-builder :name="input.builder" :input="input" :inputs="$inputs"></n-builder>
        </template>
        <!-- suffixIcon -->
        <template v-if="input.icon">
          <n-form-icon :input="input" :_inputs="_inputs" v-on="$listeners"></n-form-icon>
        </template>
      </div>
      <n-form-info :info="input.info"></n-form-info>
    </div>
  </div>
</template>

<script>
import NFormLabel from './form-label.vue'
import NFormBlock from './form-block'
import NFormInfo from './form-info.vue'
import NFormIcon from './form-icon'
import NBuilder from '@uif/next/lib/components/builder'
import {parseInputs, prop, validate} from '@uif/next/lib/utils/tools'
import {getFormBorderClass, isInputError} from '_common/formUtils'
import {Timeout} from '@uif/next/lib/utils/module'

export default {
  inheritAttrs: false,
  name: 'n-form-item',
  components: {
    NFormLabel,
    NFormBlock,
    NFormInfo,
    NFormIcon,
    NBuilder
  },
  props: {
    // 输入props
    input: prop.object(),
    // 完整 inputs
    _inputs: prop.array(null),
    // 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 {
      getFormBorderClass
    }
  },
  computed: {
    // input 转换成 inputs 数组
    inputs ({input}) {
      return parseInputs(input).filter(input => !input.hidden)
    },
    // 自定义事件传的inputs
    $inputs ({_inputs, input}) {
      return _inputs || [input]
    }
  },
  mounted () {
    if (!this.input.$el) {
      this.input.$el = () => this.$el
      this.$on('hook:beforeDestroy', () => (this.input.$el = null))
    }
  },
  methods: {
    /**
     * 事件劫持
     * **/
    onUFocus () {
      if (isInputError(this.input)) {
        this.$set(this.input, 'info', null)
      }
      return this.time?.clear()
    },
    onUBlur (name) {
      if (this.autoValidate && name) {
        this.time = this.time || new Timeout()
        this.time.out(() => {
          validate.validateByName(this.input, name)
        }, 100)
      }
    }
  }
}
</script>
