<template>
    <div class="layout">
        <div class="layout-ceiling">
            <div class="layout-left">显现英语</div>
            <div class="layout-ceiling-main">
                <div class="user-nav">
                    <img src="../../../assets/avatar.jpeg" class="user-avatar">
                    <Tooltip placement="bottom" class="qipao">
                        <a href="#">SHAW-小岩</a>
                         <div slot="content">
                            <p>显示多行信息</p>
                            <p><i>可以自定义样式</i></p>
                        </div>
                    </Tooltip> |
                    <a @click="logout">退出</a>
                 </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
    name:"topNative",
    // methods:{
    //     outlogin(){
    //         localStorage.removeItem('token');
    //         this.$router.push({path:"/login"})
    //     }
    // }
    methods: {
    ...mapActions([
      'handleLogOut'
    ]),
    logout () {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: 'login'
        })
      })
    },
    message () {
      this.$router.push({
        name: 'message_page'
      })
    },
    handleClick (name) {
      switch (name) {
        case 'logout': this.logout()
          break
        case 'message': this.message()
          break
      }
    }
  }
}
</script>
<style scoped>
    .layout[data-v-7eb2bc79]{
        border:none;
        border-radius: 0;
    }
    .layout{
        background: #f5f7f9;
        position: relative;
    }
    .layout-ceiling{
        background-image: url("../../../assets/native.png");
        background-size: 211px 100%;
        background-color: #3D8EFE;
        padding: 10px 26px;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    .layout-left{
        float: left;
        font-size: 19px;
        color:#ffffff;
        margin: 4px 222px;
    }
    .layout-ceiling-main{
        float: right;
        color: #ffffff;
    }
    .layout-ceiling-main a{
        color: #ffffff;
        margin:0 10px;
        font-size: 12px;
    }
    .user-avatar{
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }
    .user-nav{
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>