<!-- 最左边的选择框 -->
<template>
	<div class="mycard">
	    <header>
	    	<img :src="user.img" class="avatar">
	    </header>
	    <div class="navbar" @click="clearSearch">
	         <router-link to="/main/chat" class="icon iconfont icon-msg" ></router-link>
	         <router-link to="/main/friend" class="icon iconfont icon-friend"></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>
	    </footer>
	    <div v-if="accountFlag" style="width: 100%;height: 100%;position: fixed;top: 0;right: 0;" @click="accountFlag=!accountFlag"></div>
	    <div class="tool-panel" v-if="accountFlag">
        	<div><span class="sdsd">切换账号</span></div>
        	<div @click="logout"><span class="sdsd">退出登录</span></div>
        </div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
	data(){
		return {
			accountFlag:false
		}
	},
    computed: {
       ...mapState([
       	  'user',
       ])
    },
    methods: {
    	clearSearch() {
    		this.$store.dispatch('search', '')
    	},
    	logout(){
    		this.$confirm('确定要退出ERP系统吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '已退出!'
              });
            }).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
	    .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;
	bottom:-480px;
	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;
</style>
