<template>
  <nav class="category-nav">
    <div class="nav-brand">
      <h3 class="brand-title">玉 宗</h3>
      <span class="brand-sub">YUZONG JEWELRY</span>
    </div>
    <ul class="category-list">
      <li
        v-for="category in categories"
        :key="category.id"
        class="category-item"
        :class="{ active: currentCategory?.id === category.id }"
        @click="handleSelect(category)"
      >
        <span class="category-icon">{{ getCategoryIcon(category.name) }}</span>
        <span class="category-name">{{ category.name }}</span>
      </li>
    </ul>
  </nav>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useCategoryStore } from '@/stores/category'
import type { Category } from '@/stores/category'

const categoryStore = useCategoryStore()

const categories = computed(() => categoryStore.categories)
const currentCategory = computed(() => categoryStore.currentCategory)

const handleSelect = (category: Category) => {
  categoryStore.selectCategory(category)
}

// 品类图标映射
const getCategoryIcon = (name: string): string => {
  const iconMap: Record<string, string> = {
    '牌子': '🏷️',
    '珠子': '🔵',
    '手把件': '🤲',
    '雕刻件': '💎',
    '摆件': '🏺',
    '手镯': '⭕',
    '耳钉': '⭐',
    '耳饰': '🌙',
    '手链': '🔗',
    '项链': '📿',
    '戒指': '💍',
    '表带': '⌚',
    '随形': '🗿',
    '吊坠': '🔻',
    '珠串': '📿',
  }
  for (const [key, icon] of Object.entries(iconMap)) {
    if (name.includes(key)) return icon
  }
  return '💠'
}
</script>

<style scoped lang="scss">
$primary-color: #5B7E6B;
$primary-light: #8BAF9C;
$primary-lighter: #D4E5DB;
$bg-color: #FAF8F5;
$border-color: #E8E4DF;
$text-primary: #2C2C2C;
$text-secondary: #6B6B6B;
$text-light: #999999;

.category-nav {
  width: 220px;
  min-width: 220px;
  height: 100%;
  background: linear-gradient(180deg, #f7f9f7 0%, #f0f4f1 100%);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba($border-color, 0.5);
}

.nav-brand {
  padding: 24px 20px 20px;
  text-align: center;
  border-bottom: 1px solid rgba($border-color, 0.4);

  .brand-title {
    font-size: 26px;
    font-weight: 700;
    color: $primary-color;
    letter-spacing: 8px;
    margin: 0 0 4px 0;
  }

  .brand-sub {
    font-size: 10px;
    color: $text-light;
    letter-spacing: 2px;
    font-weight: 400;
  }
}

.category-list {
  list-style: none;
  margin: 0;
  padding: 12px 12px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.25s ease;

  &:hover {
    background-color: rgba($primary-color, 0.06);
  }

  &.active {
    background-color: $primary-color;

    .category-icon {
      filter: brightness(1.2);
    }

    .category-name {
      color: #fff;
      font-weight: 600;
    }
  }
}

.category-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.category-name {
  font-size: 14px;
  color: $text-secondary;
  letter-spacing: 1px;
  transition: all 0.25s ease;
}
</style>
