<script setup lang="ts">
import {
  Bell,
  ChatDotSquare,
  Coin,
  Collection,
  CreditCard,
  DataAnalysis,
  DataBoard,
  Document,
  Finished,
  Guide,
  Headset,
  Histogram,
  Key,
  Memo,
  Money,
  OfficeBuilding,
  Operation,
  PriceTag,
  Service,
  SetUp,
  Setting,
  Tickets,
  TrendCharts,
  UserFilled,
  Wallet,
  Warning,
} from '@element-plus/icons-vue';
import type { Component } from 'vue';

defineOptions({ name: 'AdminMenuTree' });

interface AdminMenuNode {
  id: number;
  parentId: number;
  title: string;
  path?: string;
  icon?: string;
  sortOrder?: number;
  children?: AdminMenuNode[];
}

defineProps<{
  menus: AdminMenuNode[];
}>();

const iconMap: Record<string, Component> = {
  Bell,
  ChatDotSquare,
  Coin,
  Collection,
  CreditCard,
  DataAnalysis,
  DataBoard,
  Document,
  Finished,
  Guide,
  Headset,
  Histogram,
  Key,
  Memo,
  Money,
  OfficeBuilding,
  Operation,
  PriceTag,
  Service,
  SetUp,
  Setting,
  Tickets,
  TrendCharts,
  UserFilled,
  Wallet,
  Warning,
};

const titleIconMap: Record<string, Component> = {
  仪表盘: DataBoard,
  数据大盘: DataBoard,
  企业: OfficeBuilding,
  工具: Operation,
  费用: Wallet,
  支持: Headset,
  备案: Finished,
  文档: Guide,
  租户管理: OfficeBuilding,
  企业列表: OfficeBuilding,
  组织员工: UserFilled,
  团队管理: UserFilled,
  审核中心: Finished,
  入驻审核: Finished,
  权限配置: Key,
  模型配置: Setting,
  用量统计: Histogram,
  计费与订单: Wallet,
  计费记录: Coin,
  计费规则: Money,
  套餐管理: Wallet,
  订单与发票: CreditCard,
  订单操作记录: Memo,
  数据与预警: DataAnalysis,
  运营预警: Warning,
  数据报表: Histogram,
  客户服务: Headset,
  工单工作台: Tickets,
  话术库: ChatDotSquare,
  客服绩效看板: TrendCharts,
  内容运营: Collection,
  使用手册: Guide,
  政策与新闻: Bell,
  系统设置: Setting,
  权限管理: Key,
  运营账号: Key,
  操作日志: Memo,
  全局参数: SetUp,
};

function iconOf(item: AdminMenuNode) {
  return titleIconMap[item.title] || (item.icon && iconMap[item.icon]) || Document;
}
</script>

<template>
  <template v-for="item in menus" :key="item.id">
    <el-sub-menu v-if="item.children?.length" :index="`menu-${item.id}`">
      <template #title>
        <el-icon><component :is="iconOf(item)" /></el-icon>
        <span>{{ item.title }}</span>
      </template>
      <AdminMenuTree :menus="item.children" />
    </el-sub-menu>
    <el-menu-item v-else-if="item.path" :index="item.path">
      <el-icon><component :is="iconOf(item)" /></el-icon>
      <span>{{ item.title }}</span>
    </el-menu-item>
  </template>
</template>
