<template>
    <!-- 配合global-page-swiper实现左右滑动 -->
    <view class="content">
        <z-paging
            :auto="auto"
            :refresher-enabled="refresherEnabled"
            :refresher-threshold="refresherThreshold"
            :auto-show-back-to-top="autoShowBackToTop"
            :loading-more-enabled="loadingMoreEnabled"
            :back-to-top-bottom="backToTopBottom"
            show-refresher-update-time
            v-if="firstLoaded || isCurrentPage"
            ref="paging"
            v-model="dataList"
            @query="queryList"
            :fixed="false"
        >
            <template #empty v-if="!dataList.length && refresherEnabled">
                <global-empty></global-empty>
            </template>
            <slot :dataList="dataList">
                <up-skeleton v-if="showSkeleton" rows="100" :loading="true" :animate="true"
                             :title="false"></up-skeleton>
            </slot>
        </z-paging>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue'

const paging = ref()
const dataList = ref([])
// 当前组件是否已经加载过了
const firstLoaded = ref(false)
// 是否滚动到当前页
const isCurrentPage = ref(false)

const ps = defineProps({
    //是否自动加载
    auto: {
        type: Boolean,
        default: false
    },
    tabValue: {
        type: [Number, String],
        default: 0
    },
    tabIndex: {
        type: Number,
        default: 0
    },
    currentIndex: {
        type: Number,
        default: 0
    },
    //tab数据搜索字段
    tabValueField: {
        type: String,
        default: 'status'
    },
    //查询接口
    api: {
        type: Function,
        default: null
    },
    //是否开启下拉刷新
    refresherEnabled: {
        type: Boolean,
        default: false
    },
    refresherThreshold: {
        type: [String, Boolean],
        default: '150rpx'
    },
    //是否启用加载更多数据
    loadingMoreEnabled: {
        type: Boolean,
        default: false
    },
    autoShowBackToTop: {
        type: Boolean,
        default: true
    },
    backToTopBottom: {
        type: [Number, String],
        default: '160rpx'
    },
    localPaging: {
        type: Boolean,
        default: false
    },
    localPagingCB: {
        type: Function,
        default: () => {
        }
    },
    pageSize: {
        type: Number,
        default: 10
    }
})

watch(
    () => ps.currentIndex,
    (newVal) => {
        if (newVal === ps.tabIndex) {
            // 懒加载，当滑动到当前的item时，才去加载
            if (!firstLoaded.value) {
                // 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
                setTimeout(() => {
                    isCurrentPage.value = true
                }, 50)
            }
        }
    },
    {
        immediate: true
    }
)

//是否显示骨架屏
const showSkeleton = ref(true)
const queryList = (pageIndex, pageSize) => {
    if (!dataList.value.length) {
        paging.value?.complete(dataList.value)
    }
    const params = {
        pageIndex,
        pageSize
    }
    if (ps.tabValue != null) {
        params[ps.tabValueField] = ps.tabValue
    }
    if (Object.prototype.toString.call(ps.api) == '[object Function]') {
        ps.api(params, {loading: true}).then((res) => {
            if (res.code == 200 || res.list?.length) {
                if (!ps.localPaging) {
                    paging.value?.complete(res.list || res.data?.list || res?.data || [])
                } else {
                    const data = res.data || []
                    paging.value?.setLocalPaging(ps.localPagingCB(data))
                }
                firstLoaded.value = true
            } else {
                uni.$mocpMessage.error(res.message)
            }
        }).catch(() => {
            showSkeleton.value = false
            paging.value?.complete(false)
        })
    } else {
        showSkeleton.value = false
        paging.value?.complete(false)
    }
}
defineExpose({
    reload: () => {
        paging.value?.reload()
    },
    updateCache: () => {
        paging.value?.updateCache()
    }
})
</script>

<style>
/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
.content {
    height: 100%;
}
</style>
