import { test, expect } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';

test('调试：详细检查系统配置页面加载', async ({ page }) => {
  const loginPage = new LoginPage(page);

  await test.step('管理员登录', async () => {
    await loginPage.goto();
    await loginPage.login('admin', 'admin123');
    await expect(page).toHaveURL(/.*dashboard/);
    console.log('✅ 登录成功');
  });

  await test.step('导航到系统配置页面', async () => {
    await page.goto('/sys/config');
    console.log('📍 导航到系统配置页面');
    
    // 等待网络空闲
    await page.waitForLoadState('networkidle', { timeout: 10000 });
    console.log('✅ 网络空闲状态已达到');
    
    // 额外等待确保页面完全加载
    await page.waitForTimeout(2000);
  });

  await test.step('检查页面状态', async () => {
    // 检查当前URL
    const currentURL = page.url();
    console.log('📍 当前URL:', currentURL);
    
    // 检查页面标题
    const pageTitle = await page.title();
    console.log('📄 页面标题:', pageTitle);
    
    // 检查页面body内容
    const bodyHTML = await page.evaluate(() => document.body.innerHTML);
    console.log('📄 页面HTML长度:', bodyHTML.length);
    console.log('📄 页面HTML片段:', bodyHTML.substring(0, 1000));
    
    // 检查是否有Vue应用
    const hasVueApp = await page.evaluate(() => {
      return !!document.querySelector('#app');
    });
    console.log('🎯 是否有Vue应用:', hasVueApp);
    
    // 检查是否有错误信息
    const errorElements = await page.locator('.el-message--error').count();
    console.log('❌ 错误消息数量:', errorElements);
    
    if (errorElements > 0) {
      const errorText = await page.locator('.el-message--error').first().textContent();
      console.log('❌ 错误消息内容:', errorText);
    }
    
    // 检查控制台错误
    const consoleErrors: string[] = [];
    page.on('console', msg => {
      if (msg.type() === 'error') {
        consoleErrors.push(msg.text());
      }
    });
    
    await page.waitForTimeout(1000);
    if (consoleErrors.length > 0) {
      console.log('🔧 控制台错误:', consoleErrors);
    }
    
    // 截图
    await page.screenshot({ path: 'debug-config-detailed.png' });
    console.log('📸 已保存截图');
  });

  await test.step('检查API请求', async () => {
    // 监听API请求
    const apiRequests: string[] = [];
    page.on('request', request => {
      if (request.url().includes('/api/config')) {
        apiRequests.push(request.url());
        console.log('🌐 API请求:', request.url());
      }
    });
    
    // 监听API响应
    const apiResponses: any[] = [];
    page.on('response', async response => {
      if (response.url().includes('/api/config')) {
        const status = response.status();
        console.log('📥 API响应:', response.url(), '状态:', status);
        
        try {
          const body = await response.json();
          console.log('📥 API响应数据:', JSON.stringify(body, null, 2));
          apiResponses.push({ url: response.url(), status, body });
        } catch (e) {
          console.log('📥 API响应解析失败:', e);
        }
      }
    });
    
    // 重新加载页面
    await page.goto('/sys/config');
    await page.waitForLoadState('networkidle', { timeout: 10000 });
    await page.waitForTimeout(2000);
    
    console.log('📊 API请求总数:', apiRequests.length);
    console.log('📊 API响应总数:', apiResponses.length);
  });
});