<template>
  <div ref="swaggerUiRef" style="height: 100%;"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
// 尝试直接导入 SwaggerUI 而不是使用 * as
import SwaggerUI from 'swagger-ui-dist/swagger-ui-bundle'; // 确保使用 ESM 版本
import 'swagger-ui-dist/swagger-ui.css';

import { getOpenApiJson } from './OpenApi.api';

const swaggerUiRef = ref<HTMLElement | null>(null);
const API_DOMAIN = import.meta.env.VITE_GLOB_DOMAIN_URL
onMounted(async () => {
  try {
    const response = await getOpenApiJson();
    const openApiJson = response;
    if (swaggerUiRef.value) {
      SwaggerUI({
        domNode: swaggerUiRef.value,
        spec: openApiJson,
      });
    }
  } catch (error) {
    console.error('Failed to fetch OpenAPI JSON:', error);
  }
});
</script>

<style scoped>
/* 确保容器有高度 */
.swagger-ui-container {
  height: 100%;
}
</style>