<script setup>
import {ref, onMounted, watch, onUnmounted} from 'vue'
import {useNavStore} from '@/store/nav'
import {storeToRefs} from 'pinia'

// Store 相关
const navStore = useNavStore()
const {navIndex} = storeToRefs(navStore)

// 响应式数据
const navList = ref([])
const activeIndex = ref(null)

// 处理导航选择
const handleSelect = (key) => {
  navStore.changeNavIndex(key)
}

// 监听 store 中的 navIndex 变化
const stopWatch = watch(
  navIndex,
  (newValue) => {
    activeIndex.value = newValue
  },
  {
    immediate: true,
  }
)

// 生命周期
onMounted(() => {
  navList.value = window.nav.header || []
})

onUnmounted(() => {
  stopWatch()
})
</script>

<template>
  <div class="page">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      active-text-color="#FFFFFF"
      text-color="#999999"
      background-color="$bg_color"
      router
    >
      <el-menu-item
        v-for="item in navList"
        :key="item.id"
        :index="item.url"
        :class="{'is-active': activeIndex === item.url}"
      >
        {{ item.label }}
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
/* 菜单容器样式 */
.el-menu--horizontal {
  --el-menu-horizontal-height: 101px;
}

/* 菜单项基础样式 */
.el-menu-item {
  font-family: 'PingFang SC';
  padding: 0 25px;
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0.06em;
  border-bottom: none !important;
  transition: border-bottom 0.3s ease;

  /* 激活状态样式 */
  &.is-active {
    border-bottom: 6px solid #ffffff !important;
  }

  /* 悬停效果 */
  &:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
}
</style>
