mini-starter/packages/goods-category-management-ui-mt/src/components/GoodsCategoryTreeAsync.tsx

import React from 'react';
import { ChevronRight, ChevronDown, Folder, FolderOpen, Loader2 } from 'lucide-react';
import { Button } from '@d8d/shared-ui-components/components/ui/button';
import { Badge } from '@d8d/shared-ui-components/components/ui/badge';
import { cn } from '@d8d/shared-ui-components/utils';
import { useQuery } from '@tanstack/react-query';
import { goodsCategoryClientManager } from '../api/goodsCategoryClient';
import type { GoodsCategoryNode } from '../types/goodsCategory';

interface GoodsCategoryTreeAsyncProps {
  categories: GoodsCategoryNode[];
  expandedNodes: Set<number>;
  onToggleNode: (nodeId: number) => void;
  onEdit: (category: GoodsCategoryNode) => void;
  onDelete: (category: GoodsCategoryNode) => void;
  onToggleStatus: (category: GoodsCategoryNode) => void;
  onAddChild: (category: GoodsCategoryNode) => void;
}

// 子树加载组件
interface SubTreeLoaderProps {
  nodeId: number;
  isExpanded: boolean;
  hasChildren: boolean;
  depth: number;
  expandedNodes: Set<number>;
  onToggleNode: (nodeId: number) => void;
  onEdit: (category: GoodsCategoryNode) => void;
  onDelete: (category: GoodsCategoryNode) => void;
  onToggleStatus: (category: GoodsCategoryNode) => void;
  onAddChild: (category: GoodsCategoryNode) => void;
}

const SubTreeLoader: React.FC<SubTreeLoaderProps> = ({
  nodeId,
  isExpanded,
  hasChildren,
  depth,
  expandedNodes,
  onToggleNode,
  onEdit,
  onDelete,
  onToggleStatus,
  onAddChild
}) => {
  const { data: subTreeData, isLoading: isSubTreeLoading } = useQuery({
    queryKey: ['goods-categories-subtree', nodeId],
    queryFn: async () => {
      const res = await goodsCategoryClientManager.get().index.$get({
        query: {
          page: 1,
          pageSize: 100,
          filters: JSON.stringify({ parentId: nodeId }),
          sortBy: 'id',
          sortOrder: 'ASC'
        }
      });
      if (res.status !== 200) throw new Error('获取子树失败');
      const response = await res.json();
      return response.data;
    },
    enabled: isExpanded && hasChildren,
    staleTime: 5 * 60 * 1000,
    gcTime: 10 * 60 * 1000,
  });

  if (isSubTreeLoading) {
    return (
      <div className="flex items-center justify-center py-2 px-3 text-muted-foreground">
        <Loader2 className="h-4 w-4 animate-spin mr-2" />
        加载中...
      </div>
    );
  }

  if (!subTreeData) {
    return (
      <div className="py-2 px-3 text-muted-foreground text-sm">
        暂无子节点
      </div>
    );
  }

  // subTreeData 是一个 GoodsCategoryNode 数组，直接使用
  const childNodes = subTreeData || [];

  if (childNodes.length === 0) {
    return (
      <div className="py-2 px-3 text-muted-foreground text-sm">
        暂无子节点
      </div>
    );
  }

  return (
    <div>
      {childNodes.map((node: GoodsCategoryNode) => (
        <TreeNode
          key={node.id}
          node={node}
          depth={depth + 1}
          expandedNodes={expandedNodes}
          onToggleNode={onToggleNode}
          onEdit={onEdit}
          onDelete={onDelete}
          onToggleStatus={onToggleStatus}
          onAddChild={onAddChild}
        />
      ))}
    </div>
  );
};

// 树节点组件
interface TreeNodeProps {
  node: GoodsCategoryNode;
  depth?: number;
  expandedNodes: Set<number>;
  onToggleNode: (nodeId: number) => void;
  onEdit: (category: GoodsCategoryNode) => void;
  onDelete: (category: GoodsCategoryNode) => void;
  onToggleStatus: (category: GoodsCategoryNode) => void;
  onAddChild: (category: GoodsCategoryNode) => void;
}

const TreeNode: React.FC<TreeNodeProps> = ({
  node,
  depth = 0,
  expandedNodes,
  onToggleNode,
  onEdit,
  onDelete,
  onToggleStatus,
  onAddChild
}) => {
  const isExpanded = expandedNodes.has(node.id);
  const isDisabled = node.state === 2;
  const hasChildren = true; // 商品分类理论上可以无限层级

  return (
    <div key={node.id} className="select-none">
      {/* 节点行 */}
      <div
        className={cn(
          "group flex items-center gap-2 py-2 px-3 hover:bg-muted/50 cursor-pointer border-b",
          depth > 0 && "ml-6"
        )}
        style={{ marginLeft: `${depth * 24}px` }}
      >
        {/* 展开/收起按钮 */}
        {hasChildren && (
          <Button
            variant="ghost"
            size="sm"
            className="h-6 w-6 p-0"
            onClick={() => onToggleNode(node.id)}
          >
            {isExpanded ? (
              <ChevronDown className="h-4 w-4" />
            ) : (
              <ChevronRight className="h-4 w-4" />
            )}
          </Button>
        )}
        {!hasChildren && <div className="w-6" />}

        {/* 图标 */}
        <div className="flex-shrink-0">
          {hasChildren ? (
            isExpanded ? (
              <FolderOpen className="h-4 w-4 text-blue-500" />
            ) : (
              <Folder className="h-4 w-4 text-blue-400" />
            )
          ) : (
            <div className="h-4 w-4" />
          )}
        </div>

        {/* 节点信息 */}
        <div className="flex-1 flex items-center gap-3">
          <span className={cn("font-medium", isDisabled && "text-muted-foreground line-through")}>
            {node.name}
          </span>
          <Badge variant="outline" className="text-xs">
            {getLevelName(node.level)}
          </Badge>
          {node.imageFile?.fullUrl && (
            <img
              src={node.imageFile.fullUrl}
              alt={node.name}
              className="w-8 h-8 object-cover rounded"
              onError={(e) => {
                e.currentTarget.src = '/placeholder.png';
              }}
            />
          )}
          <Badge variant={isDisabled ? "secondary" : "default"} className="text-xs">
            {isDisabled ? '禁用' : '启用'}
          </Badge>
        </div>

        {/* 操作按钮 */}
        <div className="flex gap-1 opacity-100 transition-opacity">
          {/* 新增子节点按钮 */}
          <Button
            variant="outline"
            size="sm"
            onClick={(e) => {
              e.stopPropagation();
              onAddChild(node);
            }}
          >
            新增子分类
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={(e) => {
              e.stopPropagation();
              onEdit(node);
            }}
          >
            编辑
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={(e) => {
              e.stopPropagation();
              onToggleStatus(node);
            }}
          >
            {isDisabled ? '启用' : '禁用'}
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={(e) => {
              e.stopPropagation();
              onDelete(node);
            }}
          >
            删除
          </Button>
        </div>
      </div>

      {/* 子节点 */}
      {isExpanded && hasChildren && (
        <SubTreeLoader
          nodeId={node.id}
          isExpanded={isExpanded}
          hasChildren={hasChildren}
          depth={depth}
          expandedNodes={expandedNodes}
          onToggleNode={onToggleNode}
          onEdit={onEdit}
          onDelete={onDelete}
          onToggleStatus={onToggleStatus}
          onAddChild={onAddChild}
        />
      )}
    </div>
  );
};

export const GoodsCategoryTreeAsync: React.FC<GoodsCategoryTreeAsyncProps> = ({
  categories,
  expandedNodes,
  onToggleNode,
  onEdit,
  onDelete,
  onToggleStatus,
  onAddChild
}) => {
  return (
    <div className="border rounded-lg bg-background">
      {categories.map(category => (
        <TreeNode
          key={category.id}
          node={category}
          depth={0}
          expandedNodes={expandedNodes}
          onToggleNode={onToggleNode}
          onEdit={onEdit}
          onDelete={onDelete}
          onToggleStatus={onToggleStatus}
          onAddChild={onAddChild}
        />
      ))}
    </div>
  );
};

// 获取层级显示名称
const getLevelName = (level: number) => {
  switch (level) {
    case 0: return '顶级分类';
    case 1: return '一级分类';
    case 2: return '二级分类';
    case 3: return '三级分类';
    case 4: return '四级分类';
    default: return `${level}级分类`;
  }
};