<template>
	<view class="search">
		<input
			class="searchInput" 
			type="text" 
			name="" 
			id="" 
			v-model="localQuery" 
		   @confirm="searchBtn()"
		   @input="handleInput"
		/>
		<text class="iconfont icon-sousuo" @click="searchBtn()"></text>
		<!-- <text class="iconfont icon-xiaoxi"></text>
		<text class="system_msg" @click="jumpToSystemMsg()">{{messageUnreadCount}}</text> -->
	</view>
</template>

<script>
	import api from "../../api/api";
	import common from '../../common/common';
	export default{
		props:['isSearch','userId', 'initialQuery'],
		data(){
			return {
				messageUnreadCount:null,
				queryName:null,
				localQuery: this.initialQuery || '',
			}
		},
		name:'search',
		components:{},
		watch: {
		  initialQuery: {
		    immediate: true, // 立即触发
		    handler(newVal) {
		      this.localQuery = newVal || ''; // 处理 null/undefined
		    }
		  }
		},
		
		methods:{
			// 新增方法：允许父组件重置搜索词
			    resetSearch() {
			      this.localQuery = '';
			    },
			 handleInput(e) {
			      this.localQuery = e.detail.value;
			    },
			jumpToSystemMsg(){
				if(this.userId){
					uni.navigateTo({
						url:'../systemMsg/system_msg'
					})
				}
			},
			querySystemMessage(){
				if(this.userId){
					api.querySystemMessage({systemType:1,userId:this.userId}).then((res)=>{
						if(res['success']){
							this.messageUnreadCount = res['data']['unReadcount'];
							if(Number(this.messageUnreadCount) > 99){
								this.messageUnreadCount = '99+';
							}
						}else{
							this.messageUnreadCount = null;
						}
					})
				}else{
					this.messageUnreadCount = 0;
				}
			},
			searchBtn(){
				if(this.isSearch == 1){
					//掉查询
					// this.$emit("send",this.queryName)
					 this.$emit("send", this.localQuery);
				}else {
					this.$emit("update:initialQuery", this.localQuery); // 新增
					uni.setStorageSync('queryName', this.localQuery);
					uni.switchTab({
					  url: '/pages/courselist/courselist'
					});
			  }
			  
			  
			  // else{
			  // 					//有参数就掉查询否则直接跳转到课程列表页
			  // 					if(this.queryName){
			  // 						 uni.setStorageSync('queryName', this.localQuery);
			  // 						// uni.setStorageSync('queryName',this.queryName)
			  // 					}
			  // 					uni.switchTab({
			  // 						url:'/pages/courselist/courselist'
			  // 					})
			  // 				}
			  
			  
			  
			  
			}
		},
		mounted() {
			// this.querySystemMessage();
		}
	}
</script>

<style lang="scss">
	.search{
		display: flex;
		margin: 30rpx auto;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient(to right,#E6F5FC,#FDE9F2);
		border-radius: 60rpx;
		.searchInput{
			margin-right: 20rpx;
			width: 85%;
			padding: 15rpx;
		}
		.icon-sousuo{
			font-size: 50rpx;
			margin-right: 10rpx;
			opacity: .7;
		}
		.icon-xiaoxi{
			font-size: 50rpx;
		}
		.system_msg{
			position: absolute;
			color: #fff;
			background: #fb4e40;
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 50%;
			text-align: center;
			font-size: 16rpx;
			right: -20rpx;
			top: -5rpx;
		}
	}
</style>