<template>
  <div class="navbar">
    <!-- 侧边栏收缩控制组件 -->
    <hamburger
      :is-active="sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />

    <!-- 面包屑组件 -->
    <breadcrumb class="breadcrumb-container" />

    <!-- 用户信息和退出区域 -->
    <el-row class="right-menu">

      <!-- 用户头像 -->
      <!-- <el-col :span="4">
        <img
          v-if="avatar"
          :src="avatar+'?imageView2/1/w/80/h/80'"
          class="user-avatar"
        >
        <img
          v-else
          :src="avatar2+'?imageView2/1/w/80/h/80'"
          class="user-avatar"
        >
      </el-col> -->

      <!-- 用户名称 -->
      <el-col
        class="user-name"
        :span="12"
      >
        {{name}} 您好，欢迎登陆！
      </el-col>

      <!-- 退出按钮 -->
      <el-col
        class="user-logout"
        :span="8"
        @click.native="logout"
      >
        退出
        <svg-icon
          class="user-logout-icon"
          icon-class="logout"
        />
      </el-col>

    </el-row>
  </div>
</template>

<script>
// 引入仓库getters
import { mapGetters } from "vuex";
// 引入Breadcrumb组件
import Breadcrumb from "@/components/Breadcrumb";
// 引入Hamburger组件
import Hamburger from "@/components/Hamburger";
// 引入图片
import avatar2 from "@/assets/avatar.jpg";

export default {
  // 注册组件
  components: {
    Breadcrumb,
    Hamburger,
  },
  data() {
    return {
      // 使用引入图片avatar2，K V一致省略V
      avatar2,
    };
  },
  // 计算属性
  computed: {
    // 从仓库获取数据
    ...mapGetters(["sidebar", "avatar", "name"]),
  },
  methods: {
    // 侧边栏收缩回调
    toggleSideBar() {
      // 从仓库调用toggleSideBar函数
      this.$store.dispatch("app/toggleSideBar");
    },
    // 退出回调
    logout() {
      // 提醒用户是否确定退出
      this.$confirm("确定退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        roundButton: true,
      })
        .then(async () => {
          // 从仓库调用logout函数
          await this.$store.dispatch("user/logout");
          // 路由跳转登录页
          this.$router.push(`/login?redirect=${this.$route.fullPath}`);
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .right-menu {
    float: right;
    height: 100%;
    width: 400px;
    .user-avatar {
      margin-top: 5px;
      width: 40px;
      height: 40px;
      border-radius: 20px;
    }
    .user-name {
      margin-top: 18px;
    }
    .user-logout {
      cursor: pointer;
      display: flex;
      margin-top: 18px;
      .user-logout-icon {
        margin-top: -2px;
        margin-left: 15px;
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>
