<template>
  <header class="main_header">
    <img class="icon_logo" src="../images/Home/home_logo.png" alt="logo" />
    <div class="user_wrapper">
      <i class="iconfont iconShapecopy1"></i>
      <span class="user-text">UID:{{ getid || "10086" }}</span>
      <ul class="menu_box">
        <li @click="go()">退出</li>
      </ul>
      <i class="iconxiangyousanjiao iconfont"></i>
    </div>
  </header>
</template>

<script lang="ts">
import { GO_URLS } from "@/config/URLS";
import { Component, Vue } from "vue-property-decorator";
@Component
export default class MainHeader extends Vue {
  [x: string]: any;
  get getid() {
    return JSON.parse(String(sessionStorage.getItem("user"))).id;
  }
  public go() {
    sessionStorage.removeItem("user");
    this.$router.push("/");
  }
  // 获取用户基本信息
  async getUserInfos() {
    const res = await this.$ajax({
      type: "get",
      url:
        GO_URLS.user +
        `/` +
        JSON.parse(String(sessionStorage.getItem("user"))).id,
    });
    if (res) {
      this.$store.commit("setuserInfos", res.data);
    }
  }
  public mounted() {
    this.getUserInfos();
  }
}
</script>

<style scoped lang='less'>
// 大盒子
.main_header {
  z-index: 1; /* shadow覆盖底部 */
  position: relative;
  height: 50px;
  padding-right: 35px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 40px 0px rgba(65, 70, 76, 0.07);
}
// logo
.icon_logo {
  margin-left: 27px;
  margin-top: 4px;
  height: 40px;
}

.user_wrapper {
  margin-top: 12px;
  float: right;
  height: 100%;
  color: #353535;
  cursor: pointer;
  .iconShapecopy1 {
    vertical-align: middle;
    margin-right: 6px;
    font-size: 20px;
    color: #d6d8e1;
  }
  .iconxiangyousanjiao {
    color: #b4b4b4;
    transform: rotate(90deg);
    display: inline-block;
    font-size: 12px;
    margin-left: 14px;
  }
}
.user_wrapper .menu_box {
  display: none;
}
.user_wrapper:hover .menu_box {
  display: block;
}

.user-icon {
  /* todo ui切块错误 */
  margin-right: 6px;
  vertical-align: middle;
  height: 20px;
}

.user-text {
  vertical-align: middle;
  color: #b4b4b4;
}

.menu_box {
  position: absolute;
  top: 100%;
  right: 35px;
  margin: 0;
  padding: 0;
  line-height: 41px; /* 非精确ui */
  width: 107px; /* 109 - border */
  list-style: none;
  border: 1px solid #e7e7e7;
  text-align: center;
  color: #797d84;
  background: #fff;
}
.menu_box li {
  transition: 0.5s;
  cursor: pointer;
  background: white;
}
.menu_box li:hover {
  background: #f5f5f5;
}
</style>
