<template>
  <div class="navbar">
    <div class="navbarInner">
      <!-- 导航左边 -->
      <div class="left">
        <img src="../../../../assets/img/logo.png" alt="">
      </div>
      <!-- 导航中间 -->
      <div class="center">
        显现英语
      </div>
      <!-- 导航右边 -->
      <div class="right">
        <!-- <img src="../../../../assets/img/user.png" alt=""> -->
         <Badge >
        <Avatar :src="userAvatar"/>
      </Badge>
        <div class="drop">
           <Dropdown  @on-click="handleClick">
            <a href="javascript:void(0)">
                SHAW-小岩
            </a>
            <Dropdown-menu slot="list">
                <Dropdown-item>修改密码</Dropdown-item>
                <Dropdown-item>修改信息</Dropdown-item>
                <Dropdown-item>机构信息</Dropdown-item>
                <Dropdown-item name="logout">退出登录</Dropdown-item>

                </Dropdown-menu>
          </Dropdown>
        </div>
        <a href="#"  name="logout">退出</a>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  props: {
    userAvatar: {
      type: String,
      default: ''
    }
  },
  methods: {
    ...mapActions([
      'handleLogOut'
    ]),
    logout () {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: 'login'
        })
      })
    },
    handleClick (name) {
      switch (name) {
        case 'logout': this.logout()
          break
        case 'message': this.message()
          break
      }
    }
  }
}
</script>>
<style lang="less" scoped>
.navbar {
  background: #3d8efe;
  width: 100%;
  height: 50px;
  // padding: 0 20px;
  .navbarInner{
    width: 100%;
    display: flex;
     .left {
    flex:1;
    img{
      width: 200px;
    height: 50px;
    }
  }
  .center{
    flex:5;
    color: white;
    font-size: 16px;
    line-height: 50px;
    margin-left: 20px;
  }
  .right{
    flex:1;
    display: flex;
    // justify-content:center;
    align-items: center;
    img{
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    .drop{
      margin-left:  5px;
      padding-right: 10px;
      border-right: 2px solid white;
      .ivu-dropdown{
        a{
          color: white;
        }
      }
    }
    a{
      color: white;
      margin-left: 10px;
    }
  }
  }
}
</style>
