import { onBeforeMount, onBeforeUnmount } from 'vue'
/** 参考 Bootstrap 的响应式设计 WIDTH = 600 */
const WIDTH = 600
let DeviceType: any = 'Mobile' || 'Desktop'

/** 根据大小变化重新布局 */
export default () => {
  const _isMobile = () => {
    const rect = document.body?.getBoundingClientRect()
    return rect.width - 1 < WIDTH
  }

  const _resizeHandler = () => {
    if (!document.hidden) {
      const isMobile = _isMobile()
      DeviceType = isMobile ? 'Mobile' : 'Desktop'
    }
  }

  onBeforeMount(() => {
    window.addEventListener('resize', _resizeHandler)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', _resizeHandler)
  })
}
