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

const servers = ref([])
let timer = null

onMounted(() => {
  const poll = () => {
    fetch('/api/servers/status')
      .then(res => res.json())
      .then(data => {
        servers.value = data
      })
  }

  poll() // 首次立即執(zhí)行
  timer = setInterval(poll, 5000) // 每5秒輪詢
})

onUnmounted(() => {
  clearInterval(timer) // ?? 清理定時(shí)器
})

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

const servers = ref([])
let abortController = null // 用于取消請(qǐng)求

const poll = async () => {
  try {
    // 支持取消上一次請(qǐng)求
    abortController?.abort()
    abortController = new AbortController()

    const res = await fetch('/api/servers/status', {
      signal: abortController.signal
    })

    if (!res.ok) throw new Error('Network error')
    
    const data = await res.json()
    servers.value = data
  } catch (err) {
    if (err.name !== 'AbortError') {
      console.warn('輪詢失敗，將重試...', err)
    }
  } finally {
    // ?? 請(qǐng)求結(jié)束后再等5秒發(fā)起下一次
    setTimeout(poll, 5000)
  }
}

onMounted(() => {
  poll() // 啟動(dòng)輪詢
})

onUnmounted(() => {
  abortController?.abort()
})

let isVisible = true

const handleVisibilityChange = () => {
  isVisible = !document.hidden
  console.log('頁(yè)面可見性:', isVisible ? '可見' : '隱藏')
}

onMounted(() => {
  // 監(jiān)聽頁(yè)面可見性
  document.addEventListener('visibilitychange', handleVisibilityChange)

  const poll = async () => {
    try {
      abortController?.abort()
      abortController = new AbortController()

      const res = await fetch('/api/servers/status', {
        signal: abortController.signal
      })

      const data = await res.json()
      servers.value = data
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.warn('輪詢失敗:', err)
      }
    } finally {
      // ?? 只有頁(yè)面可見時(shí)才繼續(xù)輪詢
      if (isVisible) {
        setTimeout(poll, 5000)
      } else {
        // 頁(yè)面隱藏，等待恢復(fù)后再請(qǐng)求
        document.addEventListener('visibilitychange', function waitVisible() {
          if (!document.hidden) {
            document.removeEventListener('visibilitychange', waitVisible)
            setTimeout(poll, 1000) // 恢復(fù)后1秒再查
          }
        }, { once: true })
      }
    }
  }

  poll()
})

// composables/usePolling.js
import { ref } from 'vue'

export function usePolling(fetchFn, interval = 5000) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)
  let abortController = null
  let isVisible = true

  const poll = async () => {
    if (loading.value) return // 防止重復(fù)執(zhí)行

    loading.value = true
    error.value = null

    try {
      abortController?.abort()
      abortController = new AbortController()

      const result = await fetchFn(abortController.signal)
      data.value = result
    } catch (err) {
      if (err.name !== 'AbortError') {
        error.value = err
        console.warn('Polling error:', err)
      }
    } finally {
      loading.value = false
      // ?? 根據(jù)可見性決定是否繼續(xù)
      if (isVisible) {
        setTimeout(poll, interval)
      }
    }
  }

  const start = () => {
    // 移除舊監(jiān)聽避免重復(fù)
    document.removeEventListener('visibilitychange', handleVisibility)
    document.addEventListener('visibilitychange', handleVisibility)
    poll()
  }

  const stop = () => {
    abortController?.abort()
    document.removeEventListener('visibilitychange', handleVisibility)
  }

  const handleVisibility = () => {
    isVisible = !document.hidden
    if (isVisible) {
      setTimeout(poll, 1000)
    }
  }

  return { data, loading, error, start, stop }
}

<script setup>
import { usePolling } from '@/composables/usePolling'

const fetchStatus = async (signal) => {
  const res = await fetch('/api/servers/status', { signal })
  return res.json()
}

const { data, loading } = usePolling(fetchStatus, 5000)

// 自動(dòng)在 onMounted 啟動(dòng)
</script>

<template>
  <div v-if="loading">加載中...</div>
  <ul v-else>
    <li v-for="server in data" :key="server.id">
      {{ server.name }} - {{ server.status }}
    </li>
  </ul>
</template>