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

async function testSidebarMenu() {
  const 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('console', msg => {
    if (msg.type() === 'error') {
      console.error(`控制台错误: ${msg.text()}`);
    } else if (msg.type() === 'warning') {
      console.warn(`控制台警告: ${msg.text()}`);
    }
  });
  
  page.on('pageerror', error => {
    console.error(`页面错误: ${error.message}`);
    console.error(`错误堆栈: ${error.stack}`);
  });
  
  console.log('正在深度测试左侧菜单...');
  
  try {
    // 先登录
    await page.goto('http://localhost:8890/login', { waitUntil: 'networkidle' });
    const usernameInput = await page.locator('input[placeholder*="用户名"], input[placeholder*="username"], input[type="text"]').first();
    const passwordInput = await page.locator('input[placeholder*="密码"], input[placeholder*="password"], input[type="password"]').first();
    await usernameInput.fill('admin');
    await passwordInput.fill('111111');
    const submitButton = await page.locator('button[type="submit"], button:has-text("登录"), button:has-text("Login")').first();
    await submitButton.click();
    await page.waitForTimeout(3000);
    
    // 访问首页，检查左侧菜单
    await page.goto('http://localhost:8890/home', { 
      waitUntil: 'networkidle',
      timeout: 30000 
    });
    
    console.log('已访问首页，正在检查左侧菜单...');
    
    // 等待页面完全加载
    await page.waitForTimeout(3000);
    
    // 截图保存当前状态
    await page.screenshot({ 
      path: 'sidebar-menu-test.png',
      fullPage: true 
    });
    
    // 检查侧边栏是否存在
    const sidebarExists = await page.locator('.ivu-layout-sider, .layout-sider, .sidebar').count();
    console.log(`侧边栏元素数量: ${sidebarExists}`);
    
    // 检查菜单项
    const menuItems = await page.locator('.ivu-menu-item, .menu-item, [class*="menu"]').count();
    console.log(`菜单项数量: ${menuItems}`);
    
    // 检查菜单组
    const menuGroups = await page.locator('.ivu-menu-submenu, .menu-submenu, [class*="submenu"]').count();
    console.log(`菜单组数量: ${menuGroups}`);
    
    // 检查菜单标题
    const menuTitles = await page.locator('.ivu-menu-submenu-title, .menu-title, [class*="menu-title"]').count();
    console.log(`菜单标题数量: ${menuTitles}`);
    
    // 尝试获取菜单文本内容
    if (menuTitles > 0) {
      const titleElements = await page.locator('.ivu-menu-submenu-title, .menu-title, [class*="menu-title"]').all();
      for (let i = 0; i < Math.min(titleElements.length, 5); i++) {
        const titleText = await titleElements[i].textContent();
        console.log(`菜单标题 ${i + 1}: "${titleText}"`);
        
        // 检查是否为空白
        if (!titleText || titleText.trim() === '') {
          console.error(`❌ 菜单标题 ${i + 1} 为空白！`);
        }
      }
    }
    
    // 尝试点击第一个菜单组
    const firstMenuGroup = await page.locator('.ivu-menu-submenu').first();
    if (await firstMenuGroup.count() > 0) {
      console.log('尝试点击第一个菜单组...');
      try {
        await firstMenuGroup.click();
        await page.waitForTimeout(1000);
        console.log('✅ 菜单组点击成功');
      } catch (error) {
        console.error(`❌ 菜单组点击失败: ${error.message}`);
      }
    }
    
    // 检查具体的菜单结构
    console.log('\n=== 详细菜单结构分析 ===');
    
    // 查找所有可能的菜单相关元素
    const allMenuElements = await page.locator('*[class*="menu"], *[class*="Menu"]').all();
    console.log(`所有菜单相关元素: ${allMenuElements.length}`);
    
    for (let i = 0; i < Math.min(allMenuElements.length, 10); i++) {
      const className = await allMenuElements[i].getAttribute('class');
      const text = await allMenuElements[i].textContent();
      console.log(`元素 ${i + 1}: class="${className}", text="${text?.slice(0, 50)}..."`);
    }
    
  } catch (error) {
    console.error('测试失败:', error.message);
  }
  
  // 保持浏览器打开10秒以便观察
  console.log('\n保持浏览器打开10秒以便观察...');
  await page.waitForTimeout(10000);
  
  await browser.close();
}

testSidebarMenu().catch(console.error);