<template>
	<view class="nav-bar-container">
		<view class="status-placeholder" :style="{height:`${data.statusBarHeight}px`}"></view>
		<uni-nav-bar class="nav-bar" :border="false" :title="title" v-bind="$attrs" v-on="$attrs">
			<template v-slot:left>
				<slot name="left">
				</slot>
			</template>
		</uni-nav-bar>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits,
		onMounted,
		reactive
	} from 'vue'

	// 定义组件属性
	const props = defineProps({})

	// 定义事件
	const emit = defineEmits(['back', 'right-click'])

	const data = reactive({
		statusBarHeight: 0
	})

	onMounted(() => {
		// 同步获取系统信息
		const systemInfo = uni.getSystemInfoSync();
		data.statusBarHeight = systemInfo.statusBarHeight || 0;
	})

	// 返回按钮点击事件
	const onBack = () => {
		emit('back')
		// 默认返回上一页
		uni.navigateBack()
	}

	// 右侧按钮点击事件
	const onRightClick = () => {
		emit('right-click')
	}
</script>

<style scoped>
	.nav-bar-container{
		display: flex;
		flex-direction: column;
	}
	.nav-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 100;
	}

	.status-placeholder {
		width: 100%;
	}

	::v-deep .uni-navbar__content {
		width: 100%;
	}
</style>