<template>
  <div class="header-container">
    <div class="logo">{{title}}</div>
    <div class="user-info">
      <p class="flex name">
        <Icon :name="'ssicb'" :size="24" />
        {{ userInfo.name }}
      </p>
      <a-dropdown
        class="flex avator"
        :getPopupContainer="getPopupContainer"
        placement="bottomRight"
      >
        <div @click="(e) => e.preventDefault()">
          <img v-if="userInfo.avator" :src="userInfo.avator" alt="avator" />
          <Icon v-else :name="'ssiuser'" :size="24" />
        </div>
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="loginOut"> 退出登录 </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { title } from "@/settings";
export default {
  data() {
    return {
      title,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
    }),
  },
  methods: {
    getPopupContainer() {
      return document.querySelector(".avator");
    },
    loginOut() {
      this.$apis.LOGINOUT().then((res) => {
        if (res.returnCode) {
          this.$store.commit("common/setMenuStack", []);
          this.$router.push("/login");
        } else {
          this.$message.error(res.returnMsg || "退出失败");
        }
      });
    },
  },
};
</script>

<style lang="less">
.flex{
  display: flex;
  align-items: center;
}
.header-container {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #252631;
  background-color: #fff;
  border-bottom: 1px solid #eef1f3;
  z-index: 1;
  .logo {
    .w(242);
    .fs(18);
    .pa(20, 44, 20, 44);
    .lh(25);
    font-weight: bold;
    border-right: 2px solid #eef1f3;
  }
  .user-info {
    .fs(14);
    .lh(20);
    display: flex;
    align-items: center;
    color: #778ca2;
    .name .icon-class {
      .mg-r(12);
    }
    .avator {
      .w-n(32);
      .h-n(32);
      .mg-f(0, 24, 0, 24);
      border-radius: 50%;
      img {
        width: 100%;
      }
    }
  }
}
</style>