<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','userId'],
		data(){
			return {
				messageUnreadCount:null,
				queryName:null
			}
		},
		name:'search',
		components:{},
		onLoad(options){
			this.queryName = options.queryName;
		},
		methods:{
			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)
				}else{
					//有参数就掉查询否则直接跳转到课程列表页
					if(this.queryName){
						uni.setStorageSync('queryName',this.queryName)
					}
					uni.switchTab({
						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>