<!-- 最左边的选择框 -->
<template>
	<div class="mycard">
	    <header>
	    	<img :src="user.img" class="avatar">
	    	<span v-if="user.onLineStatus==10" class="paopao" @click="chageFlag=!chageFlag" style="background:#00dc41"></span>
	    	<span v-if="user.onLineStatus==20" class="paopao" @click="chageFlag=!chageFlag" style="background:#d8bf0c"></span>
	    	<span v-if="user.onLineStatus==30" class="paopao" @click="chageFlag=!chageFlag" style="background:#b70277"></span>
	    	<span v-if="user.onLineStatus==90" class="paopao" @click="chageFlag=!chageFlag" style="background:#737273"></span>
	    </header>

	    <div class="status-panel" style="    position: absolute;z-index: 100;top: 0px;left: -100px;" v-if="chageFlag">
        	<div @click="chengeStatus(10)"><span class="paopaod" style="background:#00dc41"></span><span class="sdsd">在线</span></div>
        	<div @click="chengeStatus(20)"><span class="paopaod" style="background:#d8bf0c"></span><span class="sdsd">休息</span></div>
        	<div @click="chengeStatus(30)"><span class="paopaod" style="background:#b70277"></span><span class="sdsd">忙碌</span></div>
        	<div @click="chengeStatus(90)"><span class="paopaod" style="background:#737273"></span><span class="sdsd">离线</span></div>
        </div>
        <div v-if="chageFlag" style="width: 100%;height: 100%;position: fixed;top: 0;right: 0;" @click="chageFlag=!chageFlag"></div>
	    <div class="navbar" @click="clearSearch">
	    	<span style="color:#00dc41;font-weight: 800;">{{user.customerConversationNum}}</span>
	         <router-link to="/main/chat" class="icon iconfont icon-msg" >
	         	<span class="pipao" v-if="user.noshowMassageTotal!=0">{{user.noshowMassageTotal}}</span>
	         </router-link>

	         <!-- <router-link to="/main/my" class="icon iconfont icon-collection"></router-link> -->
	    </div>
	    <footer>
	        <i class="icon iconfont icon-more" @click="accountFlag=!accountFlag"></i>
	        <div v-if="accountFlag" style="width: 100%;height: 100%;position: fixed; top: 0;right: 0;" @click="accountFlag=!accountFlag"></div>
	    <div class="tool-panel" style="position:relative;" v-if="accountFlag">
        	<div @click="logout"><span class="sdsd">切换账号</span></div>
        	<div @click="logout"><span class="sdsd">退出登录</span></div>
        </div>
	    </footer>
	    
	</div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
	data(){
		return {
			accountFlag:false,
			chageFlag:false
		}
	},
    computed: {
       ...mapState([
       	  'user',
       ]),
       ...mapGetters([
            'selectId',
        ])
    },
    methods: {
    	...mapActions('user',[
             'changeCustomerStatus',
    	]),	
    	chengeStatus(statusCode){
    		this.changeCustomerStatus(statusCode).then((data)=>{
    			this.chageFlag = false
    		})
    	},
    	clearSearch() {
    		this.$store.dispatch('user/search', '')
    	},
    	logout(){
    		this.$confirm('确定要此操作吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '已退出!'
              });
              window.location.href="/"
            }).catch(() => {
              // this.$message({
              //   type: 'info',
              //   message: '已取消删'
              // });          
            });
    	}
    }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/fonts/iconfont.css'
.mycard
    position: relative
    width: 100%
    height: 100%
    .avatar
	    width: 36px
	    height: 36px
	    margin: 20px 12px 0 12px
	    border-radius: 2px
    .navbar
        width: 100%
        text-align: center
        padding-top:30px;
	    .icon
	        display: inline-block
	        font-size: 26px
	        margin-top: 28px
	        padding: 0 16px
	        box-sizing: border-box
	        color: rgb(173,174,175)
	        opacity: 0.8
	        cursor: pointer
	        &.active
	            color: rgb(0,220,65)
	        &:hover
	            opacity: 1;
	    .icon-msg,.icon-more
	        font-size: 22px
	    .icon-msg
	        padding: 0 19px
	footer
	    position: absolute
	    bottom: 20px
	    width: 100%
	    text-align: center
.sdsd:hover{
	color:#409EFF
}    
.tool-panel
	position:relative;
	height:80px;
	width:120px;
	right:-60px;
	border-radius:5px;
	padding-top:10px;
	background: #000000; 
	div
		bottom:-550px;
		font-size:13px;
		text-align:center;
		height:30px;
		line-height:30px;
		cursor: pointer;
		color:#fff;
.pipao{
	position: relative;
    background:red;
    border-radius: 25px;
    font-size: 11px;
    padding: 3px 6px;
    top: -15px;
    left: -10px;
    color:#fff;
    line-height:30px;
}
.paopao{
	height: 12px;
    width: 12px;
    border-radius: 20px;
    display: block;
    position: relative;
    left: 36px;
    top: -10px;

}
.paopaod{
	height: 12px;
    width: 12px;
    border-radius: 20px;
    display: block;
    position: relative;
    left: 23px;
    top: 20px;

}
.status-panel
	position:relative;
	bottom:-600px;
	height:150px;
	width:100px;
	right:-60px;
	border-radius:5px;
	padding-top:10px;
	background: #000000; 
	div
		bottom:-550px;
		font-size:13px;
		text-align:center;
		height:30px;
		line-height:30px;
		cursor: pointer;
		color:#fff;

</style>
