<!--
 * @Author: suhang suhang_max@163.com
 * @Date: 2023-02-23 16:25:56
 * @LastEditors: suhang suhang_max@163.com
 * @LastEditTime: 2023-06-01 11:09:13
 * @FilePath: \train-assess\src\layout\NavBar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-menu
    :default-active="activeIndex"
    router
    class="el-menu-demo"
    active-text-color="#fff"
    background-color="transparent"
    text-color="#ADCFFF"
    mode="horizontal"
  >
    <el-menu-item @click="goRedirect" v-for="item in temp" :index="item.meta?.path" class="navbar-item">
      <img src="" class="item-img" />
      <span class="item-title">{{ item.meta?.title }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { reactive, ref, watch, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { asyncRoutes } from '@/router/routes.js'

//获取路由数据
const $route = useRoute()
const $router = useRouter()
// console.log(asyncRoutes.value)

//动态图片函数
const imgSrc = ref($route.matched[0].path)
const activeIndex = ref($route.matched[0].path)
// const instance = getCurrentInstance();
const goRedirect = val => {
  imgSrc.value = val.index
  if ($route.matched[0].redirect == $route.path) {
    const cast = new BroadcastChannel('backMain')
    cast.postMessage('main')
  }
}
</script>

<style lang="scss" scoped>
.navbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: none;
  padding: 0;
  margin-right: cw(28);

  .item-img {
    width: calcHeight(40);
    height: calcHeight(40);
    margin-bottom: 9px;
  }

  .item-title {
    font-size: 0.18rem;
    // font-size: 18px;
    line-height: 0.18rem;
  }
}

.el-menu-demo {
  border-bottom: none;
  flex: 1;
  justify-content: center;
}

.el-menu-item:hover,
.el-menu-item:focus {
  outline: 0 !important;
  color: #fff !important;
  background: #3686ff !important;
}

.is-active {
  border-bottom: none !important;
}
</style>
