/** 窄屏把表格行堆叠成卡片时，用列标题给每个单元格补 data-label，供 CSS 显示字段名。 */
import { defineNuxtPlugin } from "#app";

function labelTable(table) {
  const names = [...table.querySelectorAll(":scope > thead > tr > th")].map(
    (th) =>
      th.querySelector(".p-datatable-column-title")?.textContent.trim() ?? "",
  );
  for (const row of table.querySelectorAll(":scope > tbody > tr")) {
    [...row.children].forEach((cell, index) => {
      const name = names[index] ?? "";
      if (cell.dataset.label !== name) cell.dataset.label = name;
    });
  }
}

export default defineNuxtPlugin({
  name: "table-cell-labels",
  setup() {
    let queued = false;
    const run = () => {
      queued = false;
      document.querySelectorAll("table.p-datatable-table").forEach(labelTable);
    };
    const schedule = () => {
      if (queued) return;
      queued = true;
      requestAnimationFrame(run);
    };
    new MutationObserver(schedule).observe(document.body, {
      childList: true,
      subtree: true,
    });
    schedule();
  },
});