<!-- 底部浮动-->
<template >
        <div ref="bfRootRef" :key="isFloat? 'bottom-float':'bottom-fix'"  :class="[isFloat ? 'bottom-float':'bottom-fix']" >
            <slot v-if="$slots['content']" name="content"></slot>
        </div>
</template>

<script lang="ts">
</script>

<script setup lang="ts">
const bfRootRef= ref()
//组件传参
let props = defineProps({
  height: { type: String,default:'50px' },//浮动层高度
  backgroundColor: { type: String,default:'#fff' },//浮动层背景色
  getWidthEvent: { type: Function },//获取浮动层宽度
})

const isFloat=ref(false)
const width=ref('')
const initScrollHeight=ref(0)
const initClientHeight=ref(0)
const handleScroll = () => {
    let clientHeight=document.documentElement.clientHeight || window.innerHeight
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop

    let temp=(scrollTop + clientHeight+bfRootRef.value.offsetHeight)
    isFloat.value=(temp >= initScrollHeight.value)?false:true
}
const windowChangesListener = () => {
    width.value=props.getWidthEvent()+'px'
}
onMounted(() => {
    width.value=props.getWidthEvent()+'px'
    initScrollHeight.value=document.documentElement.scrollHeight || document.body.scrollHeight
    initClientHeight.value=document.documentElement.clientHeight || window.innerHeight
    handleScroll()
    window.addEventListener('scroll', handleScroll)
    window.addEventListener('resize', windowChangesListener)
    
})
</script>

<style lang="scss" scoped>
    .bottom-float{
        position: fixed;
        height: v-bind('props.height');
        width: v-bind('width');
        bottom: 0vh;
        background-color: v-bind('props.backgroundColor');
        z-index: 5;
    }

    .bottom-fix{
        height: v-bind('props.height');
        width: v-bind('width');
        background-color: v-bind('props.backgroundColor');
    }
</style>