<!-- 详情 -->
<template>
	<view>
		<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
			<template #top>
				<uniNavBar :title="title" @clickLeft="onClickLeft" :leftIcon="leftIcon" />
			</template>
			<view class="page-container">
				<view class="page-container__content">
					<view class="page-container__not-data" v-if="showNotData">

					</view>
					<view class="page-container__loading" v-if="showLoading" @click.stop="mengban">

					</view>
					<slot></slot>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		uniNavBar
	} from '@/components/uni-nav-bar/uni-nav-bar.vue'
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		showBack: {
			type: Boolean,
			default: false
		},
		showNotData: {
			type: Boolean,
			default: false
		},
		refresh: {
			type: Function,
			default: function(refresh) {
				// refresh.complete();
			}
		},
		showLoading: {
			type: Boolean,
			default: false
		}
	});
	let paging = ref(null);
	const leftIcon = computed(() => {
		if (props.showBack) {
			return "/static/back.png";
		}
	});
	const onClickLeft = () => {
		if (props.showBack) {
			uni.navigateBack();
		}
	}
	const onRefresh = () => {
		if (props.refresh) {
			props.refresh(paging.value);
		} else {
			paging.value.complete();
		}
	}
	const getPaging = () => {
		return paging.value;
	}
	const mengban = () => {

	}
	defineExpose({
		getPaging
	})
</script>

<style lang="scss" scoped>
	.page-container {
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;


		&__content {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			position: relative;
		}

		&__divider {
			width: 100%;
			height: 4rpx;
			background-color: #e5e5e5;
			/* 使用较浅的灰色 */
			position: relative;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
			margin-bottom: 10rpx;
			/* 在分割线下方添加一些间距 */
		}

		&__not-data {
			width: 100%;
			height: 80vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&__loading {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0px;
			left: 0;
			z-index: 1000;
			justify-content: center;
			align-items: center;
			// background-color: rgba(0, 0, 0, 0.5);
		}
	}
</style>