<template>
	<view class="nav flex fixed" :style="navBarStyle">
		<image v-if="!hideNavBg" class="bg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
		<view class="backC relative flex" :style="backTitleStyle" @click="clickBack">
			<image v-if="!hideBack&&!backBlack" class="icon" src="/static/icon/back.png" mode="widthFix"></image>
			<image v-if="!hideBack&&backBlack" class="icon" src="/static/icon/backBlack.png" mode="widthFix"></image>
			<text class="title">{{leftText}}</text>
		</view>
		<view class="titleC relative" :style="navTitleStyle">
		    {{navTitle}}
			<view v-if="num>0" class="peopleNum absolute">
				<view class="num">{{num}}人</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { inject } from 'vue'
	const app = getApp()
	
	export default {
		name: "navBar",
		data() {
			return {
				// #ifdef MP-WEIXIN
				navH: inject('navHeight'),
				menuH: inject('menuHeight'),
				// #endif
				// #ifdef MP-TOUTIAO
				navH: app.globalData.navHeight,
				menuH: app.globalData.menuHeight,
				// #endif
				navBarStyle:'',
				backTitleStyle:'',
				navTitleStyle:'',
				titleColor:this.navTitleColor,
				bgColor:this.navBgColor,
				num:this.peopleNum
			};
		},
		props: {
			leftText: {
				type: String,
				default: ''
			},
			backBlack:{
				type: Boolean,
				default: false
			},
			navTitle: {
				type: String,
				default: ''
			},
			navBgColor: {
				type: String,
				default: ''
			},
			navTitleColor: {
				type: String,
				default: 'white'
			},
			hideBack: {
				type: Boolean,
				default: false
			},
			hideNavBg: {
				type: Boolean,
				default: false
			},
			backLevel: {
				type: Number,
				default: 1
			},
			peopleNum: {
				type: Number,
				default: 0
			}
		},
		mounted() {
			let navHeight = this.navH;
			// #ifdef MP-WEIXIN
			let menuHeight = inject('menuHeight');
			let menuTop = inject('menuTop');
			// #endif
			let navBarStyle = `background-color:${this.bgColor};height:${navHeight}px;`
			let backTitleStyle = `height:${menuHeight}px;margin-top:${menuTop}px;color:${this.titleColor}`
			let navTitleStyle = `height:${menuHeight}px;line-height:${menuHeight}px;top:${menuTop}px;color:${this.titleColor}`
			this.navBarStyle = navBarStyle
			this.backTitleStyle = backTitleStyle
			this.navTitleStyle = navTitleStyle
		},
		watch:{
			navTitleColor:{
				handler(newVal, oldVal)
				{
					this.titleColor = newVal
				}
			},
			navBgColor:{
				handler(newVal, oldVal)
				{
					this.bgColor = newVal
				}
			},
			peopleNum:{
				handler(newVal, oldVal)
				{
					this.num = newVal
				}
			}
		},
		methods:{
			clickBack()
			{
				uni.navigateBack({
					fail() {
						uni.switchTab({
							url:'/pages/index/index'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.nav 
	{
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		overflow: hidden;
		.bg 
		{
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
		}
		.backC
		{
			padding: 0 25rpx;
			.icon 
			{
				margin-right: 12rpx;
				width: 32rpx;
				height: auto;
			}
		}
		.title 
		{
			font-size: 36rpx;
			font-weight: bold;
		}
		.titleC
		{
			position: absolute;
			left: calc((100% - 400rpx)/2);
			width: 400rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: center;
			font-size: 36rpx;
			font-weight: 500;
			.peopleNum
			{
				background-color: #3B9174;
				top: -15rpx;
				left: 270rpx;
				height: 30rpx;
				border-radius: 15px 15px 15px 0px;
				line-height: 30rpx;
				font-size: 24rpx;
				color: white;
				.num 
				{
					margin: 0 16rpx;
				}
			}
		}
	}
	
</style>
