<template>
  <sd-table-layout-form
    v-if="!formData.attrFD.layoutable"
    :fields="formData.processFormPropertyValues || formData.pageFieldInfos"
    :form-props="formData.attrFD"
  />
  <sd-layoutable-form
    v-else
    :fields="formData.processFormPropertyValues || formData.pageFieldInfos"
    :form-props="formData.attrFD"
  />
</template>

<script>
import sdTableLayoutForm from '@/form-designer/sd-table-layout-form.vue'
import sdLayoutableForm from '@/form-designer/sd-layoutable-form.vue'
import components from './_import-components/sd-form-by-builder-import'

/**
 * 渲染builder画的表单
 * @displayName SdFormByBuilder builder画的表单
 * @since 8.1.0.24
 */
export default {
  name: 'SdFormByBuilder',
  components: {
    sdTableLayoutForm,
    sdLayoutableForm,
    ...components,
  },
  props: {
    /**
     * 表单数据
     */
    formData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {}
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>

<docs>
一般放在 SdWebflow 流程表单的 form slot中，用来渲染 builder 画的表单

```html static
<template>
  <sd-webflow>
    <template v-slot:form="{ FlowData }">
      <sd-form-by-builder :form-data="FlowData.processFormData" />
    </template>
  </sd-webflow>
</template>
```
</docs>
