<!--
 * 文件: step2.vue
 * 功能: 流程模型创建的第二步（表单设计），用于配置流程使用的表单类型（流程表单或业务表单）以及业务表单的提交/查看路由。
 * 主要逻辑:
 * - 使用 `defineModel` 获取父组件传入的 `modelData` 并作为表单数据源，通过 `a-form` 与 `rules` 做必填校验。
 * - 当选择为业务表单（`formType === 20`）时，显示并校验 `formCustomCreatePath` 与 `formCustomViewPath` 两个路由字段。
 * - 暴露 `validateForm` 方法供父组件在切换步骤或提交前触发校验。
 * 注意事项:
 * - 若后端或表单路由规则变更，需要同步 `rules` 与对应字段名；
 * - 当前仅做同步校验，必要时可扩展对路由合法性/重复性的校验逻辑。
-->
<script setup lang="ts">
defineOptions({
  name: 'CreateStep2',
});
const formRef = ref<any>();
const modelData = defineModel<any>();

const rules: Record<string, any> = {
  formType: [{ required: true, message: '表单类型不能为空', trigger: 'blur' }],
  // formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
  formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
  formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
};

function validateForm() {
  return formRef.value.validate();
}

defineExpose({
  validateForm,
});
</script>

<template>
  <a-form
    ref="formRef"
    :model="modelData"
    :rules="rules"
    :label-col="{ style: 'width:120px' }"
  >
    <a-form-item label="表单类型" name="formType">
      <a-radio-group v-model:value="modelData.formType" disabled>
        <a-radio :value="10">
          流程表单
        </a-radio>
        <a-radio :value="20">
          业务表单
        </a-radio>
      </a-radio-group>
    </a-form-item>
    <template v-if="modelData.formType === 20">
      <a-form-item label="表单提交路由" name="formCustomCreatePath">
        <a-input v-model:value="modelData.formCustomCreatePath" :maxlength="30" placeholder="请输入表单提交路由" />
      </a-form-item>
      <a-form-item label="表单查看路由" name="formCustomViewPath">
        <a-input v-model:value="modelData.formCustomViewPath" :maxlength="30" placeholder="请输入表单查看路由" />
      </a-form-item>
    </template>
  </a-form>
</template>
