18xchat/assets/Scripts/Sub/UI/LanguageSelectPanel.ts

import { _decorator, Component, Node, Button, Label, instantiate, Prefab, ScrollView, Layout, Color, Sprite } from 'cc';
import li_BaseView from '../../Main/Common/li_BaseView';
import LanguageUtils, { LanguageType } from '../../Main/Common/LanguageUtils';
import Utils from '../../Main/Common/Utils';
import AudioManager from '../../Main/Manager/AudioManager';

const { ccclass, property } = _decorator;

@ccclass('LanguageSelectPanel')
export class LanguageSelectPanel extends li_BaseView {
    @property(Node)
    private contentNode: Node = null;

    @property(Node)
    private itemTemplate: Node = null;

    @property(Button)
    private closeBtn: Button = null;

    @property(Label)
    private titleLabel: Label = null;

    private languageItems: Map<LanguageType, Node> = new Map();
    private currentSelectedLang: LanguageType = null;

    onLoadCT() {
        super.onLoadCT();
        this.initUI();
        this.bindEvents();
    }

    onEnable() {
        this.currentSelectedLang = LanguageUtils.CurrentLanguage;
        this.createLanguageItems();
        this.updateSelection();
    }

    private initUI() {
        if (this.titleLabel) {
            this.titleLabel.string = "Select Language / 选择语言";
        }

        if (this.itemTemplate) {
            this.itemTemplate.active = false;
        }
    }

    private bindEvents() {
        if (this.closeBtn) {
            this.closeBtn.node.on(Button.EventType.CLICK, this.onCloseBtnClick, this);
        }
    }

    private createLanguageItems() {
        if (!this.contentNode || !this.itemTemplate) {
            console.error("LanguageSelectPanel: contentNode or itemTemplate is null");
            return;
        }

        // 清除旧的语言项
        this.languageItems.clear();
        this.contentNode.removeAllChildren();

        const availableLanguages = LanguageUtils.getAvailableLanguages();
        
        availableLanguages.forEach((lang, index) => {
            const item = instantiate(this.itemTemplate);
            item.active = true;
            
            // 设置语言名称
            const nameLabel = item.getChildByName("NameLabel");
            if (nameLabel) {
                const label = nameLabel.getComponent(Label);
                if (label) {
                    label.string = LanguageUtils.getLanguageDisplayName(lang);
                }
            }

            // 设置语言代码
            const codeLabel = item.getChildByName("CodeLabel");
            if (codeLabel) {
                const label = codeLabel.getComponent(Label);
                if (label) {
                    label.string = `(${lang.toUpperCase()})`;
                    label.color = new Color(150, 150, 150);
                }
            }

            // 设置选中标记
            const checkMark = item.getChildByName("CheckMark");
            if (checkMark) {
                checkMark.active = false;
            }

            // 绑定点击事件
            const button = item.getComponent(Button);
            if (!button) {
                item.addComponent(Button);
            }
            
            item.on(Button.EventType.CLICK, () => {
                this.onLanguageItemClick(lang);
            }, this);

            this.contentNode.addChild(item);
            this.languageItems.set(lang, item);
        });
    }

    private onLanguageItemClick(language: LanguageType) {
        if (this.currentSelectedLang === language) {
            return;
        }

        AudioManager.I.playSfx("click");
        
        this.currentSelectedLang = language;
        LanguageUtils.setLanguage(language);
        this.updateSelection();
        
        // 延迟关闭面板，让用户看到选择效果
        this.scheduleOnce(() => {
            this.close();
        }, 0.3);
    }

    private updateSelection() {
        this.languageItems.forEach((item, lang) => {
            const checkMark = item.getChildByName("CheckMark");
            if (checkMark) {
                checkMark.active = lang === this.currentSelectedLang;
            }

            // 更新背景色或边框来表示选中状态
            const bg = item.getChildByName("Bg");
            if (bg) {
                const sprite = bg.getComponent(Sprite);
                if (sprite) {
                    if (lang === this.currentSelectedLang) {
                        sprite.color = new Color(100, 200, 100, 255);
                    } else {
                        sprite.color = new Color(255, 255, 255, 255);
                    }
                }
            }
        });
    }

    private onCloseBtnClick() {
        AudioManager.I.playSfx("click");
        this.close();
    }

    onDestroy() {
        if (this.closeBtn) {
            this.closeBtn.node.off(Button.EventType.CLICK, this.onCloseBtnClick, this);
        }
        
        this.languageItems.forEach((item) => {
            item.targetOff(this);
        });
        
        super.onDestroy();
    }
}