<template>
	<view class="navbar">
		<view class="fixed">
			<!-- 状态栏站位 -->
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<!-- 导航栏内容 -->
			<view class="content" :style="{height: navbarHeight + 'px', width: windowWidth + 'px'}">
				<view class="title">
					<view class="icon" v-if="isBack">
						<u-icon name="arrow-left" :color="color" size="18" @click="handleGoBack"></u-icon>
					</view>
					<view class="text" :style="{marginLeft: menuButtonWidth + 'px', color: color}">
						<slot></slot>
					</view>
				</view>
			</view>
		</view>
		<!-- 下面的45px元素是为了将内容挤下去 -->
		<view :style="{height: computedHeight + 'px'}"></view>
	</view>
</template>
<script>
	import { handleError } from 'vue';

	export default {
		name: "NavBar",
		props: {
			color: {
				type: String,
				default: '#000000',
			},
			isBack: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				statusBarHeight: 20,
				navbarHeight: 45,
				windowWidth: 375,
				menuButtonWidth: 0,
			};
		},
		computed: {
			computedHeight() {
				return this.statusBarHeight + this.navbarHeight
			}
		},
		created() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth

			/* h5 app mp-ali都是不支持getMenuButtonBoundingClientRect这个api的 */
			/* 微信、百度、QQ都是支持getMenuButtonBoundingClientRect这个api的 */
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取微信小程序胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// (胶囊底部高度 - 状态栏高度) + (胶囊顶部高度 - 状态栏高度) = 导航栏高度
			this.navbarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
				.statusBarHeight)
			// 动态计算导航栏宽度
			this.windowWidth = menuButtonInfo.left
			// 胶囊宽度
			this.menuButtonWidth = menuButtonInfo.width;
			// #endif
		},
		methods: {
			// 返回
			handleGoBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.navbar {
		width: 100%;

		.fixed {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;

			.content {
				position: relative;
				width: 100%;

				.title {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					.icon {
						position: absolute;
						left: 20rpx;
					}

					.text {
						font-weight: 400;
						font-size: 34rpx;
						line-height: 50rpx;
						text-align: center;
						font-style: normal;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						padding: 0 80rpx;
					}
				}
			}
		}
	}
</style>