<div v-for="comp in compList">
  <template v-if="comp.isShow">
    <component
      :is="compMap[comp.type]"
      :item="comp"
      :formData="formData"
      :compList="compList"
      :userInfo="userInfo"
      class="comp"
      v-if="isLoadedData && isComponentsShow"
    />
  </template>
</div>

<div v-for="comp in compList">
  <template v-if="comp.isShow">
    <component
      :is="compMap[comp.type]"
      :item="comp"
      :formData="formData"
      :compList="compList"
      :userInfo="userInfo"
      class="comp"
      v-if="isLoadedData && isComponentsShow"
      :ref="setDynamicRef(comp.prop)"
    />
  </template>
</div>

// 用于存儲動態 ref 的對象
const dynamicComponentRefs = ref({});

// 設置動態 ref 的方法
const setDynamicRef = (prop) => {
  return (el) => {
    dynamicComponentRefs.value[prop] = el;
  };
};

if (
  dynamicComponentRefs.value[comp.prop] &&
  comp.regExp &&
  comp.regExp !== ""
) {
  const res =
    dynamicComponentRefs.value[comp.prop].validateCompValue(comp);
  if (!res) {
    return;
  }
}

const validateCompValue = (comp) => {
  const val = formData.value[comp.prop];
  if (!new RegExp(comp.regExp).test(val)) {
    message.error(comp.regExpTip);
    return false;
  } else {
    return true;
  }
};

// 向外暴露方法
defineExpose({
  validateCompValue,
});