<template>
  <div class="nurse-nav-bar" :style="{ background: background }">
    <div class="nav-scroll">
      <div
        v-for="nav in navs"
        :key="nav.path"
        class="nav-tab"
        :class="{ 'is-active': currentPath === nav.path, disabled: nav.disabled }"
        :style="nav.accent ? { '--accent-color': nav.accent } : null"
        @click="() => handleNav(nav)"
      >
        <div class="nav-icon" v-if="nav.icon">
          <component :is="nav.icon" />
        </div>
        <span class="nav-label">{{ nav.label }}</span>
        <span v-if="nav.desc" class="nav-desc">{{ nav.desc }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed} from 'vue';
import {useRoute, useRouter} from 'vue-router';

const props = defineProps({
  navs: {
    type: Array,
    default: () => [],
  },
  activePath: {
    type: String,
    default: '',
  },
  background: {
    type: String,
    default: '#f8f9fb',
  },
});

const emit = defineEmits(['navigate']);

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

const currentPath = computed(() => props.activePath || route.path);

function handleNav(nav) {
  if (nav.disabled) return;
  emit('navigate', nav);
  if (nav.path && nav.path !== currentPath.value) {
    router.push(nav.path);
  }
}
</script>

<style scoped>
.nurse-nav-bar {
  --theme-color: var(--el-color-primary, #409eff);
  height: 40px;
  border-bottom: 1px solid #e4e7ed;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

.nav-scroll {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.nav-tab {
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  color: #1f2d3d;
  font-size: 14px;
}

.nav-tab:hover {
  border-color: rgba(64, 158, 255, 0.45);
  color: var(--theme-color);
  background: rgba(64, 158, 255, 0.08);
}

.nav-tab.is-active {
  background: rgba(64, 158, 255, 0.18);
  border-color: var(--theme-color);
  color: var(--theme-color);
  box-shadow: 0 3px 8px rgba(64, 158, 255, 0.12);
}

.nav-tab.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.nav-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(64, 158, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color, var(--theme-color));
  font-size: 12px;
}

.nav-tab.is-active .nav-icon {
  background: rgba(255, 255, 255, 0.8);
  color: var(--theme-color);
}

.nav-label {
  font-weight: 600;
}

.nav-desc {
  font-size: 12px;
  color: #909399;
}
</style>

