<template>
    <PullRefresh class="app-pull-refresh" v-model="refreshing" @refresh="onRefresh">
        <slot name="header"></slot>
        <List ref="listRef" v-model:loading="loading" v-model:error="showError" :finished="finished" @load="onLoad">
            <slot></slot>
            <template #finished>
                <span>{{ finishedText }}</span>
            </template>
            <template #error>
                <span>{{ errorText }}</span>
            </template>
        </List>
        <slot name="footer"></slot>
    </PullRefresh>
</template>

<script lang="ts" setup>
import { shallowRef, computed, nextTick } from 'vue'
import { List, PullRefresh, ListInstance } from 'vant'

const props = defineProps({
    pageIndex: {
        type: Number,
        default: 1,
    },
    pageCount: {
        type: Number,
        default: 1,
    },
    error: {
        type: Boolean,
        default: false,
    },
    finishedText: {
        type: String,
        default: '没有更多了',
    },
    errorText: {
        type: String,
        default: '请求失败，点击重新加载',
    }
})

const emit = defineEmits(['update:pageIndex', 'update:error', 'refresh'])
const listRef = shallowRef<ListInstance>()
const refreshing = shallowRef(false) // 是否处于下拉加载状态
const finished = shallowRef(false) // 是否已加载完成所有数据
const loading = shallowRef(false)

const showError = computed({
    get: () => props.error,
    set: (val) => emit('update:error', val)
})

const currentPage = computed({
    get: () => props.pageIndex,
    set: (val) => emit('update:pageIndex', val)
})

// 上拉加载
const onLoad = () => {
    if (refreshing.value) {
        currentPage.value = 1
    }
    nextTick(() => {
        if (currentPage.value <= props.pageCount) {
            emit('refresh', () => {
                if (refreshing.value) {
                    refreshing.value = false
                }
                if (!showError.value) {
                    currentPage.value++
                }
                loading.value = false
            })
        } else {
            refreshing.value = false
            finished.value = true
        }
    })
}

// 下拉刷新
const onRefresh = () => {
    finished.value = false
    loading.value = true
    onLoad()
}

// 暴露组件属性给父组件调用
defineExpose({
    refresh: () => {
        currentPage.value = 1
        onRefresh()
    },
})
</script>

<style lang="less">
@import './index.less';
</style>