<template>
  <div class="menu-nav">
    <div class="menu-container">
      <div
        v-for="menu in menus"
        :key="menu.menuID"
        class="menu-item"
        :class="{ active: isActive(menu) }"
        @click="handleMenuClick(menu)"
      >
        {{ menu.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import type { SysMenu } from '@/types';

interface Props {
  menus: SysMenu[];
}

defineProps<Props>();

const emit = defineEmits<{
  'menu-click': [menu: SysMenu];
}>();

const route = useRoute();

// 判断菜单是否激活
function isActive(menu: SysMenu): boolean {
  if (!menu.url) return false;
  return route.path === menu.url || route.path.startsWith(menu.url + '/');
}

// 处理菜单点击
function handleMenuClick(menu: SysMenu) {
  emit('menu-click', menu);
}
</script>

<style lang="scss" scoped>
.menu-nav {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.menu-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.menu-item {
  padding: 26px 21px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'PingFang SC', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5em;
  color: #141F38;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  
  &:hover {
    color: #C62828;
  }
  
  &.active {
    width: 106px;
    background: #C62828;
    color: #FFFFFF;
    font-weight: 600;
    
    &:hover {
      color: #FFFFFF;
      background: #A82020;
    }
  }
}
</style>
