<template>
  <view 
    v-for="(item, key) in formDefine.items"
    :key="key"
    :class="[
      'form-cate-inner',
      groupType
    ]"
  >
    <SimpleDynamicFormCate
      v-if="item.children"
      :formDefine="item.children"
      :formModel="children" 
      :formDefineParentKey="item.name"
      :formDefineParentLabel="item.label"
      :parentModel="formModel"
      :topModel="topModel"
    />
    <SimpleDynamicFormControl
      v-else
      :modelValue="formModel[item.name] ?? null"
      :formDefineItem="item"
      :parentModel="formModel"
      :topModel="topModel"
      @update:modelValue="(v: any) => formModel[item.name] = v"
    />
  </view>
</template>

<script setup lang="ts">
import { computed, type PropType } from 'vue';
import type { FormDefine } from '.';
import SimpleDynamicFormControl from './SimpleDynamicFormControl.vue';
import SimpleDynamicFormCate from './SimpleDynamicFormCate.vue';

const props = defineProps({	
  topModel: {
    type: Object,
    default: () => ({})
  },
  parentModel: {
    type: null,
  },
  formModel: {
    type: Object,
    default: () => ({})
  },
  formDefineParentKey: {
    type: String,
    default: ''
  },
  formDefine: {
    type: Object as PropType<FormDefine>,
    default: () => ({})
  },
  groupType: {
    type: String,
    default: '' 
  }
})

const children = computed(() => {
  if (props.formDefineParentKey && props.formDefine.propNestType == 'nest')
    return props.formModel[props.formDefineParentKey];
  return props.formModel;
});

</script>

<style lang="scss">
.form-cate-inner {
  display: flex;
  flex-direction: column;

  &.row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
.form-static-text {
  margin: 0 10rpx 20rpx 10px;
}
</style>