hk_client_fix/assets/Module/Room/Script/RoomList.js

cc.Class({
    extends: cc.BaseClass,
    properties: {
        //分页控制按钮
        pagePrevBtn: {
            default: null,
            type: cc.Button,
            displayName: '上一页按钮'
        },
        PageScrollView: {
            default: null,
            type: cc.ScrollView,
            displayName: '分页视图'
        },
        content: {
            default: null,
            type: cc.Node,
            displayName: '分页视图内容'
        },
        pageNextBtn: {
            default: null,
            type: cc.Button,
            displayName: '下一页按钮'
        },
        // 页码按钮容器
        pageButtonsContainer: {
            default: null,
            type: cc.Node,
            displayName: '页码按钮容器'
        },
        // 页码按钮预制体
        pageButtonPrefab: {
            default: null,
            type: cc.Prefab,
            displayName: '页码按钮预制体'
        },
        // 分页数据
        m_currentPage: 1,//当前页码
        m_pageSize: 20,//每页显示的房间数量
        m_totalPages: 1,//总页数
        m_pagedRoomList: [],//分页的房间列表
        // 完整的房间列表数据
        m_RoomList: [],        // 完整的房间列表数据
        //创建空数组，用于接收服务器返回的大厅列表数据
        m_LobbyList: [],
    },
    cotor: function () {
        //创建空数组，用于接收服务器返回的大厅列表数据
        this.m_LobbyList = [],
            this.m_Hook = null;

        // 分页相关 
        this.m_currentPage = 1;//当前页码
        this.m_pageSize = 20;//每页显示的房间数量
        this.m_totalPages = 0; // 总页数
        this.m_pagedRoomList = [];//分页的房间列表
        this.m_RoomList = []    // 完整的房间列表数据
    },
    start() {
        this.getLobbyList();
    },
    onLoad() {
        // 生成模拟数据用于测试分页功能
        // this.generateMockData();
        setInterval(() => {
            this.getLobbyList();
        }, 4000);
        this.InitView();
        this.updatePageData();
    },

    // 初始化列表控件
    initListCtrl: function () {
        if (!this.m_ListCtrl) {
            this.m_ListCtrl = this.$('@CustomListCtrl');
            if (this.m_ListCtrl) {
                this.m_ListCtrl.InitList(0, 'roomListItem', this);
            }
        }
    },
    // 初始化页码按钮
    initPageButtons: function () {
        if (!this.pageButtonsContainer || !this.pageButtonPrefab) {
            console.warn('页码按钮容器或预制体未设置');
            return;
        }
        // 清空现有页码按钮
        this.pageButtonsContainer.removeAllChildren();
        console.log('初始化页码按钮容器');
    },
    InitView: function () {
        this.initListCtrl();
        this.initPageButtons();
    },
    OnShowView: function () {
        this.InitView();
        ShowO2I(this.node);
    },
    // 生成模拟数据用于测试分页功能
    // generateMockData: function () {
    //     // 生成50条模拟数据
    //     for (let i = 1; i <= 280; i++) {
    //         const roomData = {
    //             dwRoomID: 10000 + i, // 房间ID
    //             dwClubID: 0, // 俱乐部ID（部分房间有俱乐部）
    //             byPartID: 0, // 分区ID
    //             wKindID: 21201, // 游戏类型
    //             dwRules: new Array(67158024, 30, 10, 0, 0), // 房间规则数组（5个元素）
    //             dwServerRules: 589824, // 服务器规则
    //             wProgress: 0, // 当前局数
    //             dwCreateTime: Math.floor(Date.now() / 1000) - Math.floor(Math.random() * 3600), // 创建时间（秒级时间戳）
    //             dwCreaterID: 101, // 创建者ID
    //             byPlayerCnt: 1, // 玩家人数（1-4人）
    //             dwUserID: new Array(97, 0, 0, 0) // 玩家ID数组（4个元素）
    //         };

    //         this.m_RoomList.push(roomData);
    //     }
    // },

    //获取大厅整个列表 
    getLobbyList: function () {
        //获取大厅整个列表 
        let obj = new CMD_C_GetLobbyList();
        obj.dwUserID = g_GlobalUserInfo.GetGlobalUserData().dwUserID;
        obj.wType = 0;
        let LoginMission = new CGPLoginMission(this, MDM_GP_GET_SERVER, SUB_GP_GET_LOBBY_LIST, obj);
        //列表返回 
        // onSocketGetLobbyList
        //更新用户状态  //用户状态 
        //onSocketUserGameStatus 
    },
    //接受服务器返回的大厅列表数据
    onSocketGetLobbyList: function (data, size) { //CMD_S_GetLobbyList  
        //服务器返回的大厅列表数据不为空
        if (data.wListCnt > 0) {
            this.m_RoomList = data.ListInfo; //更新房间列表数据
            console.log("房间列表数据更新成功！", m_RoomList);
            // 立即更新分页数据
            this.m_currentPage = 1;
            this.updatePageData();
            this.updatePageControls();
        }
        //存储获取到的大厅列表数据
        this.m_LobbyList = data;
    },
    //初始化分页组件
    initPagination: function () {
        if (this.pagePrevBtn) {
            // 上一页按钮点击事件
            this.pagePrevBtn.node.on('click', this.onPrevPage, this);
        }
        if (this.pageNextBtn) {
            // 下一页按钮点击事件
            this.pageNextBtn.node.on('click', this.onNextPage, this);
        }
    },
    // 更新分页控制状态
    updatePageControls: function () {
        //当当前页为第一页时，禁用上一页按钮
        if (this.m_currentPage == 1) {
            this.pagePrevBtn.interactable = false;
        }
        if (this.m_currentPage > 1) {
            this.pagePrevBtn.interactable = true;
            //当当前页不是第一页时，隐藏Background，显示mark
            var Background = this.pagePrevBtn.node.children[0];
            Background.active = false;
            var mark = this.pagePrevBtn.node.children[1];
            mark.active = true;
        } else {
            // 当前页是第一页时，禁用上一页按钮
            this.pagePrevBtn.interactable = false;
            // 隐藏Background，显示Background
            var Background = this.pagePrevBtn.node.children[0];
            Background.active = true;
            var mark = this.pagePrevBtn.node.children[1];
            mark.active = false;
        }
        //当当前页为最后一页时，禁用下一页按钮
        if (this.m_currentPage == this.m_totalPages) {
            this.pageNextBtn.interactable = false;
            //当当前页不是最后一页时，隐藏mark，显示Background
            var Background = this.pageNextBtn.node.children[0];
            Background.active = true;
            var mark = this.pageNextBtn.node.children[1];
            mark.active = false;
        } else {
            // 当前页不是最后一页时，启用下一页按钮
            this.pageNextBtn.interactable = true;
            // 隐藏Background，显示mark
            var Background = this.pageNextBtn.node.children[0];
            Background.active = false;
            var mark = this.pageNextBtn.node.children[1];
            mark.active = true;
        }
    },
    // 上一页
    onPrevPage: function () {
        cc.gSoundRes.PlaySound('Button');
        this.m_totalPages = Math.ceil(this.m_RoomList.length / this.m_pageSize);
        console.log('🎯 上一页按钮被点击了！');
        console.log('当前页:', this.m_currentPage, '总页数:', this.m_totalPages);
        if (this.m_currentPage > 1) {
            this.m_currentPage--;
            this.updatePageData();
            this.updatePageControls();
        }
    },
    // 下一页
    onNextPage: function () {
        cc.gSoundRes.PlaySound('Button');
        this.m_totalPages = Math.ceil(this.m_RoomList.length / this.m_pageSize);
        console.log('🎯 下一页按钮被点击了！');
        console.log('当前页:', this.m_currentPage, '总页数:', this.m_totalPages);
        if (this.m_currentPage < this.m_totalPages) {
            this.m_currentPage++;
            this.updatePageData();
            this.updatePageControls();
        } else {
            console.log('已经是最后一页，无法继续下一页');
        }
    },
    // 更新分页数据
    updatePageData: function () {
        // if (!this.m_RoomList || this.m_RoomList.length === 0) {
        //     this.m_pagedRoomList = [];
        //     return;
        // }
        // 计算分页数据
        const startIndex = (this.m_currentPage - 1) * this.m_pageSize;
        const endIndex = Math.min(startIndex + this.m_pageSize, this.m_RoomList.length);
        console.log('分页数据范围:', startIndex, endIndex);
        this.m_pagedRoomList = this.m_RoomList.slice(startIndex, endIndex);
        // 更新总页数
        this.m_totalPages = Math.ceil(this.m_RoomList.length / this.m_pageSize);
        if (this.m_totalPages === 0) {
            this.m_totalPages = 1;
        }
        // 更新页码按钮显示
        this.updatePageButtons();
        // 渲染分页数据到UI
        this.renderPagedRoomList();
    },

    // 渲染分页后的房间列表
    renderPagedRoomList: function () {
        // 清空当前列表
        this.m_ListCtrl.RemoveListPre(0);
        // console.log('当前页的房间数据:', this.m_pagedRoomList);
        // 渲染当前页的房间数据
        for (let i = 0; i < this.m_pagedRoomList.length; i++) {
            this.m_ListCtrl.InsertListInfo(0, this.m_pagedRoomList[i]);
        }
        // 更新无房间提示
        // this.$('NoRoom').active = this.m_pagedRoomList.length === 0;
    },
    // 更新页码按钮显示
    updatePageButtons: function () {
        if (!this.pageButtonsContainer || !this.pageButtonPrefab) {
            return;
        }
        // 清空现有页码按钮
        this.pageButtonsContainer.removeAllChildren();
        if (this.m_totalPages <= 1) {
            this.createPageButton(1);
            return;
        }
        // 最多显示7个页码按钮（包括省略号）
        const maxVisiblePages = 6;
        let startPage = 1;
        let endPage = this.m_totalPages;
        // 计算显示的页码范围
        if (this.m_totalPages > maxVisiblePages) {
            if (this.m_currentPage <= 4) {
                // 当前页在前4页，显示1-5...最后一页
                startPage = 1;
                endPage = 5;
            } else if (this.m_currentPage >= this.m_totalPages - 3) {
                // 当前页在后4页，显示第一页...最后5页
                startPage = this.m_totalPages - 4;
                endPage = this.m_totalPages;
            } else {
                // 当前页在中间，显示当前页前后各2页
                startPage = this.m_currentPage - 2;
                endPage = this.m_currentPage + 2;
            }
        }
        // console.log('生成页码按钮:', startPage, '到', endPage, '总页数:', this.m_totalPages);
        // 添加第一页按钮（如果需要省略号）
        if (startPage > 1) {
            this.createPageButton(1);
            if (startPage > 2) {
                this.createEllipsisButton();
            }
        }
        // 添加页码按钮
        for (let i = startPage; i <= endPage; i++) {
            this.createPageButton(i);
        }
        // 添加最后一页按钮（如果需要省略号）
        if (endPage < this.m_totalPages) {
            if (endPage < this.m_totalPages - 1) {
                this.createEllipsisButton();
            }
            this.createPageButton(this.m_totalPages);
        }
    },

    // 创建页码按钮
    createPageButton: function (pageNum) {
        const pageButton = cc.instantiate(this.pageButtonPrefab);
        const buttonComponent = pageButton.getComponent(cc.Button);
        const pageLabel = pageButton.getChildByName('Label')
        const labelComponent = pageButton.getChildByName('Label').getComponent(cc.Label);
        // 设置按钮文本（当前页为#A80101，其他的页码都是#FFFFFF）
        labelComponent.string = pageNum.toString();
        labelComponent.fontSize = 30;
        if (pageNum === this.m_currentPage) {
            pageLabel.color = new cc.Color(168, 1, 1)
        }
        // 设置按钮点击事件
        buttonComponent.node.on('click', () => {
            this.gotoPage(pageNum);
        });
        // 设置当前页按钮样式
        if (pageNum === this.m_currentPage) {
            pageButton.getComponent(cc.Button).interactable = false;
        }

        this.pageButtonsContainer.addChild(pageButton);
    },
    // 创建省略号按钮
    createEllipsisButton: function () {
        const ellipsisNode = new cc.Node();
        const label = ellipsisNode.addComponent(cc.Label);
        label.string = '...';
        label.fontSize = 30;
        label.node.color = new cc.Color(0, 0, 0);
        this.pageButtonsContainer.addChild(ellipsisNode);
    },

    // // 跳转到指定页
    gotoPage: function (pageNum) {
        // console.log('🎯 页码按钮被点击了！目标页码:', pageNum, '总页数:', this.m_totalPages);
        if (pageNum >= 1 && pageNum <= this.m_totalPages) {
            this.m_currentPage = pageNum;
            this.updatePageData();
            this.updatePageControls();
        }
    },
    DeleteRoom: function (dwRoomID) {
        if (!this.node.active || !this.m_ListCtrl) return;
        this.m_ListCtrl.ForEachCtrl(0, function (item) {
            if (dwRoomID == item.m_dwRoomID) item.node.active = false;
        }.bind(this));
    },
});