import { ref, onMounted, onUnmounted } from "vue"

/**
 * @description 网络是否可用
 * */
export const useOnline = () => {
  const online = ref(true)
  const showStatus = (val: any) => {
    online.value = typeof val === "boolean" ? val : val.target.online
  }
  // 在页面加载后，设置正确的网络状态
  navigator.onLine ? showStatus(true) : showStatus(false)

  onMounted(() => {
    // 开始监听网络状态的变化
    window.addEventListener("online", showStatus)
    window.addEventListener("offline", showStatus)
  })

  onUnmounted(() => {
    // 移除监听网络状态的变化
    window.removeEventListener("online", showStatus)
    window.removeEventListener("offline", showStatus)
  })

  return { online }
}