import { ref, onMounted, onBeforeUnmount, watch, type Ref } from "vue";

/**
 * 实测某容器元素的可用高度（px），随尺寸变化实时更新。
 *
 * 用途：表格页把 <Table> 放进 flex:1 的 .table-region 里，用本组合式量出该区域
 * 的真实高度喂给 view-ui 的 `:height`（固定表头需要一个数值高度），从而彻底替代
 * 旧的 useTableHeight()「视口高 - 一堆写死常量」的算法——加/删工具条、改顶栏高
 * 都不再需要同步改任何魔法数字。
 *
 * @param el   目标容器 ref（模板里 ref 绑定的那个元素）
 * @returns    响应式高度（px）；挂载测量前为 0，调用方可 `:height="h || undefined"` 兜底
 */
export function useElementHeight(el: Ref<HTMLElement | null>): Ref<number> {
    const height = ref(0);
    let ro: ResizeObserver | null = null;

    const measure = () => {
        if (el.value) height.value = Math.floor(el.value.clientHeight);
    };

    const observe = () => {
        ro?.disconnect();
        if (!el.value || typeof ResizeObserver === "undefined") return;
        measure();
        ro = new ResizeObserver(measure);
        ro.observe(el.value);
    };

    onMounted(observe);
    // v-if / v-show 切换导致容器重建时，重新挂观察
    watch(el, observe);
    onBeforeUnmount(() => ro?.disconnect());

    return height;
}