<template>
	<view>
		<!-- #ifdef H5-->
		<view class="navbar h5">
			<view class="navbar-left" @click="toggleSearchMode">
				<view v-if="!isSearching" class="logo">
					<image src="https://xaznkj.cn/doc/photo/750.png" mode="widthFix" style="width: 260rpx;">
					</image>
				</view>
				<view v-else class="icon"></view>
			</view>
			<view class="navbar-center" v-if="isSearching">
				<input class="search-input" type="text" v-model="searchQuery"
					:placeholder="$tt('product.inputDeviceName')" confirm-type="search" @confirm="sendMessage" />
				<uni-icons v-if="searchQuery" class="icon-right" type="clear" size="22" color="#007aff"
					@click="clearinput()"></uni-icons>
			</view>
			<view class="navbar-right">
				<view v-if="!isSearching" class="icon search-icon" @click="toggleSearchMode"></view>
				<view v-else class="search-btn" @click="sendMessage">{{$tt('common.search')}}</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN-->
		<view class="navbar weixin">
			<view class="navbar-left" @click="toggleSearchMode">
				<view v-if="!isSearching" class="logo">
					<image src="https://xaznkj.cn/doc/photo/750.png" mode="widthFix" style="width: 260rpx;">
					</image>
				</view>
				<view v-else class="icon"></view>
			</view>
			<view class="navbar-center" v-if="isSearching">
				<input class="search-input-weixin" type="text" v-model="searchQuery"
					:placeholder="$tt('product.inputDeviceName')" confirm-type="search" @confirm="sendMessage" />
				<uni-icons v-if="searchQuery" class="icon-right" type="clear" size="22" color="#007aff"
					@click="clearinput()"></uni-icons>
			</view>



			<view class="navbar-right-weixin">
				<view v-if="!isSearching" class="icon search-icon" @click="toggleSearchMode"></view>
				<view v-else class="search-btn" @click="sendMessage">{{$tt('common.search')}}</view>
			</view>

		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="navbar app">
			<view class="navbar-left" @click="toggleSearchMode">
				<view v-if="!isSearching" class="logo">
					<image src="https://xaznkj.cn/doc/photo/750.png" mode="widthFix" style="width: 260rpx;">
					</image>
				</view>
				<view v-else class="icon"></view>
			</view>
			<view class="navbar-center" v-if="isSearching">
				<input class="search-input-weixin" type="text" v-model="searchQuery"
					:placeholder="$tt('product.inputDeviceName')" confirm-type="search" @confirm="sendMessage" />
				<uni-icons v-if="searchQuery" class="icon-right" type="clear" size="22" color="#007aff"
					@click="clearinput()"></uni-icons>
			</view>

			<!-- #ifdef APP-PLUS -->
			<view class="navbar-right">
				<view v-if="!isSearching" class="icon search-icon" @click="toggleSearchMode"></view>
				<view v-else class="search-btn" @click="sendMessage">{{$tt('common.search')}}</view>
			</view>
			<!-- #endif -->

		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		name: "Navbar",
		data() {
			return {
				statusBarHeight: 20, // 默认值，等会会动态获取
				isSearching: false,
				searchQuery: ""
			};
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
		},
		methods: {
			clearinput() {
				this.searchQuery = ''
				this.$emit('messageSent', this.searchQuery); // 发送搜索事件
			},
			toggleSearchMode() {
				this.isSearching = !this.isSearching;
			},
			sendMessage() {
				console.log("搜索内容:", this.searchQuery);
				this.$emit('messageSent', this.searchQuery); // 发送搜索事件
			}
		}
	};
</script>

<style lang="scss" scoped>
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-20%);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes scaleUp {
		from {
			transform: scale(0.9);
		}

		to {
			transform: scale(1);
		}
	}

	@keyframes hoverAnimation {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(1.1);
		}
	}

	.h5 {
		padding: 20rpx 15rpx;
	}

	.weixin {
		padding-left: 15rpx;
		padding-right: 15rpx;
		padding-top: calc(15px + var(--status-bar-height));
		padding-bottom: 30rpx;
	}

	.app {
		padding-left: 15rpx;
		padding-right: 15rpx;
		padding-top: var(--status-bar-height);
		padding-bottom: 30rpx;
	}

	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 60rpx;
		left: 0;
		right: 20rpx;
		z-index: 999;
		animation: fadeIn 0.5s ease;

		.navbar-left {
			flex: 1;
			display: flex;
			align-items: center;

			.logo {
				animation: fadeIn 0.8s ease;
			}

			.icon {
				width: 70rpx;
				height: 70rpx;
				margin-left: 6px;
				background-image: url('https://xaznkj.cn/doc/photo/logo.png');
				background-size: cover;
				filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
				animation: scaleUp 0.5s ease;
				transition: transform 0.2s ease;

				&:hover {
					animation: hoverAnimation 0.3s forwards;
				}
			}
		}

		.navbar-center {
			position: relative;
			flex: 4;
			display: flex;
			justify-content: center;
			align-items: center;
			animation: fadeIn 0.8s ease;

			.search-input {
				padding-left: 2rem;
				margin-left: -26rpx;
				/* 向左移动 input */
				width: 97%;
				padding: 12rpx 20rpx;
				border: 1rpx solid rgba(255, 255, 255, 0.5);
				border-radius: 50rpx;
				background-color: rgba(255, 255, 255, 0.95);
				backdrop-filter: blur(12rpx);
				height: 38rpx;
				color: #535353;
				font-size: 28rpx;
				box-shadow: inset 0 2rpx 12rpx rgba(0, 122, 255, 0.3);
				animation: scaleUp 0.5s ease;
			}

			.icon-right {
				position: absolute;
				top: 50%;
				right: 0.75rem;
				transform: translateY(-50%);
			}

			.search-input-weixin {
				margin-left: -20rpx;
				/* 向左移动 input */
				width: 97%;
				padding: 12rpx;
				border: 1rpx solid rgba(255, 255, 255, 0.5);
				border-radius: 50rpx;
				background-color: rgba(255, 255, 255, 0.95);
				backdrop-filter: blur(12rpx);
				height: 35rpx;
				color: #535353;
				font-size: 28rpx;
				box-shadow: inset 0 2rpx 12rpx rgba(0, 122, 255, 0.3);
				animation: scaleUp 0.5s ease;
			}
		}

		.navbar-right-weixin {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 20rpx;
			/* 使用安全区域避免关闭按钮重叠 */

			.search-icon {
				width: 40rpx;
				height: 40rpx;
				margin-left: 10rpx;
				background-image: url('/static/login/search.png');
				background-size: cover;
				filter: drop-shadow(0 3rpx 6rpx rgba(225, 225, 225, 0.3));
				transition: transform 0.2s ease;

				&:hover {
					animation: hoverAnimation 0.3s forwards;
				}
			}

			.search-btn {
				padding: 10rpx 25rpx;
				background: rgba(255, 255, 255, 0.95);
				color: #0069d9;
				border-radius: 50rpx;
				font-size: 30rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
				backdrop-filter: blur(8rpx);
				transition: transform 0.2s ease;
			}
		}

		.navbar-right {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.search-icon {
				width: 48rpx;
				height: 48rpx;
				background-image: url('/static/login/search.png');
				background-size: cover;
				filter: drop-shadow(0 3rpx 6rpx rgba(225, 225, 225, 0.3));
				transition: transform 0.2s ease;

				&:hover {
					animation: hoverAnimation 0.3s forwards;
				}
			}

			.search-btn {
				padding: 10rpx 25rpx;
				background: rgba(255, 255, 255, 0.95);
				color: $uni-color-primary;
				border-radius: 50rpx;
				font-size: 30rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
				backdrop-filter: blur(8rpx);
				transition: transform 0.2s ease;
			}
		}
	}
</style>