game009_weiren/assets/scripts/RosterManager.ts

import { _decorator, Component, Node, Button, Animation, Sprite, SpriteFrame, resources, assetManager, Label, Layout, instantiate } from 'cc';
const { ccclass, property } = _decorator;

/**
 * 名单管理器，控制名单UI的显示和隐藏，并管理学生头像显示
 */
@ccclass('RosterManager')
export class RosterManager extends Component {
    @property({
        type: Node,
        tooltip: '名单UI面板'
    })
    rosterPanel: Node = null;
    
    @property({
        type: Button,
        tooltip: '关闭按钮'
    })
    closeButton: Button = null;
    
    @property({
        type: Animation,
        tooltip: '名单动画组件(可选)'
    })
    rosterAnimation: Animation = null;
    
    @property({
        type: Node,
        tooltip: '学生头像容器'
    })
    avatarContainer: Node = null;
    
    @property({
        tooltip: '头像资源路径'
    })
    avatarResourcePath: string = "avatars/";
    
    // 保存头像引用的字典
    private avatarMap: Map<string, SpriteFrame> = new Map();
    

    // 头像项预制体
    @property({
        type: Node,
        tooltip: '头像项预制体'
    })
    avatarItemPrefab: Node = null;
    
    start() {
        // 初始化隐藏名单面板
        if (this.rosterPanel) {
            this.rosterPanel.active = false;
        }
        
        // 注册关闭按钮点击事件
        this.setupCloseButton();
    }
    
    /**
     * 设置关闭按钮事件
     */
    private setupCloseButton() {
        if (this.closeButton) {
            // 移除可能已存在的事件监听
            this.closeButton.node.off('click');
            
            // 使用按钮的点击事件监听方式
            this.closeButton.node.on('click', () => {
                console.log('名单关闭按钮被点击');
                this.hideRosterPanel();
            }, this);
            
            console.log('名单关闭按钮事件已注册');
        } else {
            console.error('名单关闭按钮未设置');
        }
    }
    
    /**
     * 显示名单面板
     */
    public showRosterPanel() {
        if (this.rosterPanel) {
            this.rosterPanel.active = true;
            
            // 确保面板在最前面
            this.rosterPanel.setSiblingIndex(999);
            
            // 播放打开动画(如果有)
            if (this.rosterAnimation) {
                this.rosterAnimation.play('roster_open');
            }
        } else {
            console.error('名单面板未设置');
        }
    }
    
    /**
     * 隐藏名单面板
     */
    public hideRosterPanel() {
        console.log('hideRosterPanel被调用');
        
        if (this.rosterPanel) {
            // 播放关闭动画，并在动画结束后隐藏面板
            if (this.rosterAnimation) {
                this.rosterAnimation.play('roster_close');
                this.scheduleOnce(() => {
                    this.rosterPanel.active = false;
                    console.log('名单面板已隐藏（动画后）');
                }, 0.5); // 假设动画时长为0.5秒
            } else {
                this.rosterPanel.active = false;
                console.log('名单面板已隐藏（立即）');
            }
        }
    }
    
    /**
     * 预加载头像资源
     * @param avatarIds 头像ID数组
     */
    public preloadAvatars(avatarIds: string[]) {
        if (!this.avatarContainer) {
            return;
        }
        
        avatarIds.forEach(id => {
            const path = `${this.avatarResourcePath}avatar_${id}/spriteFrame`;
            resources.load(path, SpriteFrame, (err, spriteFrame) => {
                if (err) {
                    console.error(`加载头像 ${id} 失败:`, err);
                    return;
                }
                
                this.avatarMap.set(id, spriteFrame);
            });
        });
    }
    
    /**
     * 显示头像
     * @param slotId 头像位置ID
     * @param avatarId 头像资源ID
     */
    public showAvatar(slotId: string, avatarId: string) {
        if (!this.avatarContainer) {
            return;
        }
        
        // 查找对应的头像槽位
        const avatarSlot = this.avatarContainer.getChildByName(slotId);
        if (!avatarSlot) {
            console.error(`未找到头像槽位: ${slotId}`);
            return;
        }
        
        // 获取已加载的头像
        const spriteFrame = this.avatarMap.get(avatarId);
        if (spriteFrame) {
            const sprite = avatarSlot.getComponent(Sprite);
            if (sprite) {
                sprite.spriteFrame = spriteFrame;
            }
        } else {
            // 如果头像未预加载，则即时加载
            const path = `${this.avatarResourcePath}avatar_${avatarId}/spriteFrame`;
            resources.load(path, SpriteFrame, (err, spriteFrame) => {
                if (err) {
                    console.error(`加载头像 ${avatarId} 失败:`, err);
                    return;
                }
                
                const sprite = avatarSlot.getComponent(Sprite);
                if (sprite) {
                    sprite.spriteFrame = spriteFrame;
                    // 保存引用以便下次使用
                    this.avatarMap.set(avatarId, spriteFrame);
                }
            });
        }
    }
    

    // 在RosterManager中添加处理关卡人员头像的方法
    public displayLevelPersonnel(personnelData: any[]) {
        console.log("开始显示人员列表...");
        console.log("avatarContainer:", this.avatarContainer);
        console.log("personnelData:", personnelData);
        
        if (!this.avatarContainer) {
            console.error('无法显示人员列表：avatarContainer未设置');
            return;
        }
        
        if (!personnelData || personnelData.length === 0) {
            console.error('无法显示人员列表：人员数据为空');
            return;
        }
        
        // 检查预制体
        if (!this.avatarItemPrefab) {
            console.error('头像项预制体未设置');
            return;
        }
        
        console.log("准备清空容器并创建新头像项");
        // 清空现有内容
        this.avatarContainer.removeAllChildren();
        
        // 遍历所有人员数据，创建头像项
        personnelData.forEach((person, index) => {
            // 创建新的头像项
            const avatarItem = instantiate(this.avatarItemPrefab);
            this.avatarContainer.addChild(avatarItem);
            
            // 设置姓名
            const nameLabel = avatarItem.getComponentInChildren(Label);
            if (nameLabel && person.name) {
                nameLabel.string = person.name;
            }
            
            // 使用完整的头像路径 - 直接从数据中获取
            if (person.avatarPath) {
                resources.load(person.avatarPath, SpriteFrame, (err, spriteFrame) => {
                    if (err) {
                        console.error(`加载头像失败: ${person.avatarPath}`, err);
                        return;
                    }
                    
                    // 查找头像显示组件
                    const sprite = avatarItem.getComponentInChildren(Sprite);
                    if (sprite) {
                        sprite.spriteFrame = spriteFrame;
                    }
                });
            }
        });
        
        // 更新布局
        const layout = this.avatarContainer.getComponent(Layout);
        if (layout) {
            this.scheduleOnce(() => {
                layout.updateLayout();
            }, 0.1);
        }
    }
    
    onDestroy() {
        // 移除按钮事件监听
        if (this.closeButton) {
            this.closeButton.node.off('click');
        }
        
        // 清理资源
        this.avatarMap.clear();
    }
}