<template>
  <div>
    <!-- 导航栏容器 -->
    <nav class="site-navbar">
      <!-- 左侧区域 -->
      <div
        class="site-navbar-header"
        :style="{ 'margin-right': sidebarFold ? 0 : '20px' }"
      >
      <!-- Logo 或标题 -->
      <!--
      <img
        class="menu-image-logo"
        :src="configuration.bsTopBarIcon"
        alt="logo"
      >
      -->
      <!-- 标题文本，根据侧边栏折叠状态显示不同内容 -->
      <span
        v-if="!sidebarFold"
      class="site-navbar-lg"
      >
      mall4j建站后台
      </span>
      <span
        v-else
      class="site-navbar-mini"
      :style="fontCloseSize"
      >
      mall4j
      </span>
  </div>

  <!-- 右侧数据区域 -->
  <div class="site-navbar-content">
    <!-- 左侧操作项 -->
    <div class="navbar-content-left">
      <!-- 折叠/展开侧边栏按钮 -->
      <svg-icon
        class="left-item"
        icon-class="icon-zhedie"
      @click="setSidebarFold"
      />
    </div>

    <!-- 右侧用户操作项 -->
    <div class="navbar-content-right">
      <!-- 用户下拉菜单 -->
      <el-dropdown
        class="content-right-item"
        :show-timeout="0"
      placement="bottom"
      >
      <span class="el-dropdown-link">{{ userName }}</span> <!-- 显示当前用户名 -->
      <!-- 下拉菜单内容 -->
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="updatePasswordHandle"> <!-- 修改密码选项 -->
            修改密码
          </el-dropdown-item>
          <el-dropdown-item @click="logoutHandle">       <!-- 退出登录选项 -->
            退出
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
      </el-dropdown>
    </div>
  </div>

  <!-- 修改密码弹窗 -->
  <UpdatePassword
    v-if="updatePassowrdVisible"
  ref="updatePassowrdRef"
  />
  </nav>
  </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'                  // 导入 Element Plus 的消息框组件
import UpdatePassword from './main-navbar-update-password.vue'// 导入修改密码组件

import { computed, reactive, ref, nextTick } from 'vue'      // 从 Vue 导入组合式 API 函数
import { useRoute, useRouter } from 'vue-router'             // 从 vue-router 导入路由相关函数
import { useUserStore, useCommonStore } from '@/store'       // 从 Vuex store 模块中导入用户和通用状态管理
import http from '@/utils/http'                              // 导入 HTTP 请求工具
import { clearLoginInfo } from '@/utils/auth'                // 导入清除登录信息的工具函数

// 获取当前路由实例
const route = useRoute()

// 获取路由导航器实例
const router = useRouter()

// 获取用户 Store 实例，用于管理用户相关信息
const userStore = useUserStore()

// 计算属性：动态获取用户名
const userName = computed(() => userStore.name)

// 定义一个响应式对象，用于设置关闭按钮的字体大小
const fontCloseSize = reactive({
  fontSize: '16px'
})

// 获取通用 Store 实例，用于管理全局状态
const commonStore = useCommonStore()

// 计算属性：动态获取侧边栏折叠状态
const sidebarFold = computed(() => commonStore.sidebarFold)

// 函数：切换侧边栏折叠状态
const setSidebarFold = () => {
  const len = commonStore.selectMenu.length                   // 获取选中的菜单项数量
  const flag = sessionStorage.getItem('isExpand')             // 获取会话存储中的展开标志
  if ((route.path === '/home' || len === 1) && flag === '0') { // 如果在首页或只有一个菜单项且标志为 '0'
    commonStore.updateSidebarFold(true)                       // 设置侧边栏为展开状态
  } else {
    const foldFlag = sidebarFold.value                        // 获取当前侧边栏折叠状态
    commonStore.updateSidebarFold(!foldFlag)                  // 切换侧边栏折叠状态
  }
}

// 函数：处理退出操作
const logoutHandle = () => {
  // 使用 Element Plus 的消息框确认退出操作
  ElMessageBox.confirm('确定进行[退出]操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 发送 POST 请求执行登出操作
    http({
      url: http.adornUrl('/logOut'),                         // 登出 API 路径
      method: 'post',                                        // 请求方法
      data: http.adornData()                                 // 请求数据
    }).then(() => {
      clearLoginInfo()                                       // 清除登录信息
      router.push({ name: 'login' })                         // 跳转到登录页面
    })
  })
}

// 响应式引用：控制修改密码弹窗的可见性
const updatePassowrdVisible = ref(false)

// 响应式引用：指向修改密码组件的实例
const updatePassowrdRef = ref(null)

/**
 * 函数：处理修改密码操作
 */
const updatePasswordHandle = () => {
  updatePassowrdVisible.value = true                          // 显示修改密码弹窗
  nextTick(() => {
    updatePassowrdRef.value?.init()                           // 在下一个 DOM 更新周期后初始化修改密码组件
  })
}
</script>

<style lang="scss" scoped>
.site-navbar {
  display: flex;                                             // 使用弹性布局以确保子元素在行内排列
  align-items: center;                                       // 垂直居中对齐子元素
  background-color: #ffffff;                                 // 设置背景颜色为白色
  color: #333333;                                            // 设置文本颜色为深灰色
  border-bottom: 1px solid #ebedf0;                          // 添加底部细边框，颜色为浅灰色

  .site-navbar-header {
    display: flex;                                           // 使用弹性布局以确保子元素在行内排列
    align-items: center;                                     // 垂直居中对齐子元素
    margin-left: 20px;                                       // 左侧外边距为 20px
    color: #333;                                             // 设置文本颜色为深灰色
    font-weight: 700;                                        // 设置字体粗细为加粗（700）
    height: 50px;                                            // 固定高度为 50px
    line-height: 50px;                                       // 行高为 50px，使文本垂直居中

    .site-navbar-lg {
      font-size: 16px;                                       // 设置字体大小为 16px
      word-break: break-all;                                 // 允许长单词或 URL 地址换行到下一行
      word-wrap: break-word;                                 // 允许长单词或 URL 地址换行到下一行（旧版浏览器兼容）
    }

    .site-navbar-lg,
    .site-navbar-mini {
      margin: 0 5px;                                         // 左右外边距为 5px
    }
  }

  .site-navbar-content {
    flex: 1;                                                 // 占据剩余空间
    width: 100%;                                             // 宽度占满整个容器
    display: flex;                                           // 使用弹性布局以确保子元素在行内排列
    justify-content: space-between;                          // 子元素之间等间距分布
    padding: 0 20px;                                         // 内边距左右各 20px
    font-size: 18px;                                         // 设置字体大小为 18px
    align-items: center;                                     // 垂直居中对齐子元素

    .navbar-content-left {
      flex: 1;                                               // 占据剩余空间
      .left-item {
        cursor: pointer;                                     // 指针样式，表示该元素可点击
      }
    }

    .navbar-content-right {
      display: flex;                                         // 使用弹性布局以确保子元素在行内排列
    }
  }
}

// 注释掉的部分：
//.menu-image-logo {
//  object-fit: contain;                                      // 确保图片在容器内保持比例缩放
//  height: 18px;                                             // 设置图片高度为 18px
//  width: 59px;                                              // 设置图片宽度为 59px
//  margin-right: 10px;                                       // 右侧外边距为 10px
//}
</style>
