opt_web/src/utils/useCustomHeight.ts

export function useCustomHeight(heightObj: Record<string, number | Ref<HTMLElement | null>>) {
  const tableHeight = ref<number>(0);

  const calculateHeight = () => {
    let totalHeight = 0;
    const entries = Object.entries(heightObj);

    entries.forEach(([key, height], index) => {
      // console.log(`Processing ${key} at index ${index}:`);

      // 判断 height 是否为 ref，如果是则解引用，否则直接使用数值
      const resolvedHeight = isRef(height) ? unref(height) : height;

      let currentHeight = 0;
      if (typeof resolvedHeight === 'number') {
        currentHeight = resolvedHeight;
      } else if (resolvedHeight instanceof HTMLElement) {
        currentHeight = resolvedHeight.offsetHeight;
      }

      totalHeight += currentHeight;
      // console.log(`Key: ${key}, Current height: ${currentHeight}, Total so far: ${totalHeight}`);
    });

    tableHeight.value = window.innerHeight - totalHeight;
  };

  onMounted(() => {
    calculateHeight();
    window.addEventListener('resize', calculateHeight);
  });

  onBeforeUnmount(() => {
    window.removeEventListener('resize', calculateHeight);
  });

  return { tableHeight };
}