<template>
	<view class="navbar custom-class" :style="{ 'height': navHeight+'px' }">
	  <view class="navbar-action-wrap navbar-action-group row item-center" :style="{'top': navTop+'px'}">
			<view v-if="isBack" class="navbar-action_item" @tap="navBack">
				<u-icon name="arrow-left" color="#2979ff" size="28"></u-icon>
			</view>
			<view v-if="isMap" class="navbar-action_item last map-bar" @tap="toMap">
				<u-image class="map-icon" width="20rpx" height="30rpx" src="/static/map-icon.png"></u-image>
				<view class="item-label">配送地图</view>
			</view>
	  </view>
	  <view class='navbar-title' :style="{'top': navTop+'px'}">
	    {{pageName}}
	  </view>
	</view>
</template>

<script>
	export default {
		props: {
			pageName: String,
			showNav:{
			  type: Boolean,
			  value: true
			},
			bgColor: {
			  type: String,
			  value: '#fff'
			},
			isBack: {
				type: Boolean,
				value: false
			},
			isMap: {
				type: Boolean,
				value: false
			}
		},
		mounted() {
			let menuButtonObject = wx.getMenuButtonBoundingClientRect()
			const _this = this
			wx.getSystemInfo({
			  success (res) {
			    console.log(res)
				let statusBarHeight = res.statusBarHeight,
				navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
				navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
				_this.navHeight = navHeight;
				_this.navTop = navTop;
				_this.windowHeight = res.windowHeight;
			  }
			})
		},
		data() {
			return {
				navHeight: '',
				navTop: '',
				windowHeight: ''
			}
		},
		methods: {
			//回退
			navBack: function () {
				uni.navigateBack({
				  delta: 1
				})      
			},
			//配送地图
			toMap: function () {
				uni.navigateTo({
					url: '/pages/index/map'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
	  width: 100%;
	  overflow: hidden;
	  position: relative;
	  top: 0;
	  left: 0;
	  z-index: 10;
	  flex-shrink: 0;
	  .navbar-action-wrap {
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    position: absolute;
	    left: 10px;
	    z-index: 11;
	    line-height: 1;
	    padding-top: 4px;
	    padding-bottom: 4px;
	  }
	  .navbar-action-group {
	    overflow: hidden;
		.navbar-action_item {
		  border-right: 1px solid #f0f0f0;
		  color: #333;
		}
		.last {
		  border-right: none;
		}
		.map-bar{
			text-align: center;
			.map-icon{
				display: inline-block;
			}
			.item-label{
				font-size: 24rpx;
				transform: scale(0.6);
			}
		}
	  }
	  .navbar-title {
	    width: 100%;
	    box-sizing: border-box;
	    padding-left: 115px;
	    padding-right: 115px;
	    height: 32px;
	    line-height: 32px;
	    text-align: center;
	    position: absolute;
	    left: 0;
	    z-index: 10;
	    color: #333;
	    font-size: 16px;
	    font-weight: bold;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    white-space: nowrap;
	  }
	}
</style>
