<template>
	<view class="navigation-bar" :style=" 'height:'+height ">
		<view 
			class="navigation-bar-fixed" 
			:style="{height:height,background:config.bgcolor}"
		>
			<view 
				class="navigation-bar-capsule" 
				:style="{top:marginTop}"
				@tap="goMy"
			>
				<view class="button-action">
					<image :src="config.menuIcon" mode=""></image>
				</view>
			</view>
			<view 
				class="navigation-bar-title" 
				:style="'margin-top:'+marginTop+';color:'+config.fontcolor"
			>
				{{config.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		computed:{
			height(){
				const {platform,statusBarHeight} = uni.getSystemInfoSync();
				// const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				// // 导航栏高度 = 状态栏到胶囊的间距（ 胶囊距上距离 - 状态栏高度 ）*2  +  胶囊高度  +  状态栏高度
				// let navBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height + statusBarHeight;
				let height = statusBarHeight + 4; //ios 24px
				if (platform.toLowerCase() == "android" ){
					height += 4 //android 28px
				};
				// 胶囊高度 32px 下边框6px height 状态栏高度
				return height + 38 + "px";
			},
			marginTop(){
				const {platform,statusBarHeight} = uni.getSystemInfoSync();
				let height = statusBarHeight + 4;
				if (platform.toLowerCase() == "android" ){
					height += 4;
				};
				return height + "px";			
			}
		},
		props:{
			config:{
				type:Object,
				default(){
					return {
						title:"",		//title
						bgcolor:"", 	//背景颜色
						fontcolor:"#000",//文字颜色，默认白色
						menuIcon:"",  	//左侧image
					}
				}
			},
		},
		methods:{
			goMy(){
				this.$emit('goMy')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navigation-bar{
		width: 100%;
		box-sizing: border-box;
		.navigation-bar-fixed{
			width: 100%;
			position: fixed;
			top:0;
			box-sizing: border-box;
			z-index: 99999;
			background: #fff;
			display: flex;
			justify-content: center;
			.navigation-bar-capsule{
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 32px;
				height: 32px;
				font-size: 30upx;
				left: 10px;
				background-color: rgba(255,255,255,.8);
				border-radius: 16px;
				border:0.5px solid rgba(255,255,255,.3);
				box-sizing: border-box;
				overflow: hidden;
				z-index: 9;
				.button-action{
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 60upx;
						height: 60upx;
						padding: 10upx;
						box-sizing: border-box;
					}
				}
			}
			.navigation-bar-title{
				line-height: 32px;
				height: 32px;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				// margin-left: 20upx;
			}
		}
	}
	
	
	

</style>
