// 自定义 Hook
export const useScreenAuto = (designWidth = 1920, designHeight = 1080) => {

    const screenEl = useTemplateRef<HTMLDivElement>("screen")
    const handleScreenAuto = () => {
      const clientWidth = document.documentElement.clientWidth
      const clientHeight = document.documentElement.clientHeight
      
      const scale = clientWidth / clientHeight < designWidth / designHeight
        ? clientWidth / designWidth
        : clientHeight / designHeight
  
      if (screenEl.value) {        
        screenEl.value.style.transform = `scale(${scale}) translate(-50%, -50%)`
        screenEl.value.classList.add('screen')
      }
    }
  
    // 生命周期
    onMounted(() => {
      handleScreenAuto()
      window.addEventListener('resize', handleScreenAuto)
    })
  
    onUnmounted(() => {
      window.removeEventListener('resize', handleScreenAuto)
    })

    return {
      handleScreenAuto
    }
  }