<template>
    <z-paging
        ref="paging"
        v-model="dataList"
        :refresher-enabled="refresherEnabled"
        :refresher-threshold="refresherThreshold"
        :auto-show-back-to-top="autoShowBackToTop"
        :loading-more-enabled="refresherEnabled"
        :back-to-top-bottom="backToTopBottom"
        show-refresher-update-time
        :hide-empty-view="!refresherEnabled"
        @query="query"
    >
        <template #empty v-if="!dataList.length && refresherEnabled">
            <global-empty></global-empty>
        </template>
        <template #top>
            <view :style="{ height: safeAreaInsets?.top + 'px' }" v-if="custom"></view>
            <global-navbar :title="title" v-if="showNavbar">
                <template #left>
                    <uni-icons type="left" size="16" @tap="goBack"></uni-icons>
                </template>
            </global-navbar>
            <slot name="top"></slot>
        </template>
        <slot></slot>
        <template #bottom>
            <slot name="bottom"></slot>
        </template>
    </z-paging>
</template>
<script setup>
import { ref, watch } from 'vue'

const dataList = ref([])
const es = defineEmits(['update:modelValue', 'query'])
const paging = ref()
const ps = defineProps({
    showNavbar: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        default: ''
    },
    modelValue: {
        type: Array,
        default: () => []
    },
    custom: {
        type: Boolean,
        default: true
    },
    // 是否开启下拉刷新	Boolean	true
    refresherEnabled: {
        type: Boolean,
        default: false
    },
    refresherThreshold: {
        type: [String, Boolean],
        default: '150rpx'
    },
    autoShowBackToTop: {
        type: Boolean,
        default: true
    },
    backToTopBottom: {
        type: [Number, String],
        default: '160rpx'
    }
})
const complete = (data) => {
    paging.value?.complete(data || [])
}
watch(
    () => ps.modelValue,
    (val) => {
        dataList.value = val
    },
    { immediate: true }
)
watch(
    dataList,
    (val) => {
        es('update:modelValue', val)
    },
    { deep: true }
)
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//列表加载
const query = (pageIndex, pageSize) => {
    if (ps.refresherEnabled) {
        es('query', { pageIndex, pageSize })
    }
    if (!dataList.value.length) {
        complete(dataList.value)
    }
}
//返回
const goBack = () => {
    uni.navigateBack()
}

defineExpose({
    complete,
    reload: () => {
        paging.value?.reload()
    }
})
</script>
<style scoped></style>
