<!-- Aside 侧边栏 -->
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useDesignStore, useUserStore } from '@/stores';

const route = useRoute();
const router = useRouter();
const designStore = useDesignStore();
const userStore = useUserStore();

const activeMenu = ref<string>(route.path);

// 租户ID到公司名称的映射
const tenantNameMap: Record<string, string> = {
  '000001': '集团总部',
  '000002': '汇亚公司',
  '000003': '恒福公司',
  '000004': '玛缇公司',
};

// 计算当前用户的公司名称
const companyName = computed(() => {
  const tenantId = userStore.userInfo?.tenantId;
  return tenantId ? tenantNameMap[tenantId] || 'HZHub' : 'HZHub';
});

// 定义菜单项类型
interface MenuItem {
  id: string;
  name: string;
  icon: string;
  route: string;
  badge?: number;
}

interface MenuGroup {
  label: string;
  items: MenuItem[];
}

// 菜单分组
const menuGroups = ref<MenuGroup[]>([
  {
    label: '概览',
    items: [
      { id: 'dashboard', name: '工作台', icon: 'Odometer', route: '/dashboard' },
    ],
  },
  {
    label: '业务管理',
    items: [
      { id: 'approval', name: '审批中心', icon: 'Stamp', route: '/approval' },      
    ],
  },
   {
    label: '销售CRM',
    items: [
      { id: 'lead', name: '线索中心', icon: 'UserFilled', route: '/lead' },
      { id: 'opportunity', name: '商机中心', icon: 'TrendCharts', route: '/opportunity' },      
      { id: 'dealer', name: '客户管理', icon: 'Shop', route: '/dealer' },
    ],
  },
  {
    label: '运营分析',
    items: [
      { id: 'supply', name: '供应链管理', icon: 'Box', route: '/supply' },
      { id: 'bi', name: 'BI报表', icon: 'DataAnalysis', route: '/bi' },
    ],
  },
  {
    label: '系统管理',
    items: [
      { id: 'system-settings', name: '系统设置', icon: 'Setting', route: '/system-settings' },
      { id: 'menu-settings', name: '菜单设置', icon: 'Menu', route: '/menu-settings' },
    ],
  },
]);

// 监听路由变化，更新 activeMenu
watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath;
  },
  { immediate: true },
);

// 菜单点击
function handleMenuClick(item: MenuItem) {
  router.push(item.route);
}
</script>

<template>
  <aside
    class="sidebar"
    :class="{ collapsed: designStore.isCollapse }"
  >
    <!-- Logo -->
    <div class="sidebar-brand">
      <div class="brand-icon">
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <rect width="28" height="28" rx="8" fill="#1d5af3" />
          <path d="M8 14L12 10L16 14L20 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          <path d="M8 18L12 14L16 18L20 14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.5" />
        </svg>
      </div>
      <transition name="fade">
        <div v-if="!designStore.isCollapse" class="brand-text">
          <span class="brand-name">{{ companyName }}</span>
          <span class="brand-sub">企业员工门户</span>
        </div>
      </transition>
    </div>

    <!-- Navigation -->
    <nav class="sidebar-nav">
      <div v-for="group in menuGroups" :key="group.label" class="nav-group">
        <div v-if="!designStore.isCollapse" class="nav-group-label">
          {{ group.label }}
        </div>
        <div
          v-for="item in group.items"
          :key="item.id"
          class="nav-item"
          :class="{ active: activeMenu === item.route, collapsed: designStore.isCollapse }"
          @click="handleMenuClick(item)"
        >
          <el-icon :size="20">
            <component :is="item.icon" />
          </el-icon>
          <transition name="fade">
            <span v-if="!designStore.isCollapse" class="nav-label">{{ item.name }}</span>
          </transition>
          <transition name="fade">
            <el-badge
              v-if="!designStore.isCollapse && item.badge"
              :value="item.badge"
              type="danger"
              class="nav-badge"
            />
          </transition>
        </div>
      </div>
    </nav>

    <!-- Footer Toggle -->
    <div class="sidebar-footer">
      <div class="sidebar-toggle" @click="designStore.toggleCollapse">
        <el-icon :size="18">
          <Fold v-if="!designStore.isCollapse" />
          <Expand v-else />
        </el-icon>
        <transition name="fade">
          <span v-if="!designStore.isCollapse">收起菜单</span>
        </transition>
      </div>
    </div>
  </aside>
</template>

<style scoped lang="scss">
.sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--color-sidebar);
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 100;

  &.collapsed {
    width: 68px;
    min-width: 68px;
  }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.brand-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-text {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.brand-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.12em;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 10px;
}

.nav-group {
  margin-bottom: 8px;
}

.nav-group-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 12px 6px;
  white-space: nowrap;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: 2px;
  position: relative;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;

  &:hover {
    background: var(--color-sidebar-hover);
    color: rgba(255, 255, 255, 0.85);
  }

  &.active {
    background: linear-gradient(135deg, #1d5af3 0%, #3378fc 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(29, 90, 243, 0.35);
  }

  &.collapsed {
    justify-content: center;
    padding: 10px;
  }
}

.nav-label {
  font-size: 13.5px;
  font-weight: 500;
  flex: 1;
}

.nav-badge {
  :deep(.el-badge__content) {
    font-size: 10px;
    height: 16px;
    line-height: 16px;
    padding: 0 5px;
  }
}

.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
  transition: all var(--transition);
  font-size: 12.5px;

  &:hover {
    background: var(--color-sidebar-hover);
    color: rgba(255, 255, 255, 0.7);
  }
}

/* Transitions */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
