<script setup lang="ts">
/**
 * 文件职责：商品分类侧栏。
 * 1. 展示分类与数量统计。
 * 2. 透出分类切换事件。
 */
import type { ProductCategorySidebarItem } from '../types';

import { Card, Empty, Spin } from 'ant-design-vue';

interface Props {
  categories: ProductCategorySidebarItem[];
  isLoading: boolean;
  selectedCategoryId: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'select', categoryId: string): void;
}>();
</script>

<template>
  <Card :bordered="false" class="product-category-sidebar-card">
    <template #title>
      <span class="section-title">商品分类</span>
    </template>

    <Spin :spinning="props.isLoading">
      <div v-if="props.categories.length > 0" class="product-category-sidebar">
        <button
          v-for="item in props.categories"
          :key="item.id || 'all'"
          type="button"
          class="product-category-item"
          :class="{ active: props.selectedCategoryId === item.id }"
          @click="emit('select', item.id)"
        >
          <span class="category-name">{{ item.name }}</span>
          <span class="category-count">{{ item.productCount }}</span>
        </button>
      </div>

      <Empty v-else description="暂无分类" />
    </Spin>
  </Card>
</template>
