<script setup lang="ts">
import { Message, Setting, User } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

import CategoryPanel from '#/components/categoryPanel/CategoryPanel.vue';

// 示例分类数据
const categoryData = [
  { name: '用户管理', icon1: User },
  { name: '消息中心', icon1: Message },
  { name: '系统设置', icon1: Setting },
];

// 处理分类点击
const handleCategoryClick = (category: { name: string }) => {
  ElMessage.info(`点击分类：${category.name}`);
};

// 处理面板收缩状态改变
const handlePanelToggle = (collapsed: boolean) => {
  ElMessage.info(`面板状态：${collapsed ? '已收缩' : '已展开'}`);
};
</script>

<template>
  <div style="width: 300px; height: 100%">
    <CategoryPanel
      icon-key="icon1"
      title-key="name"
      :categories="categoryData"
      @click="handleCategoryClick"
      @panel-toggle="handlePanelToggle"
    />
  </div>
</template>
