<template>
<div class="flex">
  <div class="logo">YOS后端管理平台</div>
  <div class="right-operation">
    <el-dropdown>
      <span class="el-dropdown-link">
        <div class="flex">
          <img height="30" src="../../../assets/avatar.png" alt="">&emsp;{{accountInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i>
        </div>
      </span>
      <el-dropdown-menu slot="dropdown">
        <!-- <el-dropdown-item>个人中心</el-dropdown-item> -->
        <el-dropdown-item>切换账号</el-dropdown-item>
        <el-dropdown-item divided @click.native="loginOut()">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex:'',
      accountInfo:{}
    }
  },
  methods:{
    handleSelect () {},
    loginOut () {
      this.$confirm('是否要退出当前账号?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push('/')
        sessionStorage.clear()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
      
    },
    changeAccount () {
      this.$router.push('/accounts')
    }
  },
  mounted () {
    this.accountInfo = JSON.parse(sessionStorage.getItem('active_account'))
  },
}

</script>
<style>
</style>
<style scoped>
.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo{
  width: calc(200px);
  height: 60px;
  line-height: 60px;
  text-align: center;
  /* border-right: 1px solid #f1f2f3; */
}
.right-operation{
  padding: 0 20px;
}
</style>