<template>
	<view class="navbar">
		<view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
		<view class="titleBar" :style="{height:getTitleBarHeight()+'px'}">
			<wd-navbar v-if="title" :title="title" :left-arrow="leftArrow" @click-left="handleClickLeft"></wd-navbar>
			<wd-navbar v-else :left-arrow="leftArrow" @click-left="handleClickLeft">
				<template #title>
					<slot name="title"></slot>
				</template>
			</wd-navbar>
		</view>
	</view>
	<view :style="{height:getNavBarHeight() +'px'}"></view>
</template>

<script setup>
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from "@/utils/system"

defineProps({
	title:{
		type:String,
		default:""
	},
	leftArrow:{
		type:Boolean,
		default:true
	}
})

const handleClickLeft = () => {
	uni.navigateBack()
}
</script>

<style lang="scss">
	.navbar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9;

		.statusBar{
			background: var(--wot-navbar-background);
		}

		.titleBar{
			background: var(--wot-navbar-background);
		}
	}
</style>