<template>
  <div :class="{ 'has-logo': showLogo }"
       :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
    <logo v-if="showLogo" :collapse="isCollapse"/>
    <el-row class="headBar">
      <el-col :span="8">
        <div class="line-left-img">
          <img src="@/assets/images/top.png" alt=""/>
        </div>
        <div class="line-left-name">
          <span>上海水务海洋数字孪生模型平台</span>
        </div>
      </el-col>
      <el-col :span="16">
        <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
          <el-menu
              :default-active="activeMenu"
              :collapse="isCollapse"
              :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
              :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
              :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>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'

const route = useRoute();
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()

const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !appStore.sidebar.opened);

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>
.headBar {
  height: 60px;
  line-height: 60px;
  background-image: url('../../../assets/images/title-background.png') !important;

  .line-left-img {
    float: left;

    img {
      width: 60px;
      height: 60px;
      margin-left: 10px;
    }
  }

  .line-left-name {
    float: left;

    span {
      font-size: 35px;
      font-weight: bold;
      color: #f5f6f8;
      height: 60px;
      line-height: 60px;
      letter-spacing: 3px;
    }
  }
}

.el-menu {
  background-color: transparent !important; /* 使用 !important 确保优先级 */
  font-size: 20px !important;
}
</style>

