<script setup lang="ts">
import XFormGroup from '@af-mobile-client-vue3/components/data/XFormGroup/index.vue'
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
import { showToast } from 'vant'
import { ref } from 'vue'
import DeviceForm from './DeviceForm.vue'
import UserForm from './UserForm.vue'

const configName = ref('complexFormGroup')
const serviceName = ref('af-apply')
const formData = ref({
  userInfo: {},
  deviceInfo: {},
})

const formGroup = ref()

function handleSubmit(result: any) {
  console.log('提交数据:', result)
  showToast('提交成功')
}
</script>

<template>
  <NormalDataLayout title="表单组示例">
    <template #layout_content>
      <XFormGroup
        ref="formGroup"
        :config-name="configName"
        :service-name="serviceName"
        :group-form-data="formData"
        mode="新增"
        @submit="handleSubmit"
      >
        <!-- 用户信息插槽 -->
        <template #user="{ setRef, removeRef, formData }">
          <UserForm
            :set-ref="setRef"
            :remove-ref="removeRef"
            form-group-name="userInfo"
            :form-data="formData"
          />
        </template>
        <!-- 设备信息插槽 -->
        <template #device="{ setRef, removeRef, formData }">
          <DeviceForm
            :set-ref="setRef"
            :remove-ref="removeRef"
            form-group-name="deviceInfo"
            :form-data="formData"
          />
        </template>
      </XFormGroup>
    </template>
  </NormalDataLayout>
</template>
