<style>
.msg_tol{position: fixed;bottom:0px;right:80px;width:240px;
min-height:200px;background: #fff;z-index: 100;
border:8px #e8ebf0 solid;border-radius:8px;padding:10px;
transform:translate(0px,100%);transition:all .4s ease-in;}
.msg_tol.show{transform: translate(0px,0%);}
.msg_tol h2{border-bottom:1px #ebebed solid;font-size:14px;
padding:10px 0px;margin:0px;font-weight: normal;margin-bottom:10px;}
.msg_tol h2 b{color: #8db7b5;font-size:18px;padding:0px 3px;}
.header .msg_tol a{display: block;line-height:30px;text-align: center;
border-left: 0px;}
.header .msg_tol a:hover{background:#eaebf0;}
.msg_tol span{cursor: pointer;
	position: absolute;
    top: 5px;
    right: 5px;
    display: block;
    border-radius: 50%;
    width: 30px; 
    height: 30px;
    background: url(/images/remove.png) #e8ebef no-repeat 50% 50%/16px 16px;
}
.tip_icon{    position: relative;   top: -7px;   left: -6px;
animation: tip_icon 0.4s infinite alternate;}
@keyframes tip_icon{
	form{transform: translate(0px,0px);}
	to{transform: translate(0px,5px);}
}

/*10-8*/
.msg_tolb{    width: 350px;
    position: absolute;
    z-index: 10;
    top: 30px;
    display: none;
    background: #fff;
    right: -17px;border:1px #606f7a solid;border-radius:5px;    
    transform:translate(0px,-10%);transition:all .4s ease-in;
    opacity:0;z-index: -1;
}
.msg_tolb.show{
	transform:translate(0px,0%);opacity:1;z-index: 10;
}
.msg_tolb > b {
	width: 12px;
    height: 12px;
    position: absolute;
    background: #fff;
    right: 20px;
    top: -7px;
    transform: rotate(45deg);
    border: 1px #606f7a solid;
    border-right: 1px transparent;
    border-bottom: 1px transparent;
}
.msg_tolb h2{padding:10px;padding-bottom:0px;margin:0px;
font-size:14px;color:#373737;    font-weight: 400;line-height:30px;}
.msg_tolb h2 b{font-size:24px;color:#86b8bc;padding:0px 6px;
font-weight: 400;position: relative;    top: 3px;}
.header .msg_tolb .link2{display: block;margin:10px;padding:4px 0px;
border:0px;border-top:1px #e8ebef solid;margin-bottom: 5px;position: relative;    padding-top: 7px;margin-top: 5px;}
.header .msg_tolb .link2 img{position: absolute;  }
.header .msg_tolb .link2 p{
	    padding: 0px;min-height:18px;
    padding-left: 30px;    line-height: 18px;
    margin: 0px;
    padding-right: 90px;font-size:12px;color:#373737;
}
.header .msg_tolb .link2 span{    position: absolute;
    right: 0px;font-size:12px;color:#aeaeae;    padding-right: 5px;
    top: 6px;}
.header .msg_tolb >span {display: block;padding:10px;text-align: right;
color:#373737;font-size: 12px;cursor: pointer;}
.header .msg_tolb .link1{background:#e8ebef;
height:30px;line-height: 30px;text-align:center;display: block;
border-radius:0px 0px 5px 5px;font-size:12px;color: #373737;}
.msg_tolb a:hover{text-decoration: underline;}
</style>
<template>
<span>
	 
	<li class="w100" style='position:relative;border-right:1px solid #acb4b9;' 
	v-if='type == "hospital" || type == "supplier" || type=="distribution"'>
		<em class="em3-unread ml-20 unread-con animated" v-if='$store.state.contS>0'  v-link="{path:'/siteMessage/',query:{sitetype:this.sitetype,falg:true}}">{{$store.state.contS}}</em>
		<em class="em3 ml-20" v-else></em>
		<a class="ml-10" v-link="{path:'/siteMessage/',query:{sitetype:this.sitetype,falg:true}}">消息</a>
		<div class="msg_tolb" :class="{'show':show}">
			<b></b>
			<h2>您共有<b>{{cont}}</b>条未读信息</h2>

			<a v-link="{path:'/siteMessage/',query:{id:item.id,falg:true}}"
			 class="link2" v-for="item in reads">
				<img src="/images/s1081.jpg">
				<p style='width:320px;'>{{item.messagetitle}}
				</p>
				<span>{{item.create_time}}</span>
			</a>
			<span v-on:click="show=false" class="fr">我知道了</span>
			<div href="javascript:" v-on:click="link(true)" class="link1" style='display:block;cursor:pointer;clear:both;'>
			更多消息>>
			</div>
		</div>
		<!-- <em class="em4" v-if='cont>0'>{{cont}}</em> -->
		<!-- <em class="em4" v-else>{{cont}}</em> -->
	</li>
	<span style="position:relative;"  v-else>
		<a v-link="{path:'/siteMessage/',query:{sitetype:this.sitetype,falg:false}}" class="link-message">
			消息<!-- <span v-text="msg" v-show="msg"></span> -->
			<img src="/images/s9291.png" class="tip_icon" v-show="msg">
		</a>
		<div class="msg_tolb" :class="{'show':show}">
			<b></b>
			<h2>您共有<b>{{ cont}}</b>条未读信息</h2>

			<a v-link="{path:'/siteMessage/',query:{id:item.id,falg:false}}"
			 class="link2" v-for="item in reads">
				<img src="/images/s1081.jpg">
				<p>{{item.messagetitle}}</p>
				<span>{{item.create_time}}</span>
			</a>
			<div>
				<span v-on:click="show=false">我知道了</span>
			</div>
			<a href="javascript:" v-on:click="link(false)" class="link1">
			更多消息>>
			</a>
		</div>
	</span>
</span>

	<!-- <span v-text="msg" v-show="msg"></span> -->
<!-- <span style="position:relative;">

	<a v-link="{path:'/siteMessage/',query:{sitetype:this.sitetype}}" class="link-message" >
		消息
		<img src="/images/s9291.png" class="tip_icon" v-show="msg">
	</a>

	<div class="msg_tolb" :class="{'show':show}">
		<b></b>
		<h2>您共有<b>{{cont}}</b>条未读信息</h2>

		<a v-link="{path:'/siteMessage/',query:{id:item.id}}"
		 class="link2" v-for="item in reads">
			<img src="/images/s1081.jpg">
			<p>{{item.messagetitle}}
			</p>
			<span>{{item.create_time}}</span>
		</a>
		<span v-on:click="show=false">我知道了</span>
		<a href="javascript:" v-on:click="link" class="link1">
		更多消息>>
		</a>
	</div>
</span> -->
	<!-- 10-8这前的版本 -->
	<!-- <div class="msg_tol" :class="{'show':show}">
		<h2>您共有<b>{{cont}}</b>条未读信息</h2>
		<span v-on:click="show=false"></span>
		<a v-for="item in list" 
		v-link="{path:'/siteMessage',query:{type:item.messagetype}}">
			{{item.messagetypename}}({{item.cont}})
		</a>			
	</div> -->

	


</template>

<script>

module.exports={
	data:function(){
		return {
			msg:0,list:[],show:false,cont:0,reads:[],
		}
	},props:{
		sitetype:{
			type:String,
		},
		type:{
			type:String,
		}
	},
	sockets: {
        connect: function(){
        },message:function(res){
        	if(res.value!="" && res.value !="0"){
        		this.msg=res.value;
        		//this.gitgroup();
        	}
        }
    },methods:{
    	link:function(falg){
    		this.show=false;
    		setTimeout(function(){
    			this.$router.go({path: '/siteMessage/',query: {'falg':falg }})
    		}.bind(this),500)    		
    	},
    	gitgroup:function(){

    		//return;
	      Ajax.post('/sitemessage/public_msg_getMsgGroup',
	      	{}).then(function(res){
	          var result=res.data;

	          if(result.data ){
	             this.$set('list',result.data);   
	             var s=0;
	             for(var i=0;i<result.data.length;i++){
	             	s+=result.data[i].cont;
	             } 
	             this.cont=s;
	             if(this.list.length>0){
	             	this.getData();
	             }          
	          }
	      }.bind(this))
		},
		getData:function(casetxt){//请求数据 
			var self=this;
	        Ajax.post('/sitemessage/public_msg_getAll',{
	        	size: 10,page: 1,type:0,isRead:'Y'  
	        }).then(function(res){
	            var result=res.data;
	            // console.log(result.data);
	            if(result.data && result.data.list){
	                self.$set('reads',result.data.list);
	                window.localStorage.setItem('resDate',res.data.senData);
	                
	            }
	            this.$store.state.contS=result.data.total>0?result.data.total:0;
	           	// self.cont=result.data.total>0?result.data.total:0;
	           	
	           	// if(self.cont>0){
	           	// 	self.show=true;
	           	// }
	        }.bind(this))
	    }
    },watch:{
    	'$route.path':function(val){
    		// this.getData();
    		if(val.indexOf('siteMessage')>-1){
    			this.msg=0;
    		}
    	},
    	'$store.state.contS':function(){
    			
				this.cont=this.$store.state.contS;
				if(this.cont==0){
    				this.show=false;
    			}
    	},
    	'usertype':function(){
    	},
    	'sitetype':function(){
    		// console.log(this.sitetype)
    	}
    },ready:function(){
		//原生的链接是ws 而node 的socket.io 不支持ws，而是用http的。
		/*var socket = new WebSocket('ws://localhost:1923'); 
		socket.onopen=function(event){
		}*/
		// this.type=this.sitetype;
		console.log(this.type)
		// this.getData();
	},
}
</script>