import { chromium } from 'playwright';

const BASE = 'http://localhost:9027';

(async () => {
  const browser = await chromium.launch();
  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
  const page = await ctx.newPage();

  await page.goto(`${BASE}/view/mhzc/home`, { waitUntil: 'networkidle', timeout: 30000 });
  await page.waitForSelector('.capability-section', { timeout: 20000 });

  // 滚动到 capability 区域
  await page.evaluate(() => {
    const el = document.getElementById('section-capability');
    if (el) el.scrollIntoView({ behavior: 'instant', block: 'start' });
  });
  await page.waitForTimeout(800);

  // 点击 "碳核算平台"
  await page.locator('.capability-card').nth(0).click();
  await page.waitForTimeout(3000);
  console.log('url:', page.url());

  // 检查实际 DOM
  const data = await page.evaluate(() => {
    const outlet = document.querySelector('.portal-route-outlet');
    const child = outlet && outlet.firstElementChild;
    const sidebar = !!document.querySelector('.gxnlpt-sidebar');
    return {
      hasOutlet: !!outlet,
      hasChild: !!child,
      childClass: child ? child.className : null,
      hasGongXingNeng: !!document.querySelector('.gxnlpt-shell'),
      hasGxnlptSidebar: sidebar,
      hasContent1: !!document.getElementById('content-1'),
      activeSection: (function() {
        const els = document.querySelectorAll('[id^="content-"]');
        const inView = [];
        els.forEach((el) => {
          const r = el.getBoundingClientRect();
          if (r.top >= -50 && r.top < 800) {
            inView.push({ id: el.id, top: Math.round(r.top) });
          }
        });
        return inView;
      })(),
      visibleViewport: (function() {
        const els = document.querySelectorAll('.gxnlpt-block, [id^="content-"], .gxnlpt-side-nav, .gxnlpt-sidebar');
        const all = [];
        for (const el of els) {
          const r = el.getBoundingClientRect();
          if (r.width === 0 || r.height === 0) continue;
          all.push({
            tag: el.tagName,
            cls: el.className && el.className.slice(0, 60),
            id: el.id,
            top: Math.round(r.top),
            bottom: Math.round(r.bottom),
            left: Math.round(r.left),
          });
        }
        return all;
      })(),
    };
  });
  console.log(JSON.stringify(data, null, 2));

  await page.screenshot({ path: 'tmp-zoom2.png', fullPage: false });

  await browser.close();
})().catch((e) => {
  console.error('TEST ERROR', e);
  process.exit(1);
});