<template> 
	<view class="el-navbar" v-if="!browser().isWechat">
		<view :class="[fixed && 'navbar-fixed']">
			<el-status-bar v-if="safeAreaInsetTop" :bgColor="bgColor" :opacity="getOpacity"></el-status-bar>
			<view :style="{ height: height + 'px', background: bgColor,opacity: getOpacity }"></view>
			<view class="navbar-content" :class="[border && getOpacity && 'border-bottom']" :style="{ height: height + 'px', top: system.statusBarHeight + 'px' }">
				<view v-if="showLeft" class="left" hover-class="hover" hover-start-time="150">
					<slot name="left">
						<view v-if="isHome != 0" class="nav-slot" :class="{ 'nav-home': isHome == 2 }">
							<uni-icons v-if="leftIcon" :type="leftIcon" size="20" @click="leftClick" :color="isHome != 2 ? getOpacity >= 1 ? '#333' : '#fff' : '#333'" :class="{ 'nav-left-icon': isHome != 2, 'nav-left-active': getOpacity >= 1 }"></uni-icons>
							<text v-if="leftText" :style="{ color: leftIconColor }" class="text" @click="leftClick">{{ leftText }}</text>
							<view class="line"></view>
							<uni-icons class="nav-icon-home" type="home" size="20" @click="goHome"></uni-icons>
						</view>
					</slot>
				</view>
				<slot name="center">
					<text class="title" :style="[{ width: titleWidth,opacity: getOpacity}, addStyle(titleStyle)]">{{ title }}</text>
				</slot>
				<view class="right" :style="{right: mpCapsuleRightPosition + 'px'}" @click="rightClick">
					<slot name="right">
						<uni-icons v-if="rightIcon" :type="rightIcon" size="20"></uni-icons>
						<text v-if="rightText" class="text">{{ rightText }}</text>
					</slot>
				</view>
			</view>
		</view>
		<view v-if="fixed && placeholder" :style="{ height: (Number(height) + Number(system.statusBarHeight)) + 'px' }"></view>
	</view>
</template>

<script setup>
	import { computed,ref,onMounted,nextTick } from "vue";
	import { addStyle } from "../../libs/style.js";
	import { navigateTo,navigateBack } from "../../libs/navigate.js";
	import { browser } from "../../libs/check.js";
	
	const props = defineProps({
		top: {
			type: Number,
			default: 0
		},
		// 是否开启顶部安全区适配
		safeAreaInsetTop: {
			type: Boolean,
			default: true
		},
		// 固定在顶部时，是否生成一个等高元素，以防止塌陷
		placeholder: {
			type: Boolean,
			default: false
		},
		// 是否固定在顶部
		fixed: {
			type: Boolean,
			default: true
		},
		// 是否显示下边框
		border: {
			type: Boolean,
			default: false
		},
		// 是否显示左边
		showLeft: {
			type: Boolean,
			default: true
		},
		// 左边的图标
		leftIcon: {
			type: String,
			default: 'left'
		},
		// 左边的提示文字
		leftText: {
			type: String,
			default: ''
		},
		// 小程序端导航栏右侧是否预留胶囊位置
		mpRightReserveCapsule: {
			type: Boolean,
			default: true
		},
		// 左边的提示文字
		rightText: {
			type: String,
			default: ''
		},
		// 右边的图标
		rightIcon: {
			type: String,
			default: ''
		},
		// 标题
		title: {
			type: [String, Number],
			default: ''
		},
		// 背景颜色
		bgColor: {
			type: String,
			default: '#ffffff'
		},
		// 标题的宽度
		titleWidth: {
			type: [String, Number],
			default: '400rpx'
		},
		// 导航栏高度
		height: {
			type: [String, Number],
			default: '44'
		},
		// 左侧返回图标的大小
		leftIconSize: {
			type: [String, Number],
			default: '20px'
		},
		// 左侧返回图标的颜色
		leftIconColor: {
			type: String,
			default: '#303133'
		},
		// 点击左侧区域(返回图标)，是否自动返回上一页
		autoBack: {
			type: Boolean,
			default: true
		},
		// 标题的样式，对象或字符串
		titleStyle: {
			type: [String, Object],
			default: ''
		},
		opacity: {
			type: [Number,String],
			default: 1
		},
		scroll: {
			type: [Number,String],
			default: 0
		}
	});
	
	const system = uni.getSystemInfoSync();
	const emits = defineEmits(["update:top","left","right","change"]);
	
	onMounted(()=>{
		nextTick(()=>{
			let navTop = 44;
			if(props.safeAreaInsetTop){
				navTop += system.statusBarHeight;
			}
			
			if(props.border){
				navTop += 0.5;
			}
			
			if(browser().isWechat){
				navTop = 0;
			}
			
			emits("update:top", navTop);
		});
		
	});
	
	const getOpacity = computed(()=>{
		if(props.opacity >= 1){
			return props.opacity;
		}
		
		var opacity = props.scroll / 180;
		return opacity > 1 ? 1 : opacity;
	})
	
	const mpCapsuleRightPosition = computed(()=>{
		//#ifdef MP
		return props.mpRightReserveCapsule ? uni.getMenuButtonBoundingClientRect().width + 2 : 0;
		// #endif
		// #ifndef MP
		return 0
		// #endif
	});
	
	let pages  = getCurrentPages();
	let isHome = ref(pages.length <= 1 ? 1 : 0);
	let homePath = uni.$config.get("tabBar.defaultHome","pages/index/index");
	if(pages[pages.length - 1].route == homePath){
		isHome.value = 0;
	}else if(pages.length > 1){
		isHome.value = 1;
	}else{
		isHome.value = 2;
	}
	
	const leftClick = ()=>{
		if(props.autoBack){
			if(pages.length > 1) {  
				navigateBack();
			} else {
				navigateTo(homePath);
			}
		}else{
			emits("left");
		}
	}
	
	const rightClick = ()=>{
		emits("right");
	}
	
	const goHome = ()=>{
		navigateTo(homePath);
	}
</script>

<style lang="scss" scoped>
	.el-navbar {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		.navbar-fixed {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 11;
		}
		.navbar-content {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 44px;
			justify-content: center;
			.left,.right {
				padding: 0 13px;
				position: absolute;
				top: 0;
				bottom: 0;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.left {
				left: 0;
				.hover {
					opacity: 0.7;
				}
				.text {
					font-size: 15px;
					margin-left: 3px;
				}
				.nav-left-icon {
					background-color: rgba(0, 0, 0, .3);
					border-radius: 50%;
					padding: 5rpx;
				}
				.nav-left-active {
					background-color: #fff;
					padding: 0;
				}
			}
			.title {
				text-align: center;
				font-size: 16px;
				color: #303133;
			}
			.right {
				right: 0;
				.text {
					font-size: 15px;
					margin-left: 3px;
				}
			}
			&.border-bottom {
				border-bottom-width: 0.5px !important;
				border-color: #dadbde !important;
			    border-bottom-style: solid;
			}
		}
	}
	.nav-slot {
		.line { display: none; }
		.nav-icon-home { display: none; }
		&.nav-home {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border: 1px solid #dadbde;
			border-width: 0.5px;
			border-radius: 100px;
			border-color: #dadbde;
			padding: 3px 7px;
			opacity: .8;
			background-color: #fff;
			.line {
				position: relative;
				border: 0px solid #000000;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				flex-shrink: 0;
				flex-grow: 0;
				flex-basis: auto;
				align-items: stretch;
				align-content: flex-start;
				display: inline-block;
				vertical-align: middle;
				margin: 0px 8px;
				border-left: 1px solid rgb(214, 215, 217);
				height: 16px;
				border-top-color: rgb(214, 215, 217);
				border-right-color: rgb(214, 215, 217);
				border-bottom-color: rgb(214, 215, 217);
			}
			.nav-icon-home {
				display: block;
			}
		}
	}
</style>