const { chromium } = require('playwright');

(async () => {
  let browser;
  
  try {
    console.log('启动浏览器调试菜单内容...');
    browser = await chromium.launch({ 
      headless: false,
      slowMo: 100
    });
    
    const context = await browser.newContext({
      viewport: { width: 1920, height: 1080 }
    });
    
    const page = await context.newPage();
    
    // 监听网络请求
    page.on('request', request => {
      if (request.url().includes('api') || request.url().includes('menu')) {
        console.log('[请求]', request.method(), request.url());
      }
    });
    
    page.on('response', response => {
      if (response.url().includes('api') || response.url().includes('menu')) {
        console.log('[响应]', response.status(), response.url());
      }
    });
    
    console.log('\n1. 访问登录页面...');
    await page.goto('http://localhost:5173/', { waitUntil: 'networkidle' });
    
    console.log('\n2. 执行登录...');
    await page.fill('[name="username"]', 'admin');
    await page.fill('[name="password"]', '111111');
    await page.click('button:has-text("登录")');
    
    await page.waitForURL('**/dashboard/**', { timeout: 10000 });
    console.log('登录成功');
    
    // 等待一段时间让菜单加载
    await page.waitForTimeout(3000);
    
    console.log('\n3. 检查菜单数据...');
    
    // 获取菜单内容
    const menuData = await page.evaluate(() => {
      const result = {
        vbenMenus: [],
        antMenus: [],
        menuTexts: [],
        hiddenElements: []
      };
      
      // 检查Vben菜单
      const vbenMenus = document.querySelectorAll('.vben-menu-item, .vben-sub-menu');
      vbenMenus.forEach(menu => {
        const text = menu.textContent?.trim();
        const isVisible = menu.offsetWidth > 0 && menu.offsetHeight > 0;
        result.vbenMenus.push({
          class: menu.className,
          text: text || '(无文本)',
          visible: isVisible,
          hasChildren: menu.children.length
        });
        
        if (!isVisible) {
          result.hiddenElements.push(menu.className);
        }
      });
      
      // 检查所有包含menu的元素
      const allMenuElements = document.querySelectorAll('[class*="menu"]:not([class*="icon"])');
      allMenuElements.forEach(el => {
        const text = el.textContent?.trim();
        if (text && text.length > 0 && text.length < 50) {
          result.menuTexts.push(text);
        }
      });
      
      // 特别检查是否有文本但被隐藏
      const spans = document.querySelectorAll('.vben-menu span, .vben-menu-item span');
      spans.forEach(span => {
        const text = span.textContent?.trim();
        if (text) {
          result.menuTexts.push(`[span] ${text}`);
        }
      });
      
      return result;
    });
    
    console.log('\nVben菜单详情:');
    menuData.vbenMenus.slice(0, 10).forEach((menu, i) => {
      console.log(`${i + 1}. ${menu.text} (${menu.class}) - 可见: ${menu.visible}`);
    });
    
    console.log('\n发现的菜单文本:');
    console.log(menuData.menuTexts);
    
    console.log('\n隐藏的元素数量:', menuData.hiddenElements.length);
    
    // 检查是否加载了菜单数据
    const storeData = await page.evaluate(() => {
      try {
        // 尝试直接访问localStorage
        const coreAccess = localStorage.getItem('core-access');
        if (coreAccess) {
          const data = JSON.parse(coreAccess);
          return {
            hasLocalStorage: true,
            accessMenus: data.accessMenus,
            menuCount: data.accessMenus?.length || 0
          };
        }
        return { hasLocalStorage: false };
      } catch (err) {
        return { error: err.message };
      }
    });
    
    console.log('\nLocalStorage数据:', storeData);
    
    // 尝试手动触发菜单初始化
    console.log('\n4. 尝试手动初始化菜单...');
    const initResult = await page.evaluate(async () => {
      try {
        // 获取Vue Router实例
        const app = window.__VUE_APP__ || window.app || document.querySelector('#app')?.__vue_app__;
        if (!app) return { error: 'No app' };
        
        const router = app._context.provides.$router;
        if (!router) return { error: 'No router' };
        
        // 强制刷新当前路由
        await router.push('/');
        await new Promise(resolve => setTimeout(resolve, 500));
        await router.push('/dashboard/home');
        
        return { success: true };
      } catch (err) {
        return { error: err.message };
      }
    });
    
    console.log('初始化结果:', initResult);
    
    await page.waitForTimeout(2000);
    
    // 再次检查菜单
    const finalCheck = await page.evaluate(() => {
      const menuItems = document.querySelectorAll('.vben-menu-item__content');
      const texts = [];
      menuItems.forEach(item => {
        const text = item.textContent?.trim();
        if (text) texts.push(text);
      });
      return texts;
    });
    
    console.log('\n最终菜单文本:', finalCheck);
    
    // 截图
    await page.screenshot({ path: 'test-screenshots/menu-debug.png', fullPage: true });
    
    console.log('\n保持浏览器打开查看...');
    await new Promise(() => {});
    
  } catch (error) {
    console.error('调试出错:', error);
    if (browser) {
      await browser.close();
    }
  }
})();