/**
 * 移动端检测
 */
import { ref, onMounted, onUnmounted } from 'vue'

export function useMobile() {
  const isMobile = ref(false)
  const isTouch = ref(false)

  const checkMobile = () => {
    // 检测移动设备
    const userAgent = navigator.userAgent.toLowerCase()
    const mobileKeywords = [
      'android', 'iphone', 'ipad', 'ipod', 'windows phone',
      'mobile', 'mobi', 'tablet'
    ]
    
    isMobile.value = mobileKeywords.some(keyword => 
      userAgent.includes(keyword)
    ) || window.innerWidth < 768

    // 检测触摸设备
    isTouch.value = 'ontouchstart' in window || navigator.maxTouchPoints > 0
  }

  const handleResize = () => {
    checkMobile()
  }

  onMounted(() => {
    checkMobile()
    window.addEventListener('resize', handleResize)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })

  return {
    isMobile,
    isTouch
  }
}