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

async function testOrgTree() {
  const browser = await chromium.launch({ 
    headless: false,
    slowMo: 50 
  });
  
  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(2000);
    
    // 访问组织结构树页面
    await page.goto('http://localhost:8890/components/org_tree_page', { 
      waitUntil: 'networkidle',
      timeout: 30000 
    });
    
    console.log('已访问组织结构树页面');
    
    // 等待页面加载
    await page.waitForTimeout(3000);
    
    // 截图
    await page.screenshot({ 
      path: 'org-tree-test.png',
      fullPage: true 
    });
    
    // 检查是否有 v-org-tree 组件
    const hasOrgTree = await page.locator('.org-tree-wrapper').count();
    if (hasOrgTree > 0) {
      console.log('✅ 找到组织结构树组件');
      
      // 检查是否有节点
      const hasNodes = await page.locator('.org-tree-node').count();
      if (hasNodes > 0) {
        console.log(`✅ 组织结构树有 ${hasNodes} 个节点`);
      } else {
        console.log('⚠️ 组织结构树没有节点');
      }
    } else {
      console.log('❌ 未找到组织结构树组件');
    }
    
    // 检查缩放控制器
    const hasZoomController = await page.locator('.zoom-controller').count();
    if (hasZoomController > 0) {
      console.log('✅ 找到缩放控制器');
    }
    
  } catch (error) {
    console.error('测试失败:', error.message);
  }
  
  // 保持浏览器打开5秒以便观察
  await page.waitForTimeout(5000);
  
  await browser.close();
}

testOrgTree().catch(console.error);