<script name="reviewCheck" setup>
import { ref } from 'vue'

const props = defineProps({
  detailData: {
    type: Object,
    default: () => {
      return {}
    }
  },
  data: {
    type: Array,
    default: () => []
  }
})
const formData = ref({
    reviewChecklist: props.data
  }),
  formRef = ref(),
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  },
  // 回显
  setFormData = (data) => {
    formData.value = {
      reviewChecklist: data.reviewChecklist
    }
  }
defineExpose({ validForm, formData, setFormData })
</script>

<template>
  <el-form
    ref="formRef"
    :model="formData"
    label-suffix=":"
    label-position="top"
    scroll-to-error
  >
    <template v-for="(item,index) in formData.reviewChecklist" :key="index">
      <p class="font-bold text-16">{{ item.title }}</p>
      <template v-for="(child,key) in item.modules" :key="key">
        <el-row :gutter="16" class="items-center">
          <el-col :span="9">
            <el-form-item :label="child.subTitle">
              <el-input v-model="child.content" type="textarea" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="否决情形">
              <el-input v-model="child.rejectionSituation" type="textarea" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item
              label="响应情况"
              class="flex-form-item"
              style="margin-bottom: 14px"
              :prop="`reviewChecklist[${index}].modules[${key}].responseSituation`"
              :rules="[{required:true,message:'请输入'}]"
            >
              <el-input v-model="child.responseSituation" />
            </el-form-item>
            <el-form-item
              label="对应页面"
              class="flex-form-item"
              style="margin-bottom: 0"
              :prop="`reviewChecklist[${index}].modules[${key}].corrPageNum`"
              :rules="[{required:true,message:'请输入'}]"
            >
              <el-input v-model="child.corrPageNum" />
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </template>
  </el-form>
</template>
