<template>
	<view class="navbar"> <!-- 如若不写 高度始终为44 没有找到原因 -->
		<view class="narbar-flexd">
			<view :style="{height:statusBarHeight+'px',background:'#ffffff'}"></view>
			<view :class="isCenter?'narbar-content':'isCenter'" :style="{height:navBareight+'px'}" >
				
				<!-- 左侧返回按钮 -->
				<view class="left" @click="onBack" v-if="back&&toIndex" :style="[{color},{paddingTop}]">
					<u-icon name="arrow-left" size="20"></u-icon>
					<!-- <uni-icons type="arrowleft" size="25" :color='color' ></uni-icons> -->
					<!-- <u--image :showLoading="true" src="https://bsl-lj-rent.oss-cn-shanghai.aliyuncs.com/idn-mac/indexs/lianxi.png" width="60rpx" height="71rpx" @click="click"></u--image> -->
				</view>
				<!-- 不去扫码返回按钮 -->
				<view class="left" @click="onBackIndex" v-if="back&&!toIndex" :style="[{color},{paddingTop}]">
					<u-icon name="arrow-left" size="20"></u-icon>
					<!-- <uni-icons type="arrowleft" size="25" :color='color' ></uni-icons> -->
					<!-- <u--image :showLoading="true" src="https://bsl-lj-rent.oss-cn-shanghai.aliyuncs.com/idn-mac/indexs/lianxi.png" width="60rpx" height="71rpx" @click="click"></u--image> -->
				</view>
				<view class="title">
					{{title}}
				</view>
			</view>
		</view>
		<!-- <view class="navHeight" :style="{height:statusBarHeight+navBareight +'px'}"></view> -->
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				statusBarHeight:20,
				navBareight: 45,
				windowWidth: 375,
			};
		},
		props:{
			title:{ // 标题文字(默认为空)
				type:String,
				default:'#fff'
			},
			toIndex:{
				type:Boolean,
				default:true
			},
			color:{ // 标题和返回按钮颜色(默认白色)
				type:String,
				default:'#222'
			},
			paddingTop:{
				type:String,
			},
		    //建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
			background:{ // 背景颜色(不传值默认透明)
				type:String,
				default:'transparent'
			},
			back:{ // 是否显示返回按钮(不传值默认不显示)
				type:Boolean,
				default:false
			},
			isCenter:{//是否中间
				type:Boolean,
				default:true
			}
		},
		
		created() {
			//获取手机系统信息 -- 状态栏高度
			let {
				statusBarHeight,
				windowWidth
			} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			this.windowWidth = windowWidth
			//去除
			//#ifndef H5 || MP-ALIPAY ||APP-PLUS
			//获取小程序胶囊的高度
			let {
				top,
				bottom,
				left
			} = uni.getMenuButtonBoundingClientRect()
			//高度 =（胶囊底部高低-状态栏高度）+（胶囊顶部高度-状态栏内的高度）
			this.navBareight = (bottom - statusBarHeight) + (top - statusBarHeight)
			this.windowWidth = left
			//#endif
		},
		
		methods: {
			// 左侧返回按钮调用
			onBack() {
				this.$emit("onBack");
				// uni.navigateBack({
				// 		delta:1,//返回层数，2则上上页
			 //    })
				
			},
			onBackIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
		
	}
</script>
 
<style lang="scss">
	.navbar {
		background-color: #ffffff;
		// background-image: url('https://bsl-lj-rent.oss-cn-shanghai.aliyuncs.com/idn-mac/index/90.png') !important;
		// background-size: 100% 100% !important;
		.narbar-flexd {
			// background-image: url('https://bsl-lj-rent.oss-cn-shanghai.aliyuncs.com/idn-mac/index/90.png') !important;
			background-size: 100% 100% !important;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			// padding-bottom: 10rpx;
			.narbar-content {
				// height: 45px;
				padding: 0 24upx;
				// margin-bottom: 10px;
				display: flex;
				box-sizing: border-box;
				justify-content:center;
				align-items: center;
				background-color: #ffffff;
				.left{
					position: absolute;
					left: 5%;
					font-weight: 600;
				}
				.title{
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				
			}
			.isCenter{
				// height: 45px;
				padding: 0 24upx;
				// margin-bottom: 10px;
				display: flex;
				box-sizing: border-box;
				justify-content:flex-start;
				align-items: center;
				.left{
					position: absolute;
					left: 5%;
					font-weight: 600;
				}
				.title{
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				
			}
 
			
		}
		.navHeight {
			height: 60px;
		}
	}
</style>