<template>
  <div class="mb-10">
    <a-tabs :default-active-key="keys[0]">
      <a-tab-pane
        v-for="key in keys"
        :key="key"
        :title="props.schema.properties[key].title"
      >
        <a-form :model="form" :auto-label-width="true" label-align="right">
          <DynamicForm
            :parent="`formData.${key}`"
            :cur-node-path="key"
            :form-data="form.formData[key]"
            :schema="props.schema.properties[key]"
          ></DynamicForm>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import DynamicForm from '@/components/dynamicForm/index.vue'
import { computed, reactive } from 'vue'
import { vueUtils } from '@/components/form'
import { orderProperties } from '@/utils'

interface OptionsProps {
  rootFormData: object
  curNodePath: string
  schema: { properties: { [key: string]: any }; [key: string]: any }
  uiSchema: object
}

const props = defineProps<OptionsProps>()
const keys = computed(() => {
  return orderProperties(
    Object.keys(props.schema?.properties),
    props.schema['ui:order']
  )
})

const form = reactive<{ [key: string]: any }>({
  formData: vueUtils.getPathVal(props.rootFormData, props.curNodePath)
})
</script>

<style scoped lang="less">
.mb-10 {
  margin-bottom: 10px;
}
</style>
