import { ref } from 'vue';

// 自定义 Hook 用于过渡效果
export function useCollapse(initialMaxHeight = 1000) {
  const collapseMaxHeight = ref(initialMaxHeight); // 固定的最大高度
  // 过渡钩子 - 在元素开始进入时
  const beforeEnter = (el) => {
    el.style.maxHeight = 0;
  };

  // 过渡钩子 - 进入时
  const enter = (el, done) => {
    el.offsetHeight; // 强制重排
    el.style.transition = 'max-height 0.5s ease';
    el.style.maxHeight = `${collapseMaxHeight.value}px`; // 使用固定的最大高度
    done();
  };

  // 过渡钩子 - 离开时
  const leave = (el, done) => {
    el.style.transition = 'max-height 0.5s ease';
    el.style.maxHeight = 0; // 收起时的最小高度
    done();
  };

  return {
    beforeEnter,
    enter,
    leave
  };
}