<template>
    <z-paging
        ref="paging"
        v-model="dataList"
        :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
        :hide-empty-view="!isDataList"
        @query="query"
    >
        <template #empty v-if="refresherEnabled || loadingMoreEnabled">
            <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>
                    <view v-if="isEdit" class="cancel" @tap="handleCancel">取消</view>
                    <uni-icons type="left" size="16" @tap="goBack" v-else></uni-icons>
                </template>
                <template #right>
                    <global-button type="primary" size="small" v-if="isEdit" style="padding: 0 32rpx" @tap="handleSave">保存</global-button>
                </template>
            </global-navbar>
            <slot name="top"></slot>
        </template>
        <!-- 滚动内容 -->
        <slot :dataList="dataList" v-if="isDataList"></slot>
        <slot></slot>
        <!-- 底部 -->
        <template #bottom>
            <slot name="bottom"></slot>
        </template>
    </z-paging>
</template>
<script setup>
import { ref } from 'vue'

const dataList = ref([])
const es = defineEmits(['query', 'handleCancel', 'handleSave'])
const paging = ref()
const ps = defineProps({
    //是否自动加载
    auto: {
        type: Boolean,
        default: false
    },
    //是否展示自定义导航栏
    showNavbar: {
        type: Boolean,
        default: true
    },
    //页面是否编辑状态
    showEdit: {
        type: Boolean,
        default: false
    },
    //页面标题
    title: {
        type: String,
        default: ''
    },
    //是否关闭原生导航栏
    custom: {
        type: Boolean,
        default: true
    },
    //是否展示列表
    isDataList: {
        type: Boolean,
        default: false
    },
    //是否开启下拉刷新
    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'
    }
})
const complete = (data) => {
    paging.value?.complete(data || true)
}
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//列表加载
const query = (pageIndex, pageSize) => {
    es('query', { pageIndex, pageSize })
    if (ps.isDataList) {
        if (!dataList.value.length) {
            complete(dataList.value)
        }
        setTimeout(() => {
            complete([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
        }, 500)
    } else {
        complete()
    }
}
//获取页面状态
const isEdit = ref(ps.showEdit)
//返回
const goBack = () => {
    uni.navigateBack()
}
//取消
const handleCancel = () => {
    es('handleCancel')
}
//保存
const handleSave = () => {
    es('handleSave')
}
//修改编辑状态
const handleChangeEdit = (value) => {
    isEdit.value = value
}
defineExpose({
    handleChangeEdit
})
</script>
<style scoped>
.cancel {
    font-size: 28rpx;
}
</style>
