//在需要的页面单独引入，不然会影响全局
import { onMounted, onBeforeUnmount } from 'vue'

export function useFlexibleRem() {
  let originFontSize = ''
  let resizeHandler: (() => void) | null = null

  const setRemBase = () => {
    const html = document.documentElement
    const width = window.innerWidth
    html.style.fontSize = (width / 1920) * 16 + 'px'
  }

  onMounted(() => {
    // 记录原始 font-size
    originFontSize = document.documentElement.style.fontSize
    setRemBase()
    resizeHandler = setRemBase
    window.addEventListener('resize', resizeHandler)
  })

  onBeforeUnmount(() => {
    // 离开页面时恢复原始 font-size
    document.documentElement.style.fontSize = originFontSize
    if (resizeHandler) {
      window.removeEventListener('resize', resizeHandler)
    }
  })
}