import { chromium } from '@playwright/test'

/**
 * 上一步的疑点：lastRowBottom 恒为 3053，不随容器高度变化。
 * 猜想：容器变矮 → 行区溢出/被裁 → 该坐标不再是"可见的最后一行底边"。
 *
 * 这里把「滚动容器」也一起量出来，看清溢出时到底发生了什么。
 */
const BASE = process.env.PROBE_URL || 'http://localhost:5200'
const browser = await chromium.launch()
const page = await browser.newPage({ viewport: { width: 1400, height: 1200 } })
await page.goto(BASE, { waitUntil: 'networkidle' })

for (const h of [400, 200, 128, 126, 120, 80]) {
  await page.evaluate((hh) => {
    const wrap = document.querySelector('[data-testid="table-wrap"]')
    wrap.style.height = `${hh}px`
  }, h)
  await page.waitForTimeout(500)

  const r = await page.evaluate(() => {
    const wrap = document.querySelector('[data-testid="table-wrap"]')
    const root = wrap.querySelector('.g3-table')
    const inner = wrap.querySelector('.stk-table')
    const tbody = wrap.querySelector('.stk-tbody-main')
    const rows = [...wrap.querySelectorAll('.stk-tbody-main tr')]
    const last = rows[rows.length - 1]

    // 找到所有可能的滚动容器
    const scrollers = [...wrap.querySelectorAll('*')]
      .filter((el) => {
        const s = getComputedStyle(el)
        return /auto|scroll/.test(s.overflowY) && el.scrollHeight > el.clientHeight + 1
      })
      .map((el) => ({
        cls: el.className.toString().slice(0, 40),
        clientH: el.clientHeight,
        scrollH: el.scrollHeight,
        scrollTop: el.scrollTop,
      }))

    const hasBottom = (s) => /linear-gradient\(0deg, rgb/.test(s)
    const innerRect = inner.getBoundingClientRect()
    const cs = getComputedStyle(inner)

    return {
      rootCls: root.className,
      wrapH: Math.round(wrap.getBoundingClientRect().height),
      innerRect: { top: Math.round(innerRect.top), bottom: Math.round(innerRect.bottom) },
      innerBottomEdge: Math.round(innerRect.bottom - (parseFloat(cs.borderBottomWidth) || 0)),
      tbodyRect: tbody
        ? { top: Math.round(tbody.getBoundingClientRect().top), bottom: Math.round(tbody.getBoundingClientRect().bottom), h: Math.round(tbody.getBoundingClientRect().height) }
        : null,
      lastRow: last
        ? {
            top: Math.round(last.getBoundingClientRect().top),
            bottom: Math.round(last.getBoundingClientRect().bottom),
            draws: [...last.querySelectorAll('td')].some((td) => hasBottom(getComputedStyle(td).backgroundImage)),
          }
        : null,
      rowBottoms: rows.map((tr) => Math.round(tr.getBoundingClientRect().bottom)),
      scrollers,
    }
  })
  console.log(`\n===== container ${h}px =====`)
  console.log(JSON.stringify(r, null, 2))
}

await browser.close()