<script setup>
import Logo from '../Logo/index.vue'
import { useSettingStore } from '@/store/settings.js'
import { usePermissionStore } from '@/store/permission.js'
import sideBarItem from './sideBarItem.vue'
import { watchEffect } from 'vue'

const route = useRoute()
const router = useRouter()

const { collapse } = storeToRefs(useSettingStore())

const sidebarRouters = computed(() => usePermissionStore().sidebarRouters)

const theme = computed(() => useSettingStore().theme)

const activeMenu = computed(() => {
    const { meta, path } = route
    if (meta.activeMenu) {
        return meta.activeMenu
    }
    let dealPath = decodeURIComponent(path)
    if (dealPath.startsWith('/workflow')) {
        dealPath = '/tjmchild' + dealPath
        return dealPath
    }
    return path
})
</script>

<template>
    <div class="tjm_sidebar_container">
        <div class="logo-container">  
            <Logo />
        </div>
        <el-scrollbar  class="sidebar-scrollbar">
            <el-menu
                :default-active="activeMenu"
                background-color="#283a5e"
                text-color="#fff"
                :unique-opened="true"
                :active-text-color="theme"
                :collapse-transition="false"
                mode="horizontal"
                :ellipsis='false'
            >
                <sideBarItem
                    v-for="(route, index) in sidebarRouters"
                    :key="route.path + index"
                    :item="route"
                />
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<style lang="scss" scoped>
.tjm_sidebar_container {
  display: flex;
  width: 100%;
  height: $base-navbar-height;
  .logo-container {
  }
  .sidebar-scrollbar {
    // width: 400px;
    // border:1px solid red;
  }
  :deep(.el-scrollbar__wrap) {
    .el-menu--horizontal.el-menu {
      border-bottom: none;
    }
  }
}
</style>
