<template>
  <div class="header">
    <img @click="jump(1)" style="width: 2.75rem;cursor: pointer;" src="../../../assets/logo/logo.png" alt="" />
    <div @click="jump(1)" class="logotitle" style="cursor: pointer;">致博后台管理系统</div>
    <div class="menu-box">
      <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
        <el-menu
          :default-active="activeMenu"
          background-color="#2374ee"
          text-color="white"
          :unique-opened="true"
          :active-text-color="theme"
          :collapse-transition="false"
          mode="horizontal"
        >
          <sidebar-item
            v-for="(route, index) in sidebarRouters"
            :key="route.path + index"
            :item="route"
            :base-path="route.path"
          />
        </el-menu>
      </el-scrollbar>
    </div>
    <div class="avatar-container">
      <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="userStore.avatar" class="user-avatar" />
          <el-icon><caret-bottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <router-link to="/user/profile">
              <el-dropdown-item>个人中心</el-dropdown-item>
            </router-link>
            <el-dropdown-item command="setLayout">
              <span>布局设置</span>
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup>
import SidebarItem from './SidebarItem'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
import useUserStore from '@/store/modules/user'

const route = useRoute();
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()


const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);

const activeMenu = computed(() => {
  const { meta, path } = route;
  // if set path, the sidebar will highlight the path you set
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})

</script>

<style scoped>
.menu-box {
  font-size: 1rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  margin-left: auto;
  margin-right: 3.75rem;
  width: calc(100% - 40rem);
  display: flex;
  justify-content: end;
}
.scrollbar-wrapper{
  width: 100%;
}

.logotitle {
  font-size: 2rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  margin-left: 1.25rem;
}

.header {
  width: 100%;
  height: 4.625rem;
  display: flex;
  align-items: center;
  background: #2374ee;
  padding: 0 1.3125rem;
}

.header>div {
  display: flex;
  align-items: center;
}

.bjcolor {
  background: #1887eb !important;
  font-size: 1rem;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  border: 0.0625rem solid #ffffff;
  border-radius: 0.125rem;
  position: relative;
  box-shadow: inset 0 0 0.625rem rgba(255, 255, 255, 0.7);
}
</style>