<template>
  <sd-webflow>
    <template v-slot:form="{ FlowData }">
      <a-alert
        message="由于没有找到对应的审批单，所以显示了这个自动生成的内容。仅供调试使用"
        type="warning"
        show-icon
        closable
      />
      <tableRender :fields="FlowData.processFormData.processFormPropertyValues" />
    </template>
  </sd-webflow>
</template>

<script>
import extWebflowTemplate from '@extension-points/webflow/ext-webflow-template.vue'
import sdFormItemTd from '@/common/components/sd-form-item-td.vue'
import components from './_import-components/sd-common-subform-import'

export default {
  name: 'SdCommonSubform',
  components: {
    ...components,
    'sd-webflow': extWebflowTemplate,
    tableRender: {
      render(h) {
        return (
          <table>
            {this.tableInfo.map((row) => (
              <tr>
                {row.map((col) => (
                  <sdFormItemTd name={col} />
                ))}
              </tr>
            ))}
          </table>
        )
      },
      props: ['fields'],
      computed: {
        tableInfo() {
          // 整理成每行两列的格式
          const results = []
          this.fields.forEach((field, index) => {
            if (index % 2 === 0) {
              const row = [field.name]
              results.push(row)
            } else {
              results[results.length - 1].push(field.name)
            }
          })

          return results
        },
      },
    },
  },
  props: {},
  data() {
    return {}
  },
  methods: {},
}
</script>

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