import { type Ref, onMounted, nextTick, ref } from 'vue';
import { type MyHTMLElement } from '../types';
import getScrollBarSize from 'ant-design-vue/es/_util/getScrollBarSize';

// 获取滚动条宽度，用于处理非谷歌浏览器下，不能定义宽度的场景下，无法知道当前的滚动条宽度（谷歌目前默认设置了 8px）
export const useGetScrollBarWidth = (tableLayoutEl: Ref<MyHTMLElement>) => {
  const scrollBarWidth = ref(0);
  onMounted(async () => {
    await nextTick();
    // 📝 antd 底层会进行缓存，无需担心性能问题
    scrollBarWidth.value = getScrollBarSize();

    if (tableLayoutEl.value) {
      tableLayoutEl.value.style.setProperty(
        `--my-scroll-bar-width`,
        `${scrollBarWidth.value}px`
      );
      tableLayoutEl.value.style.setProperty(
        `--my-scroll-bar-width-half`,
        `${scrollBarWidth.value / 2}px`
      );
    }
  });
  return { scrollBarWidth };
};
