<script setup >
import XFormGroup from '@vue2-client/base-client/components/common/XFormGroup/XFormGroup.vue'
import { ref, onMounted, getCurrentInstance, watch } from 'vue'
import { getConfigByNameAsync } from '@vue2-client/services/api/common'

// 与 HTab 保持一致的样式开关
const props = defineProps({
  hasTopMargin: { type: Boolean, default: true },
  // 隐藏左侧索引栏（样式控制）
  leftHide: { type: Boolean, default: false },
  // 标题蓝色圆圈样式
  showDot: { type: Boolean, default: false }
})

// 内部 XFormGroup 实例引用
const xFormGroupRef = ref()

// 暴露方法：对齐 XFormGroup 的外部可用方法
defineExpose({
  getXFormGroupInstance: () => xFormGroupRef.value,
  init: (params) => xFormGroupRef.value && xFormGroupRef.value.init && xFormGroupRef.value.init(params),
  asyncSubmit: () => xFormGroupRef.value && xFormGroupRef.value.asyncSubmit && xFormGroupRef.value.asyncSubmit(),
  getNativeFormRef: (group) => xFormGroupRef.value && xFormGroupRef.value.getNativeFormRef && xFormGroupRef.value.getNativeFormRef(group),
  getNativeForm: (group) => xFormGroupRef.value && xFormGroupRef.value.getNativeForm && xFormGroupRef.value.getNativeForm(group)
})

// 自动初始化：当外部传入 queryParamsName 时，自动加载配置并调用 XFormGroup.init
const vm = getCurrentInstance()
const autoInit = async () => {
  try {
    const a = vm?.proxy?.$attrs || {}
    const queryParamsName = a.queryParamsName
    if (!queryParamsName) return
    const serviceName = a.serviceName || process.env.VUE_APP_SYSTEM_NAME
    const env = a.env || 'prod'
    const showLeftTab = a.showLeftTab || false
    const businessType = a.businessType || '新增'
    const modifyModelData = a.modifyModelData || {}

    const isDev = env === 'dev'
    const res = await getConfigByNameAsync(queryParamsName, serviceName, isDev)

    const payload = {
      ...res,
      serviceName,
      env,
      showLeftTab,
      businessType,
      modifyModelData
    }
    if (xFormGroupRef.value && typeof xFormGroupRef.value.init === 'function') {
      xFormGroupRef.value.init(payload)
    } else {
      // do nothing
    }
  } catch (e) {
    // swallow
  }
}

onMounted(() => {
  autoInit()
})

// 当关键 attrs 变更时，重新初始化
watch(() => [vm?.proxy?.$attrs?.queryParamsName, vm?.proxy?.$attrs?.serviceName, vm?.proxy?.$attrs?.env], () => {
  autoInit()
})
</script>

<template>
  <div
    class="h-form-group-wrapper"
    :class="{
      'h-form-group-has-top-margin': props.hasTopMargin,
      'left-hide': props.leftHide,
      'show-dot': props.showDot
    }"
  >
    <x-form-group
      ref="xFormGroupRef"
      v-bind="$attrs"
      v-on="$listeners"
      :showDot="props.showDot"
    >
      <template v-for="(_, name) in $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData" />
      </template>
    </x-form-group>
  </div>

</template>

<style scoped lang="less">
.h-form-group-wrapper {
  padding: 6px;
  // XFormGroup 自身容器
  :deep(.XFormGroupClass) {
    height: 100%;

    .heigth100 { height: 100%; }
    :deep(.ant-spin-container) { height: 100%; }

    // 默认分组标题样式，参考 XFormGroup
    .xFormGroupTitle {
      font-size: 15px;
      font-weight: bold;
      color: @primary-color;
    }

    .formGroupContext {
      height: 100%;
      overflow-y: auto;
    }
  }
  // 隐藏左侧（索引栏）
  &.left-hide {
    :deep(.ant-spin-container) {
      .ant-row {
        .ant-col-3 { display: none; }
      }
    }
  }
  &.show-dot {
    :deep(.x-title) {
      font-size: 16px;
      .title-content {
        gap: 6px;
        .title-dot {
          height: 12px;
          width: 12px;
        }
      }

    }
  }
}
</style>
