<template>
	<view>
		<!-- 占位高度 -->
		<view v-if="hasPlaceholder" :style="{ height: `${height}px` }"></view>
		<view class="navbar" :style="[centerContentStyle,navbarStyle]">
			<!-- 左边返回键 ,-->
			<view v-if="showBack" @click="goBack" class="back-icon">
				<view class="navbar_tow_one flex-start">
					<text class="textnth-childone">零点八零</text>
					<text class="textnth-childtow">西安市</text>
					<up-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333" size="16"></up-icon>
				</view>
			</view>
			<!-- 中间内容 -->
			<view class="center-content">
				<view v-if="showSearch">
					<view class="navbar_tow_tow flex-start">
						<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
						<view class="navbar_tow_towview">搜索</view>
					</view>
				</view>
				<view v-else>{{ title }}</view>
			</view>
			<!-- 右边文字 -->
			<view v-if="rightText" class="right-text" @click="onRightTextClick">{{ rightText }}</view>
			<view v-else></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted,
		computed,
		toRefs
	} from 'vue';
	import {
		useNavbarStore
	} from '@/stores/navbarStore';
	const store = useNavbarStore();
	const {
		showBack,
		rightText,
		showSearch,
		title,
		isTransparent,
		height,
		hasPlaceholder,
		scrollTop
	} = toRefs(store);

	const keyword = ref()

	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	const onRightTextClick = () => {
		console.log('右边文字被点击');
	};
	const navbarStyle = computed(() => {
		return {
			// height: `${height.value}px`,
			backgroundColor: scrollTop.value >= 44 ? '#F9F9F9' : 'transparent'
		};
	});
	// 小程序单独胶囊的样式
	const centerContentStyle = ref({});
	onMounted(() => {
		// #ifdef MP-WEIXIN || MP-ALIPAY
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		const systemInfo = uni.getSystemInfoSync();
		const statusBarHeight = systemInfo.statusBarHeight;
		// 计算标题的垂直偏移量
		const verticalOffset = menuButtonInfo.top;
		// const verticalOffset = menuButtonInfo.top - statusBarHeight;
		// const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
		// 	menuButtonInfo.top - menuButtonInfo.height)
		const titleHeight = menuButtonInfo.height;
		centerContentStyle.value = {
			paddingTop: `${verticalOffset}px`,
			paddingRight: `${menuButtonInfo.width +20}px`,
			// height: `${height.value}px`,
			// lineHeight: `${height.value}px`,
			boxSizing: 'border-box',
		};
		// #endif

	});
</script>

<style lang="scss" scoped>
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 6px;
		z-index: 999;

		.back-icon {
			cursor: pointer;

			.navbar_tow_one {
				height: 100%;
				line-height: 100%;

				.textnth-childone {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.textnth-childtow {
					margin-left: 16rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}

		.center-content {
			flex: 1;
			text-align: center;

			.navbar_tow_tow {
				position: relative;
				height: 100%;
				line-height: 100%;
				flex: 1;
				margin-left: 10rpx;

				.navbar_tow_towview {
					position: absolute;
					right: 4rpx;
					top: 50%;
					transform: translate(0, -50%);
					text-align: center;
					background: #FEE06A;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					width: 116rpx;
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 34rpx 34rpx 34rpx 34rpx;
				}

				.navbar_tow_towinput {
					padding-left: 32rpx;
					padding: 12rpx 120rpx 12rpx 8rpx;
					height: 100%;
					flex: auto;
					background: #FFFFFF;
					border-radius: 34rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行
				}
			}
		}

		.right-text {
			cursor: pointer;
		}
	}
</style>