import { chromium } from 'playwright-core'

const BASE = 'http://localhost:5082'
const browser = await chromium.launch({
  headless: true,
  executablePath: `${process.env.LOCALAPPDATA}\\ms-playwright\\chromium-1232\\chrome-win64\\chrome.exe`,
})
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } })

await page.addInitScript(() => {
  sessionStorage.setItem('fms-login', JSON.stringify({ loginInfo: { token: 'dev-token', user: { id: 1, name: 'dev', account: 'g3soft' } } }))
  localStorage.setItem('fms-user', JSON.stringify({ userInfo: { orgId: 'G3HD', account: 'g3soft' } }))
})

await page.route('**/api/**', async (route) => {
  const req = route.request()
  const url = req.url()
  let body = {}
  try { body = req.postDataJSON() || {} } catch {}
  if (url.includes('/auth/login')) return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 0, data: { token: 'dev-token', orgid: 'G3HD', user: { id: 1, account: 'g3soft', name: 'dev' } } }) })
  if (url.includes('/data/loaddata')) {
    const rows = body.view_name === 's_module' ? [{ b_id: 1, b_code: 'b_port', b_name: '港口管理' }] :
      body.view_name === 'bf_files_cateid' ? [
        { b_id: '10', b_name: '合同文件', b_code: 'cate_contract', b_xh: 1, b_canuse: 1 },
        { b_id: '11', b_name: '验收资料', b_code: 'cate_accept', b_xh: 2, b_canuse: 1 },
      ] : []
    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 0, data: rows }) })
  }
  if (url.includes('/data/page')) {
    const files = Array.from({ length: 5 }, (_, i) => ({
      subid: String(1000 + i), father: '1001', mx_moduleid: '1',
      mx_cate_id: i % 2 === 0 ? '10' : '11',
      mx_filename: `文件-${i + 1}.pdf`, mx_filesize: (i + 1) * 1024 * 1024,
      mx_fileext: 'pdf', mx_mapfilename: '',
    }))
    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 0, data: { rows: files, total: files.length } }) })
  }
  return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 0, data: null }) })
})

await page.goto(`${BASE}/file-demo`, { waitUntil: 'networkidle', timeout: 30000 })
await page.waitForTimeout(3000)

// Get the ff-splitter panels' computed styles
const result = await page.evaluate(() => {
  // Find the FmsFile splitter (ff-splitter) — the inner one
  const ffSplitter = document.querySelector('.ff-splitter')
  if (!ffSplitter) return { error: 'no ff-splitter' }
  const panels = Array.from(ffSplitter.querySelectorAll('.fms-splitter-panel'))
  return {
    containerWidth: ffSplitter.getBoundingClientRect().width,
    panelCount: panels.length,
    panels: panels.map((el, i) => {
      const cs = getComputedStyle(el)
      return {
        i,
        offsetW: Math.round(el.getBoundingClientRect().width),
        offsetH: Math.round(el.getBoundingClientRect().height),
        flexBasis: cs.flexBasis,
        flexGrow: cs.flexGrow,
        flexShrink: cs.flexShrink,
        minWidth: cs.minWidth,
        maxWidth: cs.maxWidth,
        overflow: cs.overflow,
        // Check if style attribute has flexBasis
        styleAttr: el.getAttribute('style'),
      }
    }),
    bars: Array.from(ffSplitter.querySelectorAll('.fms-splitter-bar')).map((el, i) => {
      const r = el.getBoundingClientRect()
      const cs = getComputedStyle(el)
      return {
        i, x: Math.round(r.x), w: Math.round(r.width), h: Math.round(r.height),
        csWidth: cs.width,
        csMargin: cs.margin,
        csPosition: cs.position,
      }
    }),
  }
})

console.log(JSON.stringify(result, null, 2))
await browser.close()