<template>
	<view :class="isCustom?'custom isCustom':'custom'">
		<view class="navTop" :style="'height: '+statusBarHeight+'px;background:'+color"></view>
		<view class="capsule" :style="'height: '+headerBar+'px;background:'+color">
			<view class="capsuleLeft">
				<view class="back" v-if="isBack" @click.stop="onBack" :style="color?'border:none':''">
					<slIcon :name="backIcon" color="#333" size="32rpx"/>
				</view>
				<slot name="navLeft"></slot>
			</view>
			<view class="title textEllipsis" v-if="title" :style="'line-height:'+ headerBar+'px'">
				{{title}}
			</view>
			<view :class="search?'search searchF':'search'" :style="color?'background: #f8f8f8;':''" v-if="isSearch">
				<view class="left">
					<slIcon name="icon-search" color="#999" size="34rpx"/>
				</view>
				<view class="right">
					<swiper  :autoplay="true" :interval="3000" :duration="1000" vertical class="swiper">
						<swiper-item>
							<view class="tips">父爱配方</view>
						</swiper-item>
						<swiper-item>
							<view class="tips">身体知道</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import slIcon from '@/sdk/sl-icon/index.vue';
	export default {
		components:{
			slIcon
		},
		props:{
			title:{
				type:String,
				default:""
			},
		    color:{
				type:String,
				default:""
			},
			isCustom:{
				type:Boolean,
				default:false
			},
			search:{
				type:Boolean,
				default:false
			},
			isSearch:{
				type:Boolean,
				default:false
			},
			isBack:{
				type:Boolean,
				default:false
			},
		},
		data(){
			return {
				statusBarHeight:0,
				headerBar:0,
				backIcon:'icon-back'
			}
		},
		created(){
			this.getSystemInfo()
		},
		mounted(){
			console.log(getCurrentPages())
			let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
			if(currentRoutes.length<=1){
				this.backIcon="icon-home"
			}else{
				this.backIcon="icon-back"
			}
		},
		methods:{
			getSystemInfo(){
				let that=this
				uni.getSystemInfo({
				  success (res) {
					if(res){
						that.statusBarHeight = res.statusBarHeight;   // 状态栏高度
						let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
						that.headerBar=menuButtonInfo.height+(menuButtonInfo.top-res.statusBarHeight)*2
					}
				  }
				})
				
			},
			onBack(){
				if(this.backIcon=='icon-back'){
					uni.navigateBack();
				}else{
					uni.switchTab({
						url: '/pages/index/index',
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom{
		width: 750rpx;
		.search{
			width: 710rpx;
			height: 70rpx;
			background: #fff;
			box-sizing: border-box;
			position: absolute;
			top: 90rpx;
			left: 20rpx;
			transition: all 0.6s ease;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			padding: 0 15rpx;
			color: #999;
			font-weight: 400;
			font-size: 26rpx;
		}
		.searchF{
			top: 5rpx;
			left: 62rpx;
			width: 440rpx;
		}
	}
	.isCustom{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.navTop{
		width: 100%;
		transition: all 0.6s ease; 
	}
	.capsule{
		transition: all 0.6s ease; 
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		.left{
			width: 40rpx;
			padding-left: 10rpx;
		}
		.title{
			width: 45%;
			height: 100%;
			font-size: 30rpx;
			margin: 0 auto;	
		    text-align: center;
		}
		.right{
			width: 300rpx;
			.swiper{
				height: 50rpx;
				line-height: 50rpx;
			}
		}
	}
	.capsuleLeft{
		// position: absolute;
		// top: 0rpx;
		// left: 20rpx;
	}
	.back{
		width: 50rpx;
		height: 50rpx;
		background: #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		// box-shadow: 0 4rpx 4rpx rgba(0,0,0,0.2);
		opacity: 0.8;
		border: 1px solid rgba(0,0,0,0.1);
	}
</style>