<template>
	<view class="niu-navbar">
		<view class="niu-navbar__status" v-if="status" :style="{
			position: toShow&&block?'':'relative',
			backgroundColor: gradient?gradient:statusColor?statusColor:'',
			height: x_statusHeight?(x_statusHeight+'px'):''
		}"></view>
		<view class="niu-navbar__block"
			:style="{height: x_height?(x_height+'px'):'',paddingTop: x_statusHeight?(x_statusHeight+'px'):''}"
			v-if="toShow&&toFixed&&block"></view>
		<view class="niu-navbar__wrapper" v-if="toShow" :style="{
			height: x_height?(x_height+'px'):'',
			paddingTop: x_statusHeight?(x_statusHeight+'px'):'',
			top: x_statusHeight?(0+'px'):'',
			opacity:x_opacity,
			backgroundImage: gradient?gradient:'',
			backgroundColor: !gradient?bg:'transparent'
		}" :class="[toFixed?'fixed':'',border?'border':'']">
			<view v-if="!oneline" class="niu-navbar__left" @click="clickLeft"
				:style="{color: color,height: x_height?(x_height+'px'):'',lineHeight: x_height?(x_height+'px'):'',top: x_statusHeight?(x_statusHeight+'px'):''}">
				<slot name="left">
					<!-- <i v-if="back" class="niu-navbar__icon iconfont icon-back_light"></i> -->
					<image v-if="!firstPage&&back" class="niu-navbar__icon"
						src="https://shidaizhu.oss-cn-shenzhen.aliyuncs.com/app_static/icons/icon3.png" mode=""></image>
					<text v-if="!firstPage&&back&&leftText" class="niu-navbar__text">{{leftText}}</text>
				</slot>
			</view>
			<!-- ,marginRight: adjust?(x_width+'px'):'' -->
			<view v-if="!oneline" class="niu-navbar__middle"
				:class="{center:middleLayout=='center',left:middleLayout=='left'}"
				:style="{ color: color,top: x_statusHeight?(x_statusHeight+'px'):'',height: x_height?(x_height+'px'):'',lineHeight: x_height?(x_height+'px'):'' }">
				<slot></slot>
			</view>
			<view v-if="!oneline" class="niu-navbar__right"
				:style="{color: color,height: x_height?(x_height+'px'):'',lineHeight: x_height?(x_height+'px'):'',top: x_statusHeight?(x_statusHeight+'px'):'',marginRight: adjust?(x_width+'px'):''}">
				<slot name="right"></slot>
			</view>
			<view v-if="oneline" class="niu-navbar__middle"
				:class="{center:middleLayout=='center',left:middleLayout=='left'}"
				:style="{ color: color,top: x_statusHeight?(x_statusHeight+'px'):'',height: x_height?(x_height+'px'):'',lineHeight: x_height?(x_height+'px'):'',marginRight: adjust?(x_width+'px'):'' }">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	let mainPagePath = "pages/index/index"
	const _throttle = function(fn, interval) {
		var last;
		var timer;
		var interval = interval || 200;
		return function() {
			var th = this;
			var args = arguments;
			var now = +new Date();
			if (last && now - last < interval) {
				clearTimeout(timer);
				timer = setTimeout(function() {
					last = now;
					fn.apply(th, args);
				}, interval);
			} else {
				last = now;
				fn.apply(th, args);
			}
		}
	}
	export default {
		props: {
			oneline: {
				type: Boolean,
				default: false
			},
			gradient: {
				type: String,
				default: ""
			},
			middleLayout: {
				type: String,
				default: "center"
			},
			adjust: {
				type: Boolean,
				default: false,
			},
			color: {
				type: String,
				default: "#000"
			},
			bg: {
				type: String,
				default: ""
			},
			border: {
				type: Boolean,
				default: true
			},
			leftText: {
				type: String,
				default: ""
			},
			back: {
				type: Boolean,
				default: true
			},
			status: {
				type: Boolean,
				default: true
			},
			statusColor: {
				type: String,
				default: ''
			},
			/**
			 * 是否显示
			 */
			show: {
				type: Boolean,
				default: true
			},
			/**
			 * 是否吸顶
			 */
			fixed: {
				type: Boolean,
				default: false
			},
			/**
			 * 是否强制吸顶
			 */
			forceFixed: {
				type: Boolean,
				default: false
			},
			/**
			 * 非强制吸顶+吸顶：偏移这么多之后吸顶
			 */
			offset: {
				type: Number,
				default: 0
			},
			/**
			 * 强制吸顶+吸顶：渐隐的距离
			 */
			opacityOffset: {
				type: Number,
				default: 400
			},
			/**
			 * 强制吸顶+吸顶+渐隐: 
			 */
			offsetHideOpacity: {
				type: Number,
				default: 0
			},
			/**
			 * 强制吸顶+吸顶：是否渐隐
			 */
			offsetHide: {
				type: Boolean,
				default: false
			},
			/**
			 * 是否需要占位块
			 */
			block: {
				type: Boolean,
				default: true
			},
		},
		beforeDestroy() {
			// #ifdef H5
			window.removeEventListener("scroll", this.scroll)
			// #endif
		},
		created() {
			this.$set(this.$n.data, "navbarTop", this.getNavbarHeight())
			// #ifdef MP
			let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.x_statusHeight = statusBarHeight
			this.x_height = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height;
			this.x_width = menuButtonInfo.width + 10
			// #endif
			// #ifdef APP-PLUS
			let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.x_statusHeight = statusBarHeight
			// #endif
		},
		mounted() {
			let pages = getCurrentPages();
			if (pages.length == 1 && mainPagePath.includes(pages[0].route)) {
				this.firstPage = true;
			}
			// #ifdef H5
			window.addEventListener("scroll", this.scroll, false)
			// #endif
			// #ifndef H5
			if (pages.length) {
				let that = this;
				let onPageScroll = pages[pages.length - 1].onPageScroll;
				pages[pages.length - 1].onPageScroll = function(e) {
					onPageScroll.call(this, e);
					that.$emit('scroll', e);
					that.scroll(e);
				};
			}
			// #endif
		},
		computed: {
			toFixed() {
				return this.fixed && this.x_fixed
			},
			toShow() {
				return this.show && this.x_show
			}
		},
		data() {
			return {
				firstPage: false,
				x_height: 0,
				x_width: 0,
				x_statusHeight: 0,
				x_show: true,
				x_fixed: this.fixed,
				x_opacity: 1,
			};
		},
		methods: {
			statusBarHeight(isPx = false) {
				let height = uni.getSystemInfoSync().statusBarHeight
				return isPx ? height + 'px' : height;
			},
			getNavbarHeight(isPx = false) {
				let height = uni.upx2px(88);
				let statusBarHeight = this.statusBarHeight();
				// #ifdef MP
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				height = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height;
				height = height + statusBarHeight;
				// #endif
				// #ifdef APP-PLUS
				height = height + statusBarHeight;
				// #endif
				return isPx ? height + 'px' : height;
			},
			clickLeft(e) {
				if (this.back) {
					// #ifdef H5
					history.back()
					// #endif
					// #ifndef H5
					uni.navigateBack({
						delta: 1
					})
					// #endif
				}
				this.$emit("clickLeft", e)
			},
			scroll(e) {
				// #ifdef H5
				let scrollTop = document.documentElement.scrollTop
				// #endif
				// #ifndef H5
				let scrollTop = e.scrollTop;
				// #endif
				const navHeight = uni.upx2px(92);
				if (!this.forceFixed) {
					if (this.offset < navHeight) {
						this.x_fixed = true;
					} else {
						if (navHeight <= (scrollTop - this.offset)) {
							this.x_fixed = true;
						} else {
							this.x_fixed = false;

						}
					}
				} else {
					if (this.offsetHide && this.opacityOffset >= uni.upx2px(92) * 2) {
						if (!this.x_show) {
							scrollTop = scrollTop + navHeight + 20;
						}
						let opacity = ~~((this.opacityOffset - scrollTop) / this.opacityOffset * 1000);
						opacity = opacity > 1000 ? 1000 : opacity;
						opacity = opacity < this.offsetHideOpacity ? 0 : opacity;
						this.x_opacity = opacity / 1000;
						if (this.x_opacity <= 0) {
							this.x_show = false
						} else {
							this.x_show = true
						}
					} else {
						this.x_show = true
					}
				}

			},
			// scroll: _throttle(async function(e) {
			// 	// #ifdef H5
			// 	let scrollTop = document.documentElement.scrollTop
			// 	// #endif
			// 	// #ifndef H5
			// 	let scrollTop = e.scrollTop;
			// 	// #endif
			// 	const navHeight = uni.upx2px(92);
			// 	if (!this.forceFixed) {
			// 		if (this.offset < navHeight) {
			// 			this.x_fixed = true;
			// 		} else {
			// 			if (navHeight <= (scrollTop - this.offset)) {
			// 				this.x_fixed = true;
			// 			} else {
			// 				this.x_fixed = false;

			// 			}
			// 		}
			// 	} else {
			// 		if (this.offsetHide && this.opacityOffset >= uni.upx2px(92) * 2) {
			// 			if (!this.x_show) {
			// 				scrollTop = scrollTop + navHeight + 20;
			// 			}
			// 			let opacity = ~~((this.opacityOffset - scrollTop) / this.opacityOffset * 1000);
			// 			opacity = opacity > 1000 ? 1000 : opacity;
			// 			opacity = opacity < this.offsetHideOpacity ? 0 : opacity;
			// 			this.x_opacity = opacity / 1000;
			// 			if (this.x_opacity <= 0) {
			// 				this.x_show = false
			// 			} else {
			// 				this.x_show = true
			// 			}
			// 		} else {
			// 			this.x_show = true
			// 		}
			// 	}
			// }, 0)
		}
	}
</script>

<style lang="scss" scoped>
	$name: niu-navbar;
	$height: 88rpx;

	// @mixin hairline {
	// 	position: relative;

	// 	&::after {
	// 		position: absolute;
	// 		box-sizing: border-box;
	// 		content: " ";
	// 		pointer-events: none;
	// 		top: -50%;
	// 		right: -50%;
	// 		bottom: -50%;
	// 		left: -50%;
	// 		border: 0 solid #ebedf0;
	// 		-webkit-transform: scale(0.5);
	// 		transform: scale(0.5);
	// 		@content
	// 	}
	// }

	// @mixin hairline--bottom {
	// 	@include hairline {
	// 		border-bottom-width: 1px;
	// 	}
	// }

	.niu-navbar {
		position: relative;
		z-index: 99;
		box-sizing: content-box;

		&__status {
			box-sizing: content-box;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: var(--status-bar-height);
			background-color: transparent;
			z-index: 999;
		}

		&__block {
			box-sizing: content-box;
			// position: relative;
			padding-top: var(--status-bar-height);
			height: $height;
			// background-color: red;
			// z-index: 9999999;
		}

		&__wrapper {
			// padding-top: var(--status-bar-height);
			box-sizing: content-box;

			&.fixed {
				box-sizing: content-box;
				position: fixed;
				top: var(--status-bar-height);
				// top: 0;
				left: 0;
				right: 0;
			}

			z-index: 999;
			position: relative;
			background-color: white;
			width: 750rpx;
			height: $height;
			display: flex;
			align-items: center;

			&.border {
				@include hairline--bottom;
			}

			font-size: 29rpx;

			.#{$name}__left {
				box-sizing: content-box;
				padding: 0 20rpx;
				width: 150rpx;
				// position: absolute;
				// left: 0;
				// top: 0;//var(--status-bar-height);
				display: flex;
				align-items: center;
				// cursor: pointer;
				font-size: 28rpx;
				height: $height;

				// line-height: 1.5;
				.#{$name}__icon {
					box-sizing: content-box;
					margin-right: 8rpx;
					vertical-align: middle;
					line-height: 1.5;
					width: 25rpx;
					height: 28rpx;
				}

				.#{$name}__text {
					box-sizing: content-box;
					flex: 1;
					width: 0;
					font-size: 32rpx;
					font-weight: bold;
					line-height: 1.2;
					margin-left: 20rpx;
					vertical-align: middle;
					white-space: nowrap;
				}
			}

			.#{$name}__middle {
				box-sizing: content-box;
				white-space: nowrap;
				text-align: center;
				// position: absolute;
				font-size: 32rpx;
				font-weight: 600;

				display: flex;
				align-items: center;

				&.center {
					justify-content: center;
				}

				&.left {
					justify-content: flex-start;
				}

				// justify-content: center;
				height: $height;
				line-height: $height;
				flex: 1;
				width: 0;
				// right: 90rpx;
				// left: 90rpx;
				// top: 0;//var(--status-bar-height);
			}

			.#{$name}__right {
				box-sizing: content-box;
				width: 100rpx;
				padding: 0 20rpx;
				// position: absolute;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				// right: 0;
				height: $height;
				width: 150rpx;
				// top: 0;//var(--status-bar-height);
				// cursor: pointer;
			}
		}
	}
</style>
