// 验证统计页面修复 - 添加5元交通支出并验证饼图显示
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext();
  const page = await context.newPage();

  try {
    console.log('1. 导航到记账页面...');
    await page.goto('http://localhost:5174/record', { waitUntil: 'networkidle' });

    // 等待页面加载
    await page.waitForSelector('.record-page', { timeout: 10000 });
    console.log('   记账页面已加载');

    // 选择支出类型
    console.log('2. 选择支出类型...');
    const expenseTab = page.locator('.type-tab.expense');
    if (await expenseTab.isVisible()) {
      await expenseTab.click();
      await page.waitForTimeout(300);
    }

    // 选择交通类别
    console.log('3. 选择交通类别...');
    const trafficCategory = page.locator('[data-category="交通"]');
    if (await trafficCategory.isVisible()) {
      await trafficCategory.click();
      await page.waitForTimeout(300);
    } else {
      console.log('   警告: 交通类别按钮未找到，尝试其他方式');
    }

    // 输入金额 5 元
    console.log('4. 输入金额 5 元...');
    const amountInput = page.locator('input[type="number"], .amount-input input, input[placeholder*="金"]');
    await amountInput.fill('5');
    await page.waitForTimeout(200);

    // 点击保存按钮
    console.log('5. 点击保存按钮...');
    const saveButton = page.locator('button[type="submit"], .save-btn, button:has-text("保存")');
    await saveButton.click();
    await page.waitForTimeout(1500);

    console.log('   记录已保存');

    // 导航到统计页面
    console.log('6. 导航到统计页面...');
    await page.goto('http://localhost:5174/statistics', { waitUntil: 'networkidle' });
    await page.waitForTimeout(1000);

    // 切换到饼图视图
    console.log('7. 切换到饼图视图...');
    const pieButton = page.locator('[data-type="pie"], button:has-text("饼图")');
    if (await pieButton.isVisible()) {
      await pieButton.click();
      await page.waitForTimeout(1000);
    }

    // 截图统计页面
    console.log('8. 截图统计页面...');
    await page.screenshot({
      path: 'd:/Users/kaifa/Trae_cn260425/personal-finance-budget-system/frontend/statistics-verification.png',
      fullPage: false
    });
    console.log('   截图已保存到 statistics-verification.png');

    // 检查饼图图例中的交通显示
    console.log('9. 检查交通支出显示...');
    const legendItems = await page.locator('.legend-item').allTextContents();
    console.log('   图例数据:', legendItems);

    // 查找交通分类的值
    const trafficLegend = page.locator('.legend-item:has-text("交通")');
    if (await trafficLegend.isVisible()) {
      const trafficText = await trafficLegend.textContent();
      console.log('   交通图例内容:', trafficText);
    }

    console.log('\n验证完成!');

  } catch (error) {
    console.error('测试过程中出错:', error.message);
    // 即使出错也截图
    await page.screenshot({
      path: 'd:/Users/kaifa/Trae_cn260425/personal-finance-budget-system/frontend/statistics-error.png',
      fullPage: true
    });
    console.log('错误截图已保存');
  } finally {
    await browser.close();
  }
})();