<template>
	<view class="navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
		<view class="navbar-inner" :style="{ height: navBarHeight + 'px' }">
			<view class="navbar-left" v-if="showBack" @click="goBack">
				<text class="back-arrow">‹</text>
			</view>
			<view class="navbar-left" v-else>
			</view>
			<view class="navbar-title">
				<text class="title-text">{{ title }}</text>
			</view>
			<view class="navbar-right"></view>
		</view>
	</view>
	<!-- 占位，防止内容被导航栏遮挡 -->
	<view :style="{ height: (statusBarHeight + navBarHeight) + 'px' }"></view>
</template>

<script>
	export default {
		name: 'NavBar',
		props: {
			title: {
				type: String,
				default: ''
			},
			showBack: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				statusBarHeight: 20,
				navBarHeight: 44
			}
		},
		created() {
			const sysInfo = uni.getSystemInfoSync()
			this.statusBarHeight = sysInfo.statusBarHeight || 20
			// 微信小程序胶囊按钮位置计算
			// #ifdef MP-WEIXIN
			const menuBtn = uni.getMenuButtonBoundingClientRect()
			this.navBarHeight = (menuBtn.top - this.statusBarHeight) * 2 + menuBtn.height
			// #endif
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped>
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 900;
	}

	.navbar-inner {
		display: flex;
		align-items: center;
		padding: 0 24rpx;
	}

	.navbar-left {
		width: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-arrow {
		font-size: 48rpx;
		color: #333;
		line-height: 1;
	}

	.navbar-title {
		flex: 1;
		text-align: center;
	}

	.title-text {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}

	.navbar-right {
		width: 60rpx;
	}
</style>