<template>
	<view class="navigation-bar" :style="{height:height}">
		<view 
			class="navigation-bar-fixed" 
			:style="{height:height,background:config.bgcolor}"
		>
			<block v-if="!isTaskInfo">
				<view 
					class="navigation-bar-capsule" 
					:style="{top:marginTop}"
					@click="goMy('/pages/my/my')"
				>
					<image src="/map/static/images/index/meIcon.png"></image>
				</view>
			</block>
			<block v-else>
				<view
					class="navigation-bar-capsule" 
					:style="{top:marginTop}"
					@click="goBack"
				>
					<image src="../../static/images/common/left.png"></image>
				</view>
			</block>
			<view 
				class="navigation-bar-title" 
				:style="'margin-top:'+marginTop"
			>
				{{config.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			config:{
				type:Object,
				default(){
					return {
						title:"",		//title
						bgcolor:"", 	//背景颜色
					}
				}
			},
			isTaskInfo:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				
			};
		},
		computed:{
			height(){
				const {platform,statusBarHeight} = uni.getSystemInfoSync()
				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"				
			}
		},
		updated() {
			console.log(this.config)
		},
		mounted() {
			console.log(this.config)
		},
		methods:{
			// 返回上一页
			goBack(){
				this.$emit('goBack')
			},
			goMy(url){
				uni.navigateTo({
					url,
				})
			},
		}
	}
</script>

<style lang="scss">
	.navigation-bar{
		width: 100%;
		box-sizing: border-box;
		.navigation-bar-fixed{
			width: 100%;
			position: fixed;
			top:0;
			z-index: 9999;
			display: flex;
			justify-content: center;
			.navigation-bar-capsule{
				position: absolute;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				left: 10px;
				image{
					width: 60rpx;
					height: 60rpx;
				}
			}
			.navigation-bar-title{
				line-height: 32px;
				height: 32px;
				// border: 1rpx solid red;
				color:white;
				font-size: 36upx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			
		}
	}
</style>
