<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"
import { BEFORE_NAVIGATE_BACK_EVENT } from "./back-events"

const props = defineProps({
	title:{
		type:String,
		default:""
	},
	leftArrow:{
		type:Boolean,
		default:true
	},
	autoBack: {
		type: Boolean,
		default: true
	},
	safeBack: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits(['click-left'])

const handleClickLeft = () => {
	emit('click-left')
	if (props.safeBack) {
		uni.$emit(BEFORE_NAVIGATE_BACK_EVENT)
		setTimeout(() => {
			uni.navigateBack()
		}, 80)
		return
	}
	if (props.autoBack) {
		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>