<template>
  <div>
    <!--栅格布局-->
    <ibps-dynamic-form-grid
      v-if="field.field_type === 'grid' || field.field_type === 'tabs' ||field.field_type === 'steps' || field.field_type === 'collapse' "
      :ref="'formItem'"
      :models="models"
      :rights="rights"
      :form-data="formData"
      :field="field"
      :desc-position="descPosition"
      :default-value="defaultValue"
      :main-code="mainCode"
      :code="code"
      :row="row"
      :readonly-rights="readonlyRights"
      :params="params"
      v-on="$listeners"
    />
    <!--其他类型-->
    <ibps-dynamic-form-item
      v-else
      :ref="'formItem'"
      :models="models"
      :rights="rights"
      :form-data="formData"
      :field="field"
      :desc-position="descPosition"
      :default-value="defaultValue"
      :main-code="mainCode"
      :code="code"
      :row="row"
      :readonly-rights="readonlyRights"
      :params="params"
      v-on="$listeners"
    />
  </div>
</template>
<script>
import FormOptions from '../constants/formOptions'
export default {
  props: {
    field: Object, // 字段
    models: [Object, Array], // 字段数据
    rights: { // 字段权限
      type: [String, Object]
    },
    formData: [Array, Object], // 表单数据
    defaultValue: Object, // 默认值
    mainCode: String, // 主表名
    code: String, // 表名
    row: [String, Number], // 子表行数
    readonlyRights: { // 只读
      type: Boolean,
      default: false
    },
    readonlyStyle: String, // 只读样式
    labelWidth: String, // 字段宽度
    params: Object,
    formOpinionData: Object,
    descPosition: String
  },
  methods: {
    /**
     * 获得表单验证
     */
    getFormValidator() {
      if (!this.$refs.formItem) { return }
      const $validate = []
      if (Array.isArray(this.$refs.formItem)) {
        this.$refs.formItem.forEach(el => {
          const fieldType = el.field.field_type
          if (FormOptions.t.NESTED_FIELD_TYPES.includes(fieldType) || fieldType === 'table') { // 嵌套布局或者子表
            const nestedEls = el.getEl()
            if (!nestedEls) return true
            nestedEls.forEach(nestedEl => {
              const v = new Promise((resolve, reject) => {
                nestedEl.getFormValidator().validate().then((result) => {
                  resolve(result)
                })
              })
              $validate.push(v)
            })
          } else {
            const v = new Promise((resolve, reject) => {
              el.getFormValidator().validate().then((result) => {
                resolve(result)
              })
            })

            $validate.push(v)
          }
        })
      } else {
        const v = new Promise((resolve, reject) => {
          this.$refs.formItem.getFormValidator().validate().then((result) => {
            resolve(result)
          })
        })

        $validate.push(v)
      }
      return Promise.all($validate)
    },
    /**
     *  当前字段
     */
    getEl() {
      if (!this.$refs.formItem) { return }
      const $el = []
      this.$refs.formItem.forEach(el => {
        $el.push(el)
      })
      return $el
    }
  }
}
</script>
