import { ref } from 'vue'

export const useViewSize = () => {

    const popupBaseView = ref(null)
    const viewWidth = ref("0")
    const viewHeight = ref("0")
    const unit = 'px'

    /**
     * 更新宽和高的数据
     */
    const updateDimensions = () => {
        if (popupBaseView.value) {
            viewWidth.value = popupBaseView.value.offsetWidth + unit
            viewHeight.value = popupBaseView.value.offsetHeight + unit
        }
    }

    /**
     * 组件挂载完毕，计算宽高，并且给浏览器添加监听器，监听窗口大小改变
     */
    onMounted(() => {
        updateDimensions()
        window.addEventListener('resize', updateDimensions)
    })

    /**
     * 组件视图更新完毕，计算宽高
     */
    onUpdated(() => {
        updateDimensions()
    })

    return { popupBaseView, viewWidth, viewHeight }

}