import {ref,onMounted, watch, onUnmounted} from 'vue'

const resizeObserver = ref()

// 返回一个动态变更值 ——标识变更
export const useListenPageChange = (element)=>{
    const randomIndex = ref(0)
    const timeFlag = ref()
    onMounted(()=>{
        // 在这里监听dom宽高的变化，控制渲染图表宽高
        resizeObserver.value = new ResizeObserver((entries) => {
            if(timeFlag.value){
                clearTimeout(timeFlag.value)
                timeFlag.value = ''
            }
            // 防抖
            timeFlag.value = setTimeout(()=>{
                //  console.log('页面变化了',entries)
                randomIndex.value +=1
            },400)

        });
    })
    onUnmounted(()=>{
        resizeObserver.value.disconnect();
    })
    watch(()=>element.value,(newVal)=>{
        if(newVal){
            if(resizeObserver.value){
                // 调用监听
                resizeObserver.value.observe(newVal);
            }
        }
    })
    return randomIndex
}