/** 视窗匹配回调函数 */
export const matchMedia = (
  type: "sm" | "md" | "lg" | string,
  matchFunc?: Function,
  mismatchFunc?: Function
) => {
  if (type === "sm") {
    if (window.matchMedia("(max-width: 767.98px)").matches) {
      /* 窗口小于或等于 */
      matchFunc?.();
    } else {
      mismatchFunc?.();
    }
  } else if (type === "md") {
    if (window.matchMedia("(max-width: 992px)").matches) {
      /* 窗口小于或等于 */
      matchFunc?.();
    } else {
      mismatchFunc?.();
    }
  } else if (type === "lg") {
    if (window.matchMedia("(max-width: 1200px)").matches) {
      /* 窗口小于或等于 */
      matchFunc?.();
    } else {
      mismatchFunc?.();
    }
  } else {
    if (window.matchMedia(`(max-width: ${type}px)`).matches) {
      /* 窗口小于或等于 */
      matchFunc?.();
    } else {
      mismatchFunc?.();
    }
  }
};

/** 获取视窗宽度 */
export const useWindowWidth = () => {
  const width = ref(window.innerWidth);

  const updateWidth = () => {
    width.value = window.innerWidth;
  };

  onMounted(() => {
    window.addEventListener("resize", updateWidth);
  });

  onUnmounted(() => {
    window.removeEventListener("resize", updateWidth);
  });

  return width;
};