18xchat/assets/Scripts/chat18x/ui/panels/NavigationPanel.ts

import { _decorator, Component, Label, Node } from "cc";
import li_BaseView from "db://assets/Scripts/Main/Common/li_BaseView";
import Utils from "db://assets/Scripts/Main/Common/Utils";
import { GButton } from "db://assets/Scripts/Main/Common/GButton";
import { NavigationManager, PanelType } from "../../manager/NavigationManager";
import { NavigationBtn } from "../items/NavigationBtn";

const { ccclass, property } = _decorator;

@ccclass("NavigationPanel")
export class NavigationPanel extends li_BaseView {
  private _nodeTab: any = {};
  private currentActivePanel: PanelType = PanelType.THEME;

  private themeBtn: NavigationBtn;
  private girlDetailBtn: NavigationBtn;
  private chatBtn: NavigationBtn;
  private settingBtn: NavigationBtn;

  private loadingView: Node;

  onLoadCT() {
    Utils.parseNode(this.node, this._nodeTab);

    this.themeBtn = this._nodeTab.themeBtn.getComponent(NavigationBtn);
    this.girlDetailBtn =
      this._nodeTab.girlDetailBtn.getComponent(NavigationBtn);
    this.chatBtn = this._nodeTab.chatBtn.getComponent(NavigationBtn);
    this.settingBtn = this._nodeTab.settingBtn.getComponent(NavigationBtn);
    this.loadingView = this._nodeTab.loadingView;

    this.hideLoading();

    // 注册到NavigationManager
    NavigationManager.Instance.registerNavigationPanel(this);

    this.registerListener();
    this.updateButtonStates(PanelType.THEME);

    // 初次打开时通过NavigationManager切换到主题面板
    this.initializeFirstPanel();
  }

  private registerListener() {
    // 所有按钮点击都通过NavigationManager处理
    GButton.BandClick(
      this.themeBtn.node,
      () => {
        NavigationManager.Instance.switchToPanel(PanelType.THEME);
      },
      this
    );
    GButton.BandClick(
      this.girlDetailBtn.node,
      () => NavigationManager.Instance.switchToPanel(PanelType.GIRL_DETAIL),
      this
    );
    GButton.BandClick(
      this.chatBtn.node,
      () => NavigationManager.Instance.switchToPanel(PanelType.CHAT),
      this
    );
    GButton.BandClick(
      this.settingBtn.node,
      () => NavigationManager.Instance.switchToPanel(PanelType.SETTING),
      this
    );
  }

  /**
   * 更新按钮状态（公开方法，供NavigationManager调用）
   * @param activePanel 当前激活的面板类型
   */
  public updateButtonStates(activePanel: PanelType) {
    this.currentActivePanel = activePanel;
    this._nodeTab.CurrentPanel.getComponent(Label).string =
      this.currentActivePanel;

    this.refreshButtonVisuals();
  }

  /**
   * 刷新按钮的视觉状态
   */
  private refreshButtonVisuals() {
    // TODO: 实现按钮状态更新的视觉效果
    // 根据 currentActivePanel 更新按钮的选中状态
    console.log(
      "[NavigationPanel] Button states updated for:",
      this.currentActivePanel
    );

    this.themeBtn.setFocus(this.currentActivePanel === PanelType.THEME);
    this.girlDetailBtn.setFocus(
      this.currentActivePanel === PanelType.GIRL_DETAIL
    );
    this.chatBtn.setFocus(this.currentActivePanel === PanelType.CHAT);
    this.settingBtn.setFocus(this.currentActivePanel === PanelType.SETTING);
  }

  private initializeFirstPanel() {
    // 初次打开时通过NavigationManager切换到主题面板
    NavigationManager.Instance.switchToPanel(PanelType.THEME, true);
  }

  public showPanel() {
    this.node.active = true;
  }

  public hidePanel() {
    this.node.active = false;
  }

  /**
   * 显示加载状态（公开方法，供NavigationManager调用）
   */
  public showLoading() {
    if (this.loadingView) {
      this.loadingView.active = true;
    }
  }

  /**
   * 隐藏加载状态（公开方法，供NavigationManager调用）
   */
  public hideLoading() {
    if (this.loadingView) {
      this.loadingView.active = false;
    }
  }

  onDestroy(): void {}
}