<template>
    <view class="page-wrap">
        <view class="page-top" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
            <template v-if="showNavbar">
                <uni-nav-bar :title="title" :border="false" :backgroundColor="backgroundColor" :color="color" left-icon="left" :leftWidth="leftWidth" :rightWidth="rightWidth">
                    <template #default>
                        <slot name="default"></slot>
                    </template>
                    <template #left>
                        <slot name="left"></slot>
                    </template>
                    <template #right>
                        <slot name="right"></slot>
                    </template>
                </uni-nav-bar>
            </template>
            <template v-else>
                <slot></slot>
            </template>
        </view>
        <template v-if="showNavbar">
            <view class="page-content" :style="{ height: `calc(100% - 44px - ${safeAreaInsets?.top + 'px'})` }">
                <slot name="content"></slot>
            </view>
        </template>
    </view>
</template>

<script setup>
const ps = defineProps({
    showNavbar: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    color: {
        type: String,
        default: '#1D2129'
    },
    navbarBackground: {
        type: String,
        default: '#f7f8fa'
    },
    leftWidth: {
        type: Number,
        default: 120
    },
    rightWidth: {
        type: Number,
        default: 120
    }
})
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<style lang="scss" scoped>
.page-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    .page-top {
        flex: auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    :deep(.uni-navbar__header-btns) {
        width: auto;
    }
    .page-content {
        flex: auto;
        overflow-y: auto;
    }
}
</style>
