
<template>
    <!-- :immediate-check="false" -->
    <van-pull-refresh v-model="data.freshData.refreshLoad" @refresh="onRefresh" :class="classMap?.refreshClass"   @scroll="scrollHander" ref="refReshList">
        <van-list class="van-list-body" v-model:loading="data.freshData.listLoading"  :offset="20"
            :finished="data?.freshData?.listFinished"  :finished-text="finishedText" @load="onLoad" >
            <slot></slot>
        </van-list>
    </van-pull-refresh>
</template>
  
<script setup lang="ts" name="refreshList">
import { reactive, ref, watchEffect } from "vue";
const emit = defineEmits(["onRefresh", "onLoad"]);
const props = defineProps({
    freshMap: {
        type: Object,
        default: () => {
            return {
                refreshLoad: false,
                listLoading: false,
                listFinished: false,
            };
        },
    },
    // 
    classMap: {
        type: Object,
        default: () => {
            return {
                refreshClass: "",
            };
        },
    },
    // 滚动位置
    resetScroll: {
        type: Number,
        default: 0,
    },
    // 暂无更多
    finishedText: {
        type: String,
        default: '没有更多了',
    },
});


const data = reactive({
    freshData: props?.freshMap,
});

let refReshList = ref();

//下拉刷新
const onRefresh = () => {
    emit("onRefresh");
};

// 触底加载
const onLoad = () => {
    emit("onLoad");
};

//重置滚动距离
const resetScroll = () => {
    refReshList.value.$el.scrollTop = 0;
};

//滚动监听
const scrollHander = () => { };
watchEffect(() => {
    if (props?.resetScroll) {
        resetScroll();
    }
});
</script>
  
<style lang="scss" scoped>
.book_box{
    height: calc(100vh - 174px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; 
}
.classify_refresh_box {
  height: calc(100vh - 130px);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.van-list-body {
    height: 100%;
}
</style>
  