<!-- 详情 -->
<template>

    <view>
        <z-paging ref="_paging" :refresher-enabled="false">
            <template #top>
                <uni-nav-bar :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">
                        <no-data />
                    </view>
                    <slot></slot>
                </view>
            </view>
        </z-paging>
        <view>
            <page-popup ref="_pagePopup" />
        </view>
    </view>
</template>

<script setup>
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    showBack: {
        type: Boolean,
        default: false
    },
    showNotData: {
        type: Boolean,
        default: false
    }
});
let _paging = ref(null);
let _pagePopup = ref(null);
const leftIcon = computed(() => {
    if (props.showBack) {
        return "/static/back.png";
    }
});
const onClickLeft = () => {
    if (props.showBack) {
        uni.navigateBack();
    }
}

const getPaging = () => {
    return _paging.value;
}
const getPagePopup = () => {
    return _pagePopup.value;
}
defineExpose({
    getPaging,
    getPagePopup
})
</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;
    }
}
</style>