<template>
  <el-form v-if="showForm" ref="formRenderView" class="process-form" label-position="top" :rules="rules"
           :model="_value">
    <div v-for="(item, index) in formItems" :key="item.name + index">
      <el-form-item v-if="item.name !== 'SpanLayout' && item.name !== 'Description'"
                    :prop="item.id" :label="item.title">
        <!--        {{_value[item.id]}}-->
        <form-design-render :ref="`sub-item_${item.id}`" :perm="mode" v-model:value="_value[item.id]" mode="PC"
                            :config="item"/>
      </el-form-item>
      <form-design-render ref="span-layout" v-else :perm="mode" v-model:value="_value" mode="PC" :config="item"/>
    </div>
  </el-form>
</template>

<script setup>
import FormDesignRender from './FormDesignRender.vue'
import {getCurrentInstance} from '@vue/runtime-core';
import {defineProps, defineEmits} from 'vue'

const currentInstance = getCurrentInstance()

const emit = defineEmits()
const showForm = ref(false)
const formRenderView = ref()
const rules = ref({})

const props = defineProps({
  formItems: {
    type: Array,
    default: () => {
      return []
    }
  },
  value: {
    type: Object,
    default: () => {
      return {}
    }
  },
  mode: {
    type: String,
    default: () => {
      return "R"
    }
  },
  isPreview: {
    type: Boolean,
    default: () => {
      return false
    }
  }
})


const _value = computed({
  get() {
    return props.value
  },
  set(value) {
    emit('update:value', value)
  }
})
// const _value = ref(props.value)
watch(() => props.value, (value) => {
  _value.value = value
})
watch(() => props.mode, (value) => {
  props.mode = value
})

const validate = (call) => {
  let success = true
  formRenderView.value.validate(valid => {
    success = valid
    if (valid) {
      //校验成功再校验内部
      for (let i = 0; i < props.formItems.length; i++) {
        if (props.formItems[i].name === 'TableList') {
          // let formRef = currentInstance.ctx.$refs[`sub-item_${this.formItems[i].id}`]
          // if (formRef && Array.isArray(formRef) && formRef.length > 0) {
          //   formRef[0].validate(subValid => {
          //     success = subValid
          //   })
          //   if (!success) {
          //     break
          //   }
          // }
        }
      }
    }
    call(success)
  });
}

const loadFormConfig = (formItems) => {
  formItems.forEach(item => {
    if (item.name === 'SpanLayout') {
      loadFormConfig(item.props.items)
    } else {
      _value.value[item.id] = props.value[item.id]
      // this.$set(_value, item.id, props.value[item.id])
      if (props.isPreview) {
        item['perm'] = props.mode
      }
      if (item.perm === 'E') {
        if (item.props.required) {
          rules.value[item.id] = [{
            type: item.valueType === 'Array' ? 'array' : undefined,
            required: true,
            message: `请填写${item.title}`, trigger: 'blur'
          }]
        }
      }
    }
  })
  showForm.value = true
}

loadFormConfig(props.formItems)

defineExpose({
  validate
})

</script>

<style scoped>

</style>
