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

test.describe('登录表单验证测试', () => {
  test('验证fill方法是否触发Vue响应式更新', async ({ page }) => {
    await page.goto('/login');
    await page.waitForLoadState('networkidle');
    
    // 使用fill方法填充
    await page.locator('input[placeholder="请输入用户名"]').fill('admin');
    await page.locator('input[placeholder="请输入密码"]').fill('admin123');
    
    // 检查input元素的值
    const usernameValue = await page.locator('input[placeholder="请输入用户名"]').inputValue();
    const passwordValue = await page.locator('input[placeholder="请输入密码"]').inputValue();
    
    console.log('Username input value:', usernameValue);
    console.log('Password input value:', passwordValue);
    
    // 检查Vue组件的状态
    const formState = await page.evaluate(() => {
      const app = document.querySelector('#app');
      return app?.__vue_app__?.config?.globalProperties?.$data;
    });
    
    console.log('Vue formState:', formState);
    
    // 尝试获取localStorage中的值（登录前应该为空）
    const tokenBefore = await page.evaluate(() => localStorage.getItem('token'));
    console.log('Token before login:', tokenBefore);
    
    // 点击登录按钮
    await page.locator('button:has-text("登录")').click();
    
    // 等待API响应
    const response = await page.waitForResponse(response => 
      response.url().includes('/api/auth/login') && response.request().method() === 'POST',
      { timeout: 10000 }
    ).catch(e => {
      console.log('No API response received:', e);
      return null;
    });
    
    if (response) {
      console.log('API response status:', response.status());
      const responseBody = await response.text();
      console.log('API response body:', responseBody.substring(0, 200));
    }
    
    // 等待一段时间
    await page.waitForTimeout(3000);
    
    // 检查localStorage中的token
    const tokenAfter = await page.evaluate(() => localStorage.getItem('token'));
    console.log('Token after login:', tokenAfter ? 'exists' : 'not found');
    
    // 检查当前URL
    const currentUrl = page.url();
    console.log('Current URL:', currentUrl);
    
    // 截图
    await page.screenshot({ path: 'test-results/form-test.png', fullPage: true });
  });
});