<template>
    <div v-loading="loading">
        <section v-for="item in state.list">
            <slot :item="item"></slot>
        </section>
        <div class="loadMore" v-if="isShowLoadMore" @click="getDataList()">加载更多</div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
const loading = ref(true);
const isShowLoadMore = computed({
  get() {
    return state.total > state.list.length;
  },
});
const props = defineProps({
    getData: {
        type: Function,
        required: true,
    },
    params: {
        type: Object,
        required: true,
        default: {}
    },
    pageNum: {
        type: Number,
        default: 1,
    },
    pageSize: {
        type: Number,
        default: 5,
    },
});
const state = reactive({
    list: [],
    pageNum: props.pageNum,
    pageSize: props.pageSize,
    total: 0,
});

async function getDataList () {
    loading.value = true;
    let snap = {
        page_num: state.pageNum,
        page_size: state.pageSize,
    };
    let _data = Object.assign({}, snap, props.params);
    console.log('_data',_data)
    let { code, data, msg } = await props.getData(_data);
    if (200 == code) {
        state.list.push.apply(state.list,data.data);
        state.total = data.count;
        state.pageNum++;
    }
    loading.value = false;
}

onMounted(() => {
    getDataList()
});
</script>

<style scoped>
.loadMore {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
    user-select: none;
}
</style>