// 在浏览器 DevTools Console 中运行此脚本，诊断 system-info 页面的实际状态

(function () {
  console.clear();
  console.log("=== System-Info 页面运行时诊断 ===\n");

  // 1. 检查当前路由
  console.log("1️⃣ 当前路由信息:");
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  console.log("   route:", currentPage?.route);
  console.log("   $page.fullPath:", currentPage?.$page?.fullPath);
  console.log("");

  // 2. 查找 AdminLayout 组件实例
  console.log("2️⃣ 查找 AdminLayout 组件:");
  const layoutRoot = document.querySelector(".layout-root");
  if (!layoutRoot) {
    console.log("   ❌ 找不到 .layout-root");
    console.log("   AdminLayout 可能未渲染");
    return;
  }
  console.log("   ✅ 找到 .layout-root DOM");

  // 3. 检查 Vue 实例数据
  console.log("\n3️⃣ 检查 Vue 实例数据:");

  // 获取 Vue 实例（不同版本的获取方式可能不同）
  let vueInstance = null;

  // 方法1: 从 DOM 上直接获取
  if (layoutRoot.__vue__) {
    vueInstance = layoutRoot.__vue__;
  } else if (layoutRoot.__vueParentComponent) {
    vueInstance = layoutRoot.__vueParentComponent;
  } else if (window.__NUXT__) {
    vueInstance = window.__NUXT__.$el.__vue__;
  }

  if (!vueInstance) {
    console.log("   ⚠️  无法直接获取 Vue 实例");
    console.log("   💡 打开 Vue DevTools 查看组件树");
  } else {
    const ctx = vueInstance.setupState || vueInstance.ctx;
    console.log("   activeMenuId:", ctx?.activeMenuId?.value || "未找到");
    console.log("   activeSubId:", ctx?.activeSubId?.value || "未找到");
    console.log(
      "   activeGroups length:",
      ctx?.activeGroups?.value?.length || "未找到",
    );
  }

  // 4. 检查 AdminSubSider 是否存在
  console.log("\n4️⃣ 检查二级侧边栏:");
  const subSider = document.querySelector(".sub-sider");
  if (subSider) {
    const style = getComputedStyle(subSider);
    console.log("   ✅ 找到 .sub-sider");
    console.log("   display:", style.display);
    console.log("   visibility:", style.visibility);
  } else {
    console.log("   ❌ 找不到 .sub-sider");
    console.log("   可能原因：");
    console.log("   - activeGroups.length === 0 (v-if 条件不满足)");
    console.log('   - nav 匹配失败，activeMenuId === "home"');
  }

  // 5. 检查面包屑信息
  console.log("\n5️⃣ 检查面包屑:");
  const breadcrumb = document.querySelector(".breadcrumb");
  if (breadcrumb) {
    console.log("   内容:", breadcrumb.textContent);
  }

  // 6. 检查 currentPage prop 是否传递
  console.log("\n6️⃣ 检查 currentPage prop:");
  const parentComponent = layoutRoot?.parentElement?.__vue__;
  if (parentComponent?.props) {
    console.log("   currentPage:", parentComponent.props.currentPage);
  } else {
    console.log("   ⚠️  无法获取 currentPage prop");
  }

  // 7. 检查浏览器控制台是否有错误
  console.log("\n7️⃣ 浏览器错误:");
  console.log("   检查上方是否有红色错误信息");
  console.log('   特别注意 "Failed to resolve component" 错误');

  console.log("\n📌 如果 SubSider 不显示:");
  console.log('   ❌ activeMenuId = "home" → 需要检查 nav.uts 匹配');
  console.log("   ❌ activeSubId 为空 → 检查菜单配置");
  console.log(
    "   ❌ activeGroups.length = 0 → 检查 maintain 菜单的 groups 数组",
  );

  console.log("\n" + "=".repeat(50));
})();