<template>
  <div class="system-header">
    <div
      class="navigation-bar"
      :style="{ background: variables.navBackground }"
    >
      <div class="left-menu">
        <img class="system-logo" src="@/assets/images/logo.png" />
        <div class="system-title">{{ systemTitle }}</div>
        <div class="sysyem-menu">
          <menu-main></menu-main>
        </div>
      </div>
      <div class="right-menu">
        <el-dropdown
          class="avatar-container right-menu-item hover-effect"
          trigger="click"
        >
          <div class="avatar-wrapper">
            <img :src="avatar" class="user-avatar" />
            <div class="user-name">{{ name }}</div>
            <i class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/user/profile">
              <el-dropdown-item>个人中心</el-dropdown-item>
            </router-link>

            <el-dropdown-item divided @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="crumbs-box">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb";
import { mapGetters } from "vuex";
import variables from "@/assets/styles/variables.scss";
import MenuMain from "./components/MenuMain";
export default {
  components: {
    Breadcrumb,
    MenuMain,
  },
  data() {
    return {
      systemTitle: process.env.VUE_APP_TITLE,
      username: ""
    };
  },
  computed: {
    ...mapGetters(["avatar", "name", "sidebarRouters"]),
    variables() {
      return variables;
    },
  },
  mounted(){
    this.username = this.$store.state.user.nickName
  },
  methods: {
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            // location.href = "/index";
            this.$router.replace("/login");
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.system-header {
  width: 100%;
  color: #fff;

  .navigation-bar {
    padding: 0 15px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    .left-menu {
      display: flex;
      align-items: center;
      .system-logo {
        height: 48px;
        margin-right: 10px;
      }
      .system-title {
        margin-right: 30px;
        cursor: pointer;
        font-size: 22px;
      }
      .sysyem-menu {
      }
    }
    .right-menu {
      .avatar-wrapper {
        display: flex;
        align-items: center;
        color: #fff;
        cursor: pointer;
        .user-avatar {
          height: 40px;
          width: 40px;
          border-radius: 20px;
        }
        .user-name {
          padding: 0 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 16px;
        }
      }
    }
  }
  .crumbs-box {
    padding: 0 15px;
    height: 34px;
    border-bottom: 2px solid #d1d9e6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
