/** @format */
import {BaseUI} from './BaseUI'
import {Data, Mgr} from '../GameControl'
import {ccUtils} from '../utils/ccUtils'
import {list, node, observer, render} from '../mobx/observer'
import List from '../uiutils/List'
import {ATTR_NAME, EQUIPMENT, GOODS, LANGUAGE_TYPE, PROFESSION} from '../enums/Enum'
import {UI} from '../enums/UI'
import {msgCmd} from '../proto/msg_cmd'
import {IEquip, IRole} from '../interface/GlobalInterface'

const {ccclass, property} = cc._decorator

@ccclass
@observer
export class EquipUI extends BaseUI {
    @node('bigRoleList')
    bigRoleListNode: cc.Node
    @node('chooseType')
    chooseTypeNode: cc.Node
    equipSlots: cc.Node[]
    @list('smallRoleList')
    smallRoleList: List
    @list('bigRoleList/roleList')
    bigRoleList: List
    @list('equipList')
    equipList: List
    chooseRole: IRole
    chooseType: EQUIPMENT = EQUIPMENT.none
    equips: IEquip[] = []

    onLoad() {
        this.equipSlots = cc.find('equipSlots', this.node).children
    }

    onShow(args, fromUI: number) {
        Mgr.net.add(msgCmd.cmd_hero_wear_equip_rsp, this, this.onEquipWearRsp)
        Mgr.net.add(msgCmd.cmd_equip_upgrade_star_rsp, this, this.initRoleUI)
        Mgr.net.add(msgCmd.cmd_equip_upgrade_rsp, this, this.initRoleUI)
        cc.find('roleList/lb', this.bigRoleListNode).active = Data.user.roles.length == 0
        if (Data.user.roles.length > 0) {
            this.chooseRole = Data.user.roles[0]
        }
        this.smallRoleList.numItems = Data.user.roles.length
        this.bigRoleList.numItems = Data.user.roles.length
        this.onChooseEquipItemClick(null, '0')
        this.initRoleUI()
        Mgr.ui.showTop(this, [GOODS.coin, GOODS.diamond])
        //3.当拥有的装备（包括佩戴的装备）可合成突破时，装备界面中【突破】按钮上拥有红点提示；装备合成界面中对应可合成的“装备图标”右上角拥有红点提示
        cc.find('btn_break/red_dots', this.node).active = Data.user.equips.some(
            equip => Mgr.goods.checkEquipBreakNeed(equip).canUp,
        )
    }

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

    initRoleUI() {
        let iRole = this.chooseRole
        //英雄
        let roleNode = cc.find('role', this.node)
        roleNode.active = iRole != undefined

        if (iRole) {
            Mgr.global.buildIRole(iRole.hero, iRole)
            ccUtils.setLabel(iRole.cfg.name, roleNode, 'roleName')
            ccUtils.setLabel(`lv.${iRole.hero.lv}`, roleNode, 'lv')
            this.loadTexImg(`Public/role/streamer_${iRole.cfg.qualityType}`, roleNode, 'streamer')
            this.loadTexImg(`Public/role/role_type_${iRole.cfg.profession}`, roleNode, 'role_type')
            this.loadTexImg(`Public/role/base_light_${iRole.cfg.qualityType}`, roleNode, 'base_light')
            Mgr.global.initRoleSpine(iRole, roleNode, 'spine')
            ccUtils.instantChildren(cc.find('stars/star', roleNode), iRole.grade)
            //属性值
            let attack = iRole.cfg.profession == PROFESSION.mage ? iRole.spellAttack : iRole.attack
            let attackIcon = iRole.cfg.profession == PROFESSION.mage ? ATTR_NAME.spellAttack : ATTR_NAME.attack
            this.loadTexImg(`Public/allAttr/${attackIcon}`, roleNode, 'attackIcon')
            ccUtils.setLabel(Math.toKMBNum(attack), roleNode, 'attack')
            ccUtils.setLabel(Math.toKMBNum(iRole.HP), roleNode, 'hp_lb')

            //人物装备
            for (let i = 1; i <= Data.main.equipMaxNum; i++) {
                let equipSlot = this.equipSlots[i - 1]
                let equipNode = cc.find('equip', equipSlot)
                let red = cc.find('red_dots', equipSlot)
                let equip = iRole.equips[i - 1]
                equipNode.active = equip != null
                red.active = false
                if (equip) {
                    Mgr.global.initEquipItem(equip, equipNode, this)
                    equipNode['equip'] = equip
                    red.active =
                        Mgr.goods.roleIsUp(iRole) &&
                        (Mgr.goods.checkEquipLevelNeed(equip).canUp || Mgr.goods.checkEquipBreakNeed(equip).canUp)
                }
            }
        }
    }

    initChooseTypeUI() {
        let icon = cc.find('btn_chooseType/type_icon', this.node)
        icon.active = this.chooseType > 0
        if (icon.active) {
            this.loadTexImg(`Public/equip/type_icon${this.chooseType}`, this.node, 'btn_chooseType/type_icon')
        }
        ccUtils.setLabel(
            this.chooseType == EQUIPMENT.none ? LANGUAGE_TYPE.all : LANGUAGE_TYPE[EQUIPMENT[this.chooseType]],
            this.node,
            'btn_chooseType/label',
        )
        let items = cc.find('items', this.chooseTypeNode).children
        for (let i = 0; i < items.length; i++) {
            let item = items[i]
            cc.find('choose', item).active = this.chooseType == i
        }
    }

    initEquipByType() {
        this.equips.length = 0
        this.equips = Data.user.equips.filter(
            equip => !equip.equip.hero && (!this.chooseType || this.chooseType == equip.cfg.type),
        )
        this.equipList.numItems = this.equips.length
        cc.find('equipList/lb', this.node).active = this.equips.length == 0
    }

    initRoleItem(node: cc.Node, index: number) {
        let iRole = Data.user.roles[index]
        let role = cc.find('role', node)
        Mgr.global.initRoleItem(iRole, role, this)
        let icon_battle = cc.find('icon_battle', node)
        icon_battle.active = Mgr.goods.roleIsUp(iRole)
        node['iRole'] = iRole
        cc.find('select_1', node).active = this.chooseRole && this.chooseRole.hero.sid == iRole.hero.sid
        cc.find('red_dots', node).active = Mgr.goods.checkRoleWearEquipUp(iRole) || Mgr.goods.checkRoleEquipUp(iRole)
    }

    initEquipItem(node: cc.Node, index: number) {
        let equip = this.equips[index]
        let equipNode = cc.find('equip', node)
        Mgr.global.initEquipItem(equip, equipNode, this)
        cc.find('red_dots', node).active = this.chooseRole && Mgr.goods.checkEquipWearUp(this.chooseRole, equip)
        node['equip'] = equip
    }

    //网络事件=======================================
    onEquipWearRsp() {
        this.initRoleUI()
        this.smallRoleList.numItems = Data.user.roles.length
    }

    //触发事件=======================================
    @render
    freshRoleAndEquips() {
        let equipDirty = Data.user.equipsDirty
        this.initRoleUI()
        this.initEquipByType()
    }

    // 点击事件=======================================
    onRoleClick(e) {
        this.chooseRole = e.target['iRole']
        this.smallRoleList.numItems = Data.user.roles.length
        this.bigRoleList.numItems = Data.user.roles.length
        this.freshRoleAndEquips()
        this.bigRoleListNode.active = false
    }

    onAllRoleClick() {
        this.bigRoleListNode.active = !this.bigRoleListNode.active
    }

    onAllEquipClick() {
        this.chooseTypeNode.active = true
    }

    onChooseEquipItemClick(e, detail) {
        this.chooseType = parseInt(detail)
        this.chooseTypeNode.active = false
        this.initChooseTypeUI()
        this.initEquipByType()
    }

    onEquipClick(e) {
        Mgr.ui.show(UI.EquipDetailUI, {equip: e.target['equip'], role: this.chooseRole})
    }

    onEquipAttrClick(e) {
        Mgr.ui.show(UI.EquipAttrUI, this.chooseRole)
    }

    onEquipBreakClick() {
        Mgr.ui.show(UI.EquipBreakUI)
    }

    onEquipSlotClick(e) {
        let node = e.target
        let index = node.parent.children.indexOf(node)
        if (!cc.find('equip', node).active) {
            this.onChooseEquipItemClick(null, index + 1)
        }
    }
}