tanqiu/assets/scripts/FourUI/NavBarController.ts

import { _decorator, Color, Component, Node, Sprite } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('NavBarController')
export class NavBarController extends Component {
    @property({ type: [Node] }) panels: Node[] = [];      // 依次给 Main、Shop、Upgrade、Skill
    @property({ type: [Node] }) buttons: Node[] = [];     // 依次给 Battle、Shop、Upgrade、Skill
    private normalColor = new Color(255, 255, 255, 255);
    private activeColor = new Color(255, 0, 0, 255);      // 红色
    private lockedColor = new Color(128, 128, 128, 255);   // 灰色（锁定状态）
    
    // 按钮锁定状态数组 - 对应 Battle、Shop、Upgrade、Skill 四个按钮
    private buttonLockStates: boolean[] = [false, true, false, false];  // 默认只锁定Shop按钮

    start () {
        // 默认打开 MainUI
        this.switchTo(0);
        // 初始化按钮状态，设置shop按钮为锁定状态
        this.updateButtonStates();
    }

    onBattleClick ()  { 
        // 检查Battle按钮是否被锁定（索引0）
        if (this.buttonLockStates[0]) {
            console.log('[NavBarController] Battle按钮被锁定，无法点击');
            return;
        }
        this.switchTo(0); 
    }
    onUpgradeClick () { 
        // 检查Upgrade按钮是否被锁定（索引2）
        if (this.buttonLockStates[2]) {
            console.log('[NavBarController] Upgrade按钮被锁定，无法点击');
            return;
        }
        this.switchTo(1); 
    }
    onShopClick ()    { 
        // 检查shop按钮是否被锁定（索引1）
        if (this.buttonLockStates[1]) {
            console.log('[NavBarController] Shop按钮被锁定，无法点击');
            // 可以在这里添加提示音效或震动效果
            return;
        }
        this.switchTo(2); 
    }
    onSkillClick ()   { 
        // 检查Skill按钮是否被锁定（索引3）
        if (this.buttonLockStates[3]) {
            console.log('[NavBarController] Skill按钮被锁定，无法点击');
            return;
        }
        this.switchTo(3);
        // 注意：滚动功能现在由SkillNodeGenerator组件通过装饰器直接处理
    }

    private switchTo (index: number) {
        // 显示对应面板
        this.panels.forEach((p, i) => p.active = i === index);

        // 按钮索引到面板索引的映射：根据实际的点击事件调用
        // 按钮索引: [0:Battle, 1:Shop, 2:Upgrade, 3:Skill]
        // 面板索引: [0:Main, 1:Shop, 2:Upgrade, 3:Skill]
        // 实际映射: Battle->Main(0), Shop->Upgrade(2), Upgrade->Shop(1), Skill->Skill(3)
        const buttonToPanelMap = [0, 2, 1, 3]; // Battle->Main(0), Shop->Upgrade(2), Upgrade->Shop(1), Skill->Skill(3)
        
        // 设置按钮颜色，考虑锁定状态
        this.buttons.forEach((btn, buttonIndex) => {
            const sp = btn.getComponent(Sprite);
            if (sp) {
                // 检查按钮是否被锁定
                if (this.buttonLockStates[buttonIndex]) {
                    sp.color = this.lockedColor;  // 锁定状态显示灰色
                } else {
                    // 检查当前按钮对应的面板是否是激活的面板
                    const panelIndex = buttonToPanelMap[buttonIndex];
                    sp.color = (panelIndex === index) ? this.activeColor : this.normalColor;
                }
            }
        });
    }
    
    /**
     * 更新按钮状态，主要用于设置锁定按钮的视觉效果
     */
    private updateButtonStates() {
        // 按钮索引到面板索引的映射：根据实际的点击事件调用
        const buttonToPanelMap = [0, 2, 1, 3]; // Battle->Main(0), Shop->Upgrade(2), Upgrade->Shop(1), Skill->Skill(3)
        
        this.buttons.forEach((btn, buttonIndex) => {
            const sp = btn.getComponent(Sprite);
            if (sp) {
                if (this.buttonLockStates[buttonIndex]) {
                    sp.color = this.lockedColor;  // 设置锁定按钮为锁定颜色
                } else {
                    // 对于未锁定的按钮，设置为正常颜色（除非它是当前激活的）
                    // 这里我们需要知道当前激活的面板，但为了简化，先设置为正常颜色
                    // 实际的激活状态会在switchTo中正确设置
                    sp.color = this.normalColor;
                }
            }
        });
    }
    
    /**
     * 解锁指定按钮
     * @param buttonIndex 按钮索引 (0:Battle, 1:Shop, 2:Upgrade, 3:Skill)
     */
    public unlockButton(buttonIndex: number) {
        if (buttonIndex >= 0 && buttonIndex < this.buttonLockStates.length) {
            this.buttonLockStates[buttonIndex] = false;
            this.updateButtonStates();
            const buttonNames = ['Battle', 'Shop', 'Upgrade', 'Skill'];
            console.log(`[NavBarController] ${buttonNames[buttonIndex]}按钮已解锁`);
        }
    }
    
    /**
     * 锁定指定按钮
     * @param buttonIndex 按钮索引 (0:Battle, 1:Shop, 2:Upgrade, 3:Skill)
     */
    public lockButton(buttonIndex: number) {
        if (buttonIndex >= 0 && buttonIndex < this.buttonLockStates.length) {
            this.buttonLockStates[buttonIndex] = true;
            this.updateButtonStates();
            const buttonNames = ['Battle', 'Shop', 'Upgrade', 'Skill'];
            console.log(`[NavBarController] ${buttonNames[buttonIndex]}按钮已锁定`);
        }
    }
    
    /**
     * 检查指定按钮是否被锁定
     * @param buttonIndex 按钮索引 (0:Battle, 1:Shop, 2:Upgrade, 3:Skill)
     */
    public isButtonLocked(buttonIndex: number): boolean {
        if (buttonIndex >= 0 && buttonIndex < this.buttonLockStates.length) {
            return this.buttonLockStates[buttonIndex];
        }
        return false;
    }
    
    /**
     * 批量设置按钮锁定状态
     * @param lockStates 锁定状态数组 [Battle, Shop, Upgrade, Skill]
     */
    public setButtonLockStates(lockStates: boolean[]) {
        if (lockStates.length === 4) {
            this.buttonLockStates = [...lockStates];
            this.updateButtonStates();
            console.log('[NavBarController] 按钮锁定状态已更新:', lockStates);
        }
    }
    
    /**
     * 获取当前所有按钮的锁定状态
     */
    public getButtonLockStates(): boolean[] {
        return [...this.buttonLockStates];
    }
}