<script setup lang="ts">
import { reactive, watch } from 'vue';

import type { Category } from '~/composables/useProductCenter';
const props = defineProps<{ categories: Category[]; activeCategoryId: string | null }>();
const emit = defineEmits<{ 'update:activeCategoryId': [id: string | null] }>();
const expanded = reactive<Record<string, boolean>>({});
function selectRootCategory(category: Category): void {
  emit('update:activeCategoryId', category.id);
  if (category.children.length) expanded[category.id] = !expanded[category.id];
}
watch(() => [props.categories, props.activeCategoryId] as const, () => {
  for (const category of props.categories) {
    if (category.id === props.activeCategoryId || category.children.some((item) => item.id === props.activeCategoryId)) expanded[category.id] = true;
  }
}, { immediate: true });
</script>

<template>
  <nav class="sidebar" aria-label="商品分类">
    <button class="root-row" :class="{ active: activeCategoryId === null }" type="button" @click="emit('update:activeCategoryId', null)"><i class="fa-solid fa-border-all"></i><span>全部商品</span></button>
    <template v-for="category in categories" :key="category.id">
      <button class="root-row" :class="{ active: activeCategoryId === category.id }" type="button" @click="selectRootCategory(category)">
        <img v-if="category.icon" :src="category.icon" alt="" /><i v-else class="fa-regular fa-folder"></i><span>{{ category.name }}</span><i v-if="category.children.length" class="fa-solid fa-chevron-down arrow" :class="{ open: expanded[category.id] }"></i>
      </button>
      <div v-if="category.children.length && expanded[category.id]" class="children">
        <button v-for="child in category.children" :key="child.id" type="button" :class="{ active: activeCategoryId === child.id }" @click="emit('update:activeCategoryId', child.id)">{{ child.name }}</button>
      </div>
    </template>
    <p v-if="!categories.length" class="empty">暂无分类</p>
  </nav>
</template>

<style scoped>
.sidebar { width: 216px; padding-top: 12px; }
.root-row { display: flex; align-items: center; width: 216px; height: 45px; margin-bottom: 10px; padding: 10px; border: 0; border-radius: 6px; background: #fff; color: #000; font-size: 18px; cursor: pointer; }
.root-row:hover, .root-row.active, .children button.active { color: #ff6800; background: #fff3eb; }.root-row img { filter: brightness(0); }.root-row.active img { filter: invert(48%) sepia(99%) saturate(3770%) hue-rotate(3deg) brightness(104%) contrast(104%); }
.root-row img, .root-row > i:first-child { width: 24px; height: 24px; margin-right: 8px; object-fit: contain; text-align: center; line-height: 24px; }
.root-row span { flex: 1; text-align: left; }
.arrow { font-size: 12px; transition: transform .2s; }.arrow.open { transform: rotate(180deg); }
.children { position: relative; margin-left: 10px; padding-left: 20px; border-left: 1px solid #e5e7eb; }
.children button { position: relative; display: block; width: 174px; height: 45px; margin-bottom: 10px; padding: 10px; border: 0; border-radius: 6px; background: #fff; color: #000; text-align: left; font-size: 18px; cursor: pointer; }
.children button::before { content: ''; position: absolute; top: 22px; left: -14px; width: 6px; border-top: 1px solid #e5e7eb; }
.empty { color: #777; text-align: center; }
</style>
