<template>
  <!-- el-menu 组件用于创建一个菜单，这里设置了类名为 "navbar"，模式为水平方向（horizontal），通常用于页面顶部的导航栏布局 -->
  <el-menu class="navbar" mode="horizontal">
    <!-- Hamburger 组件，用于实现类似汉堡包样式的图标按钮，点击可切换侧边栏状态。通过绑定 :toggleClick 事件来触发切换侧边栏的方法，:isActive 根据侧边栏的打开状态来显示相应的样式 -->
    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
    <!-- 引入 Breadcrumb 组件，可能用于展示页面的面包屑导航，显示当前页面在整个网站结构中的层级路径，但此处没有传入具体属性 -->
    <breadcrumb></breadcrumb>
    <!-- el-dropdown 组件用于创建一个下拉菜单，触发方式设置为点击（click），这里用于展示用户相关操作的下拉菜单，比如首页、退出等功能 -->
    <el-dropdown class="avatar-container" trigger="click">
      <!-- 内部的 div 作为一个容器，包裹用户头像和下拉箭头图标 -->
      <div class="avatar-wrapper">
        <!-- 通过绑定 :src 属性展示用户头像图片，图片的源地址由变量 "avatar" 决定 -->
        <img class="user-avatar" :src="avatar">
        <!-- 使用一个向下的图标（el-icon-caret-bottom）作为下拉菜单的指示箭头 -->
        <i class="el-icon-caret-bottom"></i>
      </div>
      <!-- el-dropdown-menu 组件用于定义下拉菜单的具体内容，通过 slot="dropdown" 指定它在 el-dropdown 组件中的插槽位置 -->
      <el-dropdown-menu class="user-dropdown" slot="dropdown">
        <!-- router-link 组件用于创建路由链接，点击可跳转到对应的路由路径（这里是首页，路径为 "/"），样式设置为行内块元素 -->
        <router-link class="inlineBlock" to="/">
          <el-dropdown-item>
            首页
          </el-dropdown-item>
        </router-link>
        <!-- 另一个 el-dropdown-item 用于展示 "退出" 操作，添加了分割线样式（divided），通过点击内部的 span 元素触发 logout 方法来执行退出登录操作 -->
        <el-dropdown-item divided>
          <span @click="logout" style="display:block;">退出</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-menu>
</template>
<script>
// 从 vuex 中导入 mapGetters 辅助函数，它用于将 Vuex store 中的 getter 映射到组件的计算属性中
import { mapGetters } from 'vuex'
// 导入自定义的 Breadcrumb 组件，用于页面面包屑导航展示
import Breadcrumb from '@/components/Breadcrumb'
// 导入自定义的 Hamburger 组件，用于控制侧边栏的显示隐藏切换按钮
import Hamburger from '@/components/Hamburger'

export default {
  // 在组件中注册使用的子组件，这里注册了 Breadcrumb 和 Hamburger 组件，以便在模板中可以直接使用它们
  components: {
    Breadcrumb,
    Hamburger
  },
  computed: {
    // 使用 mapGetters 辅助函数将 Vuex store 中的'sidebar' 和 'avatar' 这两个 getter 映射到组件的计算属性中。
    // 这样，在组件中就可以直接通过 this.sidebar 和 this.avatar 来访问对应的 store 中的数据了。
    ...mapGetters([
      'sidebar',
      'avatar'
    ])
  },
  methods: {
    // 定义一个名为 toggleSideBar 的方法，用于触发 Vuex store 中的 ToggleSideBar 这个 action。
    // 通常这个 action 会在 Vuex 的相关模块中定义，用于切换侧边栏的打开或关闭状态。
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    },
    // 定义 logout 方法，用于执行用户退出登录操作。
    // 首先通过 this.$store.dispatch 触发 Vuex store 中的 LogOut 这个 action，一般 LogOut action 会处理诸如清除用户登录状态、清除相关缓存等逻辑。
    // 然后在 Promise 成功回调中（.then 部分），调用 location.reload() 方法来重新加载页面，目的是重新实例化 vue-router 对象，避免一些可能出现的路由相关的 bug。
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 为类名为 "navbar" 的元素设置样式，以下是具体的样式属性说明 */
.navbar {
  /* 设置元素的高度为 50px */
  height: 50px;
  /* 设置行高为 50px，使得内部文本在垂直方向上居中对齐 */
  line-height: 50px;
  /* 覆盖默认的边框圆角设置，将其设置为 0px，使其呈现直角样式 */
  border-radius: 0px!important;
  /* 为类名为 "hamburger-container" 的子元素设置样式，它属于 "navbar" 元素内部的元素 */
  .hamburger-container {
    /* 设置行高为 58px，用于垂直方向上的布局调整 */
    line-height: 58px;
    /* 设置高度与父元素（navbar）保持一致，为 50px */
    height: 50px;
    /* 将元素向左浮动，使其在水平方向上靠左排列 */
    float: left;
    /* 设置左右内边距为 10px，用于控制内部元素与边界的间距 */
    padding: 0 10px;
  }
  /* 为类名为 "screenfull" 的元素设置样式，它在 "navbar" 元素内部（从样式结构看应该是与全屏相关的功能元素，但代码中未体现其完整使用场景） */
  .screenfull {
    /* 设置元素的定位为绝对定位，以便可以精确控制其在父元素中的位置 */
    position: absolute;
    /* 设置元素距离父元素右侧 90px 的位置 */
    right: 90px;
    /* 设置元素距离父元素顶部 16px 的位置 */
    top: 16px;
    /* 设置元素的颜色为红色，可能用于特定的提示等功能 */
    color: red;
  }
  /* 为类名为 "avatar-container" 的元素设置样式，它同样是 "navbar" 元素内部用于包裹用户头像及下拉菜单相关内容的容器 */
  .avatar-container {
    /* 设置高度与父元素（navbar）一致，为 50px */
    height: 50px;
    /* 将元素设置为行内块级元素，使其可以在水平方向上与其他元素并排显示，同时又能设置宽度、高度等块级元素的属性 */
    display: inline-block;
    /* 将元素定位在父元素（navbar）的右侧，距离右侧 35px 的位置 */
    position: absolute;
    right: 35px;
    /* 为类名为 "avatar-wrapper" 的子元素设置样式，它是 "avatar-container" 内部进一步包裹头像和图标的容器 */
    .avatar-wrapper {
      /* 设置鼠标指针样式为手型，提示用户此处可点击操作（一般用于有交互功能的元素） */
      cursor: pointer;
      /* 设置元素距离顶部 5px 的外边距，用于垂直方向上的位置微调 */
      margin-top: 5px;
      /* 设置元素为相对定位，以便内部的绝对定位元素可以基于它来进行定位 */
      position: relative;
      /* 为类名为 "user-avatar" 的子元素（即用户头像图片元素）设置样式 */
      .user-avatar {
        /* 设置图片的宽度为 40px */
        width: 40px;
        /* 设置图片的高度为 40px */
        height: 40px;
        /* 设置图片的边框圆角为 10px，使其呈现圆角矩形的外观 */
        border-radius: 10px;
      }
      /* 为类名为 "el-icon-caret-bottom" 的子元素（即下拉箭头图标元素）设置样式 */
      .el-icon-caret-bottom {
        /* 设置元素为绝对定位，以便精确控制其在父元素（avatar-wrapper）中的位置 */
        position: absolute;
        /* 设置元素距离父元素右侧 -20px 的位置（负数表示向左偏移） */
        right: -20px;
        /* 设置元素距离父元素顶部 25px 的位置，用于垂直方向上的定位 */
        top: 25px;
        /* 设置图标的字体大小为 12px，调整图标大小 */
        font-size: 12px;
      }
    }
  }
}
</style>
