<template>
	<view class="search">
		<input class="searchInput" type="text" name="" id="" v-model="queryName" @confirm="searchBtn()"/>
		<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'],
		data(){
			return {
				messageUnreadCount:null,
				queryName:null
			}
		},
		name:'search',
		components:{},
		onLoad(options){
			this.queryName = options.queryName;
			console.log(this.queryName)
		},
		methods:{
			jumpToSystemMsg(){
				uni.navigateTo({
					url:'../systemMsg/system_msg'
				})
			},
			querySystemMessage(){
				api.querySystemMessage({systemType:1,userId:uni.getStorageSync('cffp_userId')}).then((res)=>{
					if(res['success']){
					        this.messageUnreadCount = res['data']['unReadcount'];
					        if(Number(this.messageUnreadCount) > 99){
					          this.messageUnreadCount = '99+';
					        }
					      }else{
					        this.messageUnreadCount = null;
					      }
				})
			},
			searchBtn(){
				if(this.isSearch == 1){
					//掉查询
					this.$emit("send",this.queryName)
				}else{
					//有参数就掉查询否则直接跳转到课程列表页
					if(this.queryName){
						// this.$emit("send",this.queryName)
						uni.navigateTo({
							url:`/pages/courselist/courselist?queryName=${this.queryName}`
						})
					}else{
						uni.navigateTo({
							url:'/pages/courselist/courselist'
						})
					}
				}
				
			}
		},
		mounted() {
			this.querySystemMessage();
		}
	}
</script>

<style lang="scss">
	.search{
		position: relative;
		display: flex;
		margin: 30rpx auto;
		align-items: center;
		.searchInput{
			margin-right: 20rpx;
			width: 95%;
			border-radius: 60rpx;
			background: linear-gradient(to right,#E6F5FC,#FDE9F2);
			padding: 15rpx;
		}
		.icon-sousuo{
			font-size: 60rpx;
			position: absolute;
			right: 80rpx;
			top: 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>