<template>
  <div>
    <div class="navbar-help-box">
      <helper />
    </div>
    <div class="navbar-menulist" :style="{backgroundColor: variables.menuBg}">
      <el-menu
        :default-active="activeMenu"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        :ellipsis="false"
        mode="horizontal"
        class="navbar-menu"
      >
        <navbar-item
          v-for="menu in menus"
          :key="menu.menuPath"
          :item="menu"
          :base-path="menu.menuPath"
        />
      </el-menu>
    </div>
  </div>
</template>

<script lang="ts">
import NavbarItem from './NavbarItem.vue'
import Helper from './Helper.vue'
import { usePermissionStore } from '@/portal/store/permission'
import { defineComponent, computed } from 'vue-demi'
import router from 'common/utils/router'
import variables from '@/portal/styles/variables.module.scss'

export default defineComponent({
  name: 'NavbarIndex',
  components: {
    NavbarItem,
    Helper
  },
  setup () {
    const permissionStore = usePermissionStore()
    const menus = computed(() => permissionStore.menus)

    const activeMenu = computed(() => {
      const { meta, path } = router.currentRoute.value

      return meta?.activeMenu ?? path
    })

    return {
      menus,
      activeMenu,
      variables
    }
  }
})
</script>

<style lang="scss">
.navbar-help-box {
  width: 1390px;
  margin: 0 auto;
}
.navbar-menu {
  display: flex;
  width: 1390px;
  margin: 0 auto!important;
  //justify-content: center;
  .el-menu-item,
  .el-sub-menu__title {
    height: 60px;
    line-height: 60px;
    font-weight: bold;
    font-size: 17px;
  }
}
</style>
