<template>
  <div id="header">
    <div class="inner">
      <div class="header-left">
        <router-link class="link" to="/">首页</router-link>
      </div>
      <div class="header-right">
        <ul>
          <!-- <li><a class="link" href="#">消息</a></li>
          <li><span>|</span></li> -->
          <!-- <li><a class="link" href="#">收藏夹</a></li>
          <li><span>|</span></li> -->
          <li v-if="$store.state.vuex_name" class="user">
            <a class="link" href="#">
              {{ $store.state.vuex_name
              }}<i class="name-icon el-icon-caret-bottom"></i>
            </a>
            <div class="logout" @click="logout">退出登录</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: {
    msg: String,
  },
  created() {
    // console.log("vuex_user", this.$store.state.vuex_name);
  },
  methods: {
    logout() {
      this.$mc.vuex("vuex_token", "");
      this.$router.push("/login");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#header {
  background-color: #3d5d4c;
  .inner {
    // width: 1200px;
    padding-left: 57px;
    padding-right: 47px;
    height: 66px;
    line-height: 66px;
    margin: 0 auto;
    font-size: 14px;
    cursor: default;
    .link {
      color: #fff;
      .name-icon {
        margin-left: 14px;
      }
    }
    .header-left {
      float: left;
    }
    .header-right {
      float: right;
      ul {
        float: left;
        li {
          position: relative;
          float: left;
          span {
            padding: 0 10px;
            color: #fff;
            opacity: 0.4;
          }
          &.user:hover {
            .logout {
              display: block;
            }
          }
          .logout {
            display: none;
            position: absolute;
            bottom: -34px;
            z-index: 99;
            background: #fff;
            line-height: 1;
            right: 0;
            padding: 10px 30px;
            box-sizing: border-box;
            border-radius: 5px;
            min-width: 120px;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
