<template>
  <div class="min-h-screen bg-gray-100">
    <div class="p-8">
      <h1 class="text-3xl font-bold text-gray-900 mb-6">系统诊断页面</h1>
      
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 布局测试 -->
        <div class="bg-white p-6 rounded-lg shadow">
          <h2 class="text-xl font-semibold mb-4">布局测试</h2>
          <div class="space-y-2 text-sm">
            <p><strong>当前页面:</strong> {{ $route.path }}</p>
            <p><strong>Tailwind样式测试:</strong> 
              <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">蓝色徽章</span>
            </p>
            <p><strong>布局状态:</strong> {{ layoutStatus }}</p>
          </div>
        </div>

        <!-- 组件测试 -->
        <div class="bg-white p-6 rounded-lg shadow">
          <h2 class="text-xl font-semibold mb-4">组件测试</h2>
          <div class="space-y-2 text-sm">
            <p><strong>Sidebar可见性:</strong> {{ sidebarVisible ? '可见' : '不可见' }}</p>
            <p><strong>用户认证:</strong> {{ isAuthenticated ? '已认证' : '未认证' }}</p>
            <p><strong>用户信息:</strong> {{ userInfo.name }}</p>
          </div>
        </div>

        <!-- 手动Sidebar测试 -->
        <div class="bg-white p-6 rounded-lg shadow lg:col-span-2">
          <h2 class="text-xl font-semibold mb-4">手动Sidebar测试</h2>
          <p class="text-sm text-gray-600 mb-4">以下是手动嵌入的Sidebar组件:</p>
          <div class="border-2 border-dashed border-gray-300 p-4">
            <Sidebar />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 不使用布局，完全手动控制
definePageMeta({
  layout: false
})

// 页面标题
useHead({
  title: '系统诊断 - 翻译管理系统'
})

// 响应式数据
const layoutStatus = ref('手动控制')
const sidebarVisible = ref(false)
const isAuthenticated = ref(false)
const userInfo = ref({
  name: '未知用户',
  role: '未知'
})

// 检查Sidebar是否可见
const checkSidebarVisibility = () => {
  if (process.client) {
    const sidebar = document.querySelector('.w-64.bg-gray-800')
    sidebarVisible.value = !!sidebar
  }
}

// 加载用户信息
const loadUserInfo = () => {
  if (process.client) {
    const authStatus = localStorage.getItem('isAuthenticated')
    const adminUser = localStorage.getItem('adminUser')
    
    isAuthenticated.value = authStatus === 'true'
    
    if (adminUser) {
      try {
        const user = JSON.parse(adminUser)
        userInfo.value = {
          name: user.name || '系统管理员',
          role: user.role || 'admin'
        }
      } catch (error) {
        console.error('解析用户信息失败:', error)
      }
    }
  }
}

// 页面挂载时检查
onMounted(() => {
  loadUserInfo()
  checkSidebarVisibility()
  
  // 延迟检查，确保组件完全渲染
  setTimeout(() => {
    checkSidebarVisibility()
  }, 1000)
})
</script> 