<template>
  <!-- ✅ 使用单一根节点 -->
  <div class="form-designer-wrapper">
    <v-form-designer
      ref="buildRef"
      class="build"
      :designer-config="designerConfig"
    >
      <!-- ✅ 插槽：自定义工具按钮 -->
      <template v-if="showBtn" #customToolButtons>
        <el-button link type="primary" icon="Select" @click="getJson">
          保存
        </el-button>
      </template>
    </v-form-designer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';

// ✅ 定义 FormJson 类型（根据 v-form-designer 实际结构调整）
interface FormJson {
  // 示例结构，请根据实际返回值调整
  fields?: any[];
  config?: Record<string, any>;
  [key: string]: any;
}

interface Props {
  /**
   * 是否显示保存按钮
   * @default true
   */
  showBtn?: boolean;
  /**
   * 表单 JSON 数据，用于初始化设计器
   */
  formJson?: FormJson | string | null;
}

const props = withDefaults(defineProps<Props>(), {
  showBtn: true,
  formJson: null
});

const emits = defineEmits<{
  /**
   * 保存设计：返回 formJson 和 fieldJson
   */
  (e: 'saveDesign', data: { formJson: string; fieldJson: string }): void;
  /**
   * 可选：同步 JSON 数据（如实时预览）
   */
  (e: 'reJson', json: FormJson): void;
}>();

const buildRef = ref<any>(null); // 类型可替换为 v-form-designer 的实例类型

// ✅ 设计器配置（提取为常量）
const designerConfig = {
  importJsonButton: true,
  exportJsonButton: true,
  exportCodeButton: true,
  generateSFCButton: true,
  formTemplates: true
};

// ✅ 获取 JSON 并触发事件
const getJson = () => {
  if (!buildRef.value) {
    return;
  }

  try {
    const formJson = JSON.stringify(buildRef.value.getFormJson());
    const fieldJson = JSON.stringify(buildRef.value.getFieldWidgets());

    emits('saveDesign', { formJson, fieldJson });
  } catch (error) {

  }
};

// ✅ 初始化：挂载时设置 formJson
onMounted(() => {
  if (props.formJson && buildRef.value) {
    setFormData(props.formJson);
  }
});

// ✅ 响应 formJson 的动态变化
watch(
  () => props.formJson,
  (newVal) => {
    if (newVal && buildRef.value) {
      setFormData(newVal);
    }
  }
);

// ✅ 抽取设置表单数据方法
const setFormData = (json: FormJson | string) => {
  try {
    const jsonStr = typeof json === 'string' ? json : JSON.stringify(json);
    buildRef.value?.setFormJson(jsonStr);
  } catch (error) {
  }
};
</script>

<!-- ✅ 使用 scoped 避免全局污染 -->
<style scoped>
.form-designer-wrapper {
  height: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}
</style>

<!-- ✅ 仅对 v-form-designer 内部结构样式做穿透 -->
<style scoped lang="scss">
.build ::v-deep(header.main-header) {
  display: none;
}

.build ::v-deep(.right-toolbar-con) {
  text-align: right !important;
}

// 如果需要调整滚动区域
.build ::v-deep(.container) {
  overflow-y: auto;
}
</style>
