<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)">
               {{userInfo.username}}
            </a>
            <Dropdown-menu slot="list">
                <Dropdown-item>修改密码</Dropdown-item>
                <Dropdown-item>修改信息</Dropdown-item>
                <Dropdown-item>机构信息</Dropdown-item>
                <Dropdown-item name="loginout">退出登录</Dropdown-item>

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

export default {
  props: {
    userAvatar: {
      type: String,
      default: 'https://file.iviewui.com/dist/a0e88e83800f138b94d2414621bd9704.png'
    }
  },
  data () {
    return {
      userInfo: ''
    }
  },
  mounted () {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo')).content
    // console.log(this.userInfo)
  },
  methods: {
    // ...mapActions([
    //   'handleLogOut'
    // ]),
    loginout () {
      this.$store.dispatch('handleLogOut').then(() => {
        this.$router.push({ path: '/login' })
      })
    },
    // logout () {
    //   this.$Message.error('您已被登出！')
    //   this.handleLogOut().then(() => {
    //     this.$router.push({
    //       name: 'login'
    //     })
    //   })
    // },
    handleClick (name) {
      switch (name) {
        case 'loginout': this.loginout()
          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:6;
    font-size:15px;
    font-family:'Microsoft YaHei';
    font-weight:600;
    color:rgba(255,255,255,1);
    line-height: 50px;
  }
  .right{
    flex:1;
    display: flex;
    height: 50px;
    // 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>
