<template>
  <div class="iframe-container">
    <!-- 顶部工具栏 (已移除) -->
    
    <!-- 加载指示器 -->
    <div v-if="loading" class="loading-overlay">
      <a-spin size="32" />
      <p>加载中...</p>
      <p style="font-size:12px;color:#999;margin-top:10px;">目标地址: {{ currentUrl }}</p>
      <p style="font-size:12px;color:#999;">开发环境: {{ isDev ? '是' : '否' }}</p>
    </div>
    
    <!-- iframe -->
    <iframe 
      ref="frameRef"
      :src="currentUrl"
      class="main-frame"
      @load="onFrameLoad"
      @error="onFrameError"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { updateTheme } from '@/utils/theme'

const frameRef = ref<HTMLIFrameElement | null>(null)
const loading = ref(true)
const isDev = ref(typeof __DEV__ !== 'undefined' ? __DEV__ : false)

const currentUrl = ref(
  localStorage.getItem('adminPanelUrl') || 'http://localhost:5173'
)

function onFrameLoad() {
  loading.value = false
  console.log('✅ iframe 加载完成')
  // iframe 加载完成后立即同步主题
  updateTheme()
}

function onFrameError(e: Event) {
  loading.value = false
  console.error('❌ iframe 加载失败', e)
}

onMounted(() => {
  // 设置超时
  setTimeout(() => {
    if (loading.value) {
      console.warn('⏱️ 加载超时')
    }
  }, 30000)
})
</script>

<style scoped>
.iframe-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ps-bg, #1e1e1e);
}

.main-frame {
  flex: 1;
  width: 100%;
  border: none;
}

.loading-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--ps-text, white);
  z-index: 10;
}

.loading-overlay p {
  margin-top: 12px;
}
</style>

