marineparkclient/assets/script/ui/UIFishBookLayer.ts

// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

import ResManager from "../../common/res/ResManager";
import UIBase from "../../common/ui/base/UIBase";
import { PanelType } from "../../common/ui/config/SysDefine";
import UIBaseEv from "../../common/ui/uiEv/UIBaseEv";
import { MSG_Event } from "../DefineMsg/LogicMsg";
import { composeObj, valueObj } from "../Model/data/baseObject";
import { IDDef } from "../Model/data/excelDefine";
import ProxyClientDataMgr from "../Model/ProxyClientDataMgr";
import fishListModule from "../module/fishListModule";
import venueListModule from "../module/venueListModule";
import UIFishExhibitionLayer from "./UIFishExhibitionLayer";

const {ccclass, property} = cc._decorator;

export enum TIER_INDEX{
    NORMAL_BTN = 0,
    VENUE_BTN = 100,
    FISH_TYPE = 200
}
@ccclass
export default class UIFishBookLayer extends UIBaseEv {

    panelType: PanelType = PanelType.PopUp;

    @property(cc.ScrollView)
    venueTypeScrollView:cc.ScrollView = null; 
    @property(cc.ScrollView)
    fishTypeScrollView:cc.ScrollView = null; 
    @property(cc.Button)
    cancle:cc.Button = null;
    @property(cc.Layout)
    bookAreaLayer:cc.Layout = null;
    @property(cc.Node)
    clickMask:cc.Node = null;
 
    maxVenueTypeNum = 8;
    maxFishTypeNum = 50;
    _venueTypeContent = null;
    _fishTypeContent = null;
    venueTypeElement:cc.Node[]= []; 
    fishTypeElement:cc.Node[] = [];
    fishElementPreFabPool:cc.NodePool = new cc.NodePool;

    tArrBookVenue:composeObj[] = [];

    onClickEvent(event,customEventData){
        let node = event.target;
        let button = node.getComponent(cc.Button);

        let idx = +customEventData;
        if (idx === 0) {
            //this.node.active = false;
            //CMD_Config.ins.popManager().closeAction(this.node)
            UIFishBookLayer.closeView();   
        }
        else if(idx >= TIER_INDEX.VENUE_BTN && idx < TIER_INDEX.FISH_TYPE)
        {
            //this.initTypeFish();
        }
        else if(idx >= TIER_INDEX.FISH_TYPE)
        {
            let data = {};
            
            //UIFishExhibitionLayer.openView();
            //CMD_Config.ins.popManager().getComponent(PopManager).openPanel(4,{});  
            //ToolFunc.ins.openAction(node)
            //CMD_Config.ins.popManager().openAction(node)
        }
    } 


    init(parent,data)
    {


    }

    async initTypeBook()
    {
        let PanelPath = "Prefabs/venueListModule";
        // let pre = await ResManager.inst.loadPrefab(PanelPath);
        // if(!pre) {
        //     cc.warn(`${PanelPath} 资源加载失败, 请确认路径是否正确`);
        //     return ;
        // }

        if(this.venueTypeElement.length === 0)
        {
            for (let i = 0; i < this.maxVenueTypeNum; i++) {
                let item:cc.Node = await this.addChildPerfab(PanelPath,this._venueTypeContent); 
                this.venueTypeElement.push(item);
                item.setPosition(cc.v2((i+1)*10+i*item.width,-(0.5*this._venueTypeContent.height))); 
            }
        }
        this._venueTypeContent.width = this.maxVenueTypeNum * (10+this.venueTypeElement[0].width) + 10;
        this.updateVenueTypeBtn();

    }

    updateVenueTypeBtn()
    {
        for (let i = 0; i < this.maxVenueTypeNum; i++) {
            this.venueTypeElement[i].getComponent(venueListModule).onShow(this.tArrBookVenue[i],i);
        }

        // let clickEventHander = new cc.Component.EventHandler(); 
        // clickEventHander.target = this.node;
        // clickEventHander.component = "FishBookLayer";
        // clickEventHander.handler = "onClickEvent";
        // clickEventHander.customEventData = ""+(TIER_INDEX.VENUE_BTN+idx);
        // item.getComponent(cc.Button).clickEvents.push(clickEventHander);           
        

        //根据data附上 image的地址  还有名字
        // cc.resources.load(data.str,cc.SpriteFrame,function(err,spriteFrame:cc.SpriteFrame)
        // {      
        //     item.normalSprite = spriteFrame;
        // })

        // let itemLable = item.getComponentInChildren(cc.Label);
        // itemLable.string = "龟岛";  
    }

    async initTypeFish()
    {   
        //this.recycleFishElement();
        
        let PanelPath = "Prefabs/fishListModule";
        let pre = await ResManager.inst.loadPrefab(PanelPath);
        if(!pre) {
            cc.warn(`${PanelPath} 资源加载失败, 请确认路径是否正确`);
            return ;
        }

        if (this.fishTypeElement.length === 0)
        {
            for (let i = 0; i < this.maxFishTypeNum; i++) {

                if(this.fishElementPreFabPool.size() === 0)
                {
                    let tempItem = cc.instantiate(pre);
                    this.fishElementPreFabPool.put(tempItem);
                }

                let item = this.fishElementPreFabPool.get();
                this._fishTypeContent.addChild(item);  
                this.fishTypeElement.push(item);
                let heightIndex = Math.ceil((i+1)/2) - 1;    
                let widthIndex = i % 2;  
                item.setPosition(cc.v2((widthIndex+1)*20+widthIndex*item.width + 0.5* item.width,-((heightIndex + 1)*20+heightIndex*item.height)));
                item.active = false;           
            }
        }

        let heightIndex = Math.ceil(8/2);  
        this._fishTypeContent.height = heightIndex * (20+this.fishTypeElement[0].height) + 20

    }


    recycleFishElement()
    {
        for (let i = 0; i < this.maxFishTypeNum; i++) {            
            this.fishTypeElement[i].getComponent(fishListModule).recycleFish();
        }
    }

    updateFishTypeElement(objData:composeObj)
    { 
        this.recycleFishElement();
        let tempObj = objData.getMemberMap();
        let tArrFashTypeObj = [];
        for (let i of tempObj.values()) {
            tArrFashTypeObj.push(i as composeObj);
        }

        let heightIndex = Math.ceil(tArrFashTypeObj.length/2); 
        this._fishTypeContent.height = heightIndex * (20+this.fishTypeElement[0].height) + 20

        for (let i = 0; i < tArrFashTypeObj.length; i++) {
            this.fishTypeElement[i].getComponent(fishListModule).onShow(tArrFashTypeObj[i]);
        }
        // let callFunc:Function = function (event?) {
        //     let customEventData = ""+(i+TIER_INDEX.FISH_TYPE);
        //     this.onClickEvent(event,customEventData);
        // }
        // item.on(cc.Node.EventType.TOUCH_END,callFunc,this);

        // let itemLable = item.getComponentInChildren(cc.Label);
        // itemLable.string = "龟岛";  
    }
    // LIFE-CYCLE CALLBACKS
    onShow()
    {
        this.initEvent();
        this._venueTypeContent = this.venueTypeScrollView.content;
        this._fishTypeContent = this.fishTypeScrollView.content;
        let fashingObj = ProxyClientDataMgr.ins().getComposeObj(IDDef.TUJIAN)   
        let tempObj = fashingObj.getMemberMap();
        for (let i of tempObj.values()) {
            this.tArrBookVenue.push(i as composeObj);
        }
        this.initTypeBook();
        this.initTypeFish();
        // this.initEvent();
        // this.updateGold();
    }

    onLoad () {
        this.clickMask.active = false;  
    }

    maskOn()
    {
        this.clickMask.active = true; 
    }

    maskOff()
    {
        this.clickMask.active = false; 
    }

    onEnable(){
        this.fishTypeScrollView.node.on('scroll-began',this.maskOn,this);   
        this.fishTypeScrollView.node.on('scroll-ended',this.maskOff,this);   
    }

    onDisable()
    {
        this.fishTypeScrollView.node.off('scroll-began',this.maskOn,this);   
        this.fishTypeScrollView.node.off('scroll-ended',this.maskOff,this);    
    }


    initEvent()
    {
        this.registEvent(MSG_Event.FishBookNotice,(x)=>{
            this.updateFishTypeElement(this.tArrBookVenue[x])
        })
    }

    start () {


    }
    // update (dt) {}
}