/** @format */
import {BaseUI} from './BaseUI'
import {Mgr} from '../GameControl'
import {ccUtils} from '../utils/ccUtils'
import {observer, render, node, label, editBox, list} from '../mobx/observer'
import {msgCmd} from '../proto/msg_cmd'
import List from '../uiutils/List'
import {rankingData, rankingDataRsp} from '../proto/game'
import {rankingInfo} from '../proto/typedef'
import {i18nLabel} from '../uiutils/i18nLabel'
import {StageInfoConfig} from '../config/StageInfoConfig'
import {LANGUAGE_TYPE, Ranking, RankType} from '../enums/Enum'
import {UI} from '../enums/UI'
import {SOUND} from '../enums/Sound'

const {ccclass, property} = cc._decorator

interface rankItem {
    checkDone: boolean
    rankListData: rankingInfo[]
    userRankInfo: rankingInfo
}

@ccclass
@observer
export class RankListUI extends BaseUI {
    @node('common_frame4')
    userNode: cc.Node
    @node('rankTypeList')
    rankTypeList: cc.Node
    @list('bottom1')
    rankList: List

    rankingCode: RankType[] = [RankType.stageRanking, RankType.powerRanking]
    rankAllData: Map<RankType, rankItem> = new Map()

    selType: RankType

    onShow(args, fromUI: number) {
        Mgr.net.add(msgCmd.cmd_ranking_data_rsp, this, this.onRankRsp)
        for (let item of this.rankingCode) {
            let data: rankingData = {type: item},
                rank: rankItem = {
                    checkDone: false,
                    rankListData: [],
                    userRankInfo: null,
                }
            this.rankAllData.set(item, rank)
            Mgr.net.send(msgCmd.cmd_ranking_data, data)
        }
        this.selType = RankType.stageRanking
        ccUtils.setTogglesChecked(0, this.rankTypeList)
    }

    onHide(): any {
        Mgr.event.removeAll(this)
    }

    //虚位以待
    initVacant(node: cc.Node, isVacant: boolean) {
        isVacant ? ccUtils.setLabel(LANGUAGE_TYPE.isVacant, node, 'name') : ''
        //不可视其他节点
        cc.find('player_frame_1', node).active = !isVacant
        cc.find('levelNum', node).active = !isVacant
        cc.find('block3', node).active = !isVacant
    }

    //初始化角色信息
    initInfo(node: cc.Node, info: rankingInfo, isPre: boolean) {
        this.initVacant(node, false)
        //排名名次
        let baseUrl = isPre ? 'rank_bottom_1/rankNum' : 'type_base1/rankNum'
        ccUtils.setLabel(info.ranking.toString(), node, baseUrl)
        //玩家头像
        this.loadTexImg(info.role.avatar.toString(), node, 'player_frame_1/0')
        //玩家名称
        ccUtils.setLabel(info.role.nickname, node, 'name')
        //等级
        cc.find('levelNum', node).getComponent(i18nLabel).setParamByIndex(info.role.level.toString(), 0)
        //等级&战力图标显示
        cc.find('block3/icon_rank_1', node).active = this.selType == RankType.stageRanking
        cc.find('block3/icon_rank_2', node).active = this.selType == RankType.powerRanking
        //等级&战力信息显示
        cc.find('block3/level', node).active = this.selType == RankType.stageRanking
        cc.find('block3/power', node).active = this.selType == RankType.powerRanking
        cc.find('block3/label', node).active = this.selType == RankType.powerRanking
        if (this.selType == RankType.stageRanking) {
            ccUtils.setLabel(
                `${Mgr.i18n.getLabel(StageInfoConfig[info.num].name)}-${StageInfoConfig[info.num].des}`,
                node,
                'block3/level',
            )
        } else {
            ccUtils.setLabel(info.num.toString(), node, 'block3/label')
        }
    }

    initUI() {
        let data = this.rankAllData.get(this.selType),
            listData = data.rankListData,
            user = data.userRankInfo
        //初始化前三名
        for (let i = Ranking.first; i <= Ranking.third; i++) {
            let preNode = cc.find(`rankPre${i + 1}`, this.node)
            listData.length > i ? this.initInfo(preNode, listData[i], true) : this.initVacant(preNode, true)
        }
        //初始化排行
        this.rankList.numItems = listData.length - 3 > 0 ? listData.length - 3 : 0
        //初始化用户信息
        this.initInfo(this.userNode, user, false)
    }

    initRankListItem(node: cc.Node, index: number) {
        let data = this.rankAllData.get(this.selType),
            listData = data.rankListData
        this.initInfo(node, listData[index + Ranking.third + 1], false)
    }

    //UI或者其他函数=======================================

    //网络事件=======================================
    onRankRsp(data: rankingDataRsp) {
        let rank = this.rankAllData.get(data.type)
        rank.rankListData = data.list
        rank.userRankInfo = data.myslef
        rank.checkDone = true
        let checkOut = Array.from(this.rankAllData.values()).every(value => value.checkDone === true)
        if (checkOut) {
            let index = 0
            this.rankAllData.forEach(value => {
                let interact = value.rankListData.length > 0 && value.userRankInfo != undefined
                this.rankTypeList.children[index].getComponent(cc.Toggle).enabled = interact
                index += 1
            })
            this.initUI()
        }
    }

    //触发事件=======================================
    // @render
    // showRender() {}

    // 点击事件=======================================
    onToggleClick(event, data) {
        Mgr.audio.playSFX(SOUND.toggleClick)
        this.selType = parseInt(data)
        this.initUI()
    }
}