// 样办校验：生成记录页旧版样式落地实测（本地真实栈）。
import { chromium } from '@playwright/test'
const BASE = 'http://localhost:5174/admin-vue'
const browser = await chromium.launch({ channel: 'msedge', headless: true })
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } })
await page.goto(`${BASE}/`, { waitUntil: 'networkidle' })
await page.waitForTimeout(500)
if (await page.locator('#loginUsername').isVisible().catch(() => false)) {
  await page.locator('#loginUsername').fill('admin')
  await page.locator('#loginPassword').fill('admin123')
  await page.locator('.btn-login').click()
  await page.waitForURL(/admin-vue\/(account|asin|shop|records)/, { timeout: 20000 }).catch(() => {})
  await page.waitForTimeout(1200)
}
await page.goto(`${BASE}/records/history`, { waitUntil: 'domcontentloaded' })
await page.locator('.form-box').first().waitFor({ state: 'visible', timeout: 15000 })
await page.waitForLoadState('networkidle').catch(() => {})
await page.waitForTimeout(600)
const out = await page.evaluate(() => {
  const cs = (el, prop) => (el ? getComputedStyle(el)[prop] : null)
  const fb = document.querySelector('.form-box')
  const pb = document.querySelector('.panel-box')
  const th = document.querySelector('.table-scroll th')
  const td = document.querySelector('.table-scroll td')
  const btn = document.querySelector('.form-box .btn')
  const inp = document.querySelector('.form-group input, .form-group select')
  return {
    formBox: { bg: cs(fb, 'backgroundColor'), radius: cs(fb, 'borderRadius'), border: cs(fb, 'borderTopColor') },
    panelBox: { bg: cs(pb, 'backgroundColor') },
    h3: cs(document.querySelector('.panel-box h3'), 'fontSize'),
    input: { minH: inp && cs(inp, 'minHeight'), bg: inp && cs(inp, 'backgroundColor'), radius: inp && cs(inp, 'borderRadius') },
    btn: { minH: cs(btn, 'minHeight'), bgImage: btn && getComputedStyle(btn).backgroundImage.slice(0, 60), radius: cs(btn, 'borderRadius'), color: cs(btn, 'color') },
    th: { bg: cs(th, 'backgroundColor'), color: cs(th, 'color'), fontSize: cs(th, 'fontSize'), weight: cs(th, 'fontWeight') },
    td: { color: td && cs(td, 'color'), fontSize: td && cs(td, 'fontSize') },
    tableScroll: { border: cs(document.querySelector('.table-scroll'), 'borderTopColor'), radius: cs(document.querySelector('.table-scroll'), 'borderRadius') },
    rowCount: document.querySelectorAll('.table-scroll tbody tr').length,
    thumbb: !!document.querySelector('.thumb'),
    pagination: (document.querySelector('.pagination')?.textContent || '').trim().slice(0, 60),
    modal: document.querySelector('.modal-mask') === null,
  }
})
console.log(JSON.stringify(out, null, 2))
await browser.close()