<template>
	<view class="navigation" :style="{height:CustomBar+'px'}" >
		<view class="me-container"  :style="cuStyle" >
			<view class="me-left flex_ac">
				<view v-if="isBack" @tap="toBack" :style="'color:'+backColor" class="iconfont icon-zuojiantou"></view>
				<slot name="left"></slot>
			</view>
			<view class="me-content">
				<slot name="content"></slot>
			</view>
			<view class="me-right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			isBack:{
				type:Boolean,
				default:true
			},
			bgColor:{
				type:String,
				default:'#FFFFFF'
			},
			backColor:{
				type:String,
				default:'#000000'
			},
			is_handler: {
				type:Boolean,
				default:false
			}
		},
		computed:{
			cuStyle(){
				return `height:${this.CustomBar}px;padding-top:${this.StatusBar}px;background:${this.bgColor}`
			}
		},
		data() {
			return {
				StatusBar:this.StatusBar,
				CustomBar:this.CustomBar
			};
		},
		methods:{
			toBack(){
				if(this.is_handler) {
					this.$emit('backHandler')
				}else {
					uni.navigateBack({
						delta:1
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	cover-view{
		box-sizing: border-box;
	}
.navigation{
	position: relative;
	z-index: 5000;
	.icon-zuojiantou {
		font-size: 50rpx;
	}
	.bg-white{
		background: #FFFFFF;
	}
	.bg-tran{
		background: transparent;
	}
	.bg-them{
		background:$them_color ;
	}
	.bg-lin{
		background: linear-gradient(270deg, $them_color 0%, #7FDAFF 100%);
	}
	.bg-the {
		background-image: linear-gradient(to right,rgba(144, 199, 101,1),rgba(225, 226, 0,1));
	}
	.me-container{
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1024;
		// box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
		// padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.me-content{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			font-weight: bold;
			font-size: 40rpx;
		}
		.me-left{
			margin-left: 12rpx;
			.icon-back{
				font-size: 42rpx;
				margin-left: 13rpx;
				position: relative;
				top: 5rpx;
				display: block;
				&::after{
					content: '';
					display: block;
					width: 100%;
					height: 100%;
					transform: scale(1.3);
				}
			}
		}
		
	}
}
</style>
