import Bag from "../bag/Bag";
import AudioUtil from "../core/AudioUtil";
import GameModel from "../core/GameModel";
import ItemUtil from "../core/ItemUtil";
import FactionTalent from "../FactionTalent";
import MsgAlert from "../game/msg/MsgAlert";
import FGAlert from "../gear_2.3.4/fgui/FGAlert";
import FGUtil from "../gear_2.3.4/fgui/FGUtil";
import SKDataUtil from "../gear_2.3.4/util/SKDataUtil";
import SKUIUtil from "../gear_2.3.4/util/SKUIUtil";
import TransformationUtil from "./TransformationUtil";

const { ccclass, property } = cc._decorator;
export default class Transformation extends cc.Component {

    /**
* 變身卡面板單例實例
     */
    public static Instance: Transformation = null;

    /**
* 變身卡面板
     */
    transformationPanel: fgui.GComponent = null;

    /**
* 分解面板
     */
    decomposePanel: fgui.GComponent = null;

    /**
* 合成面板
       */
    composePanel: fgui.GComponent = null;

    /**
* 變身卡圖鑑面板
     */
    libraryPanel: fgui.GComponent = null;

    /**
* 五行修煉面板
     */
    practicePanel: fgui.GComponent = null;

    /**
* 五行修煉數據
     */
    practiceData: any = null;
    practiceSelectIdx: number = 1;
    practiceEffCards: any = [];
    /**
* 當前顯示變身卡數據列表
     */
    showCardsList: any = [];

    /**
* 當前顯示變身卡數據列表
     */
    libraryCardsList: any = [];

    /**
* 選中展示信息的變身卡idx
     */
    selectCardIdx: number = -1;

    /**
* 選中展示信息的圖鑑中的變身卡idx
     */
    selectLibraryCardIdx: number = -1;

    /**
* 阻攔快速點擊
     */
    stopTap: boolean = false;

    /**
* 需要加載的預製體
     */
    prefabObject: any = {};

    onLoad() {
        if (Transformation.Instance === null) {
            Transformation.Instance = this;
            this.loadPrefab();
        } else {
            this.destroy();
            return;
        }
    }

    /**
* 加載預製體
     */
    loadPrefab() {
// 加載所需的預製體
        var prefabList = [
            // { url: "Prefabs/UIRole", name: "UIRole" },
        ]
        this.prefabObject = {}
        for (let item of prefabList) {
            cc.loader.loadRes(item.url, cc.Prefab, (err, prefab) => {
                if (err)
                    console.warn(err);
                else {
                    this.prefabObject[item.name] = prefab;
                }
            })
        }
    }

    /**
* 打開變身卡面板
     */
    openTransformation() {
        if (!this.transformationPanel || (this.transformationPanel && !this.transformationPanel.node && !SKUIUtil.isValid(this.transformationPanel.node))) {
            this.transformationPanel = FGUtil.create("main_ui", "transformation_panel");
            FGUtil.root().addChild(this.transformationPanel);
            this.transformationPanel.makeFullScreen();
        }
        this.selectCardIdx = -1;
        this.stopTap = false;

        FGUtil.getControl(this.transformationPanel, "alert/page").selectedIndex = 1;
// 關閉按鈕
        let closeBtn = FGUtil.getButton(this.transformationPanel, "mask")
        let mask = FGUtil.getComponent(this.transformationPanel, "alert/close")
        this.pushCloseEvent(closeBtn, this.transformationPanel, () => { Bag.Instance.closeBagPanel();FactionTalent.Instance.closeFCBagPanel(); AudioUtil.playCloseAudio() });
        this.pushCloseEvent(mask, this.transformationPanel, () => { Bag.Instance.closeBagPanel();FactionTalent.Instance.closeFCBagPanel(); AudioUtil.playCloseAudio() });

// 顯示變身卡分類按鈕
        let showTypeBtn = FGUtil.getButton(this.transformationPanel, "alert/sort_switch_btn");
        showTypeBtn.onClick(this.showTypeView, this);
        let typeViewList = FGUtil.getList(this.transformationPanel, "alert/sort/sort_list");
        typeViewList.getChildAt(0).asCom.getController("selected").selectedIndex = 1;

// 圖鑑按鈕
        let libraryBtn = FGUtil.getButton(this.transformationPanel, "alert/library_btn");
        let libraryBtn2 = FGUtil.getButton(this.transformationPanel, "alert/noCard/n9");
        libraryBtn.onClick(this.openLibraryPanel, this);
        libraryBtn2.onClick(this.openLibraryPanel, this);

// 修煉按鈕
        let practiceBtn = FGUtil.getButton(this.transformationPanel, "alert/practice_btn");
        let practiceBtn2 = FGUtil.getButton(this.transformationPanel, "alert/noCard/n13");
        practiceBtn.onClick(this.openPracticePanel, this);
        practiceBtn2.onClick(this.openPracticePanel, this);

// 使用按鈕
        let useBtn = FGUtil.getButton(this.transformationPanel, "alert/use_btn");
        useBtn.onClick(this.useCard, this);

// 分解按鈕
        let decomposeBtn = FGUtil.getButton(this.transformationPanel, "alert/info/decompose");
        decomposeBtn.onClick(this.openDecomposePanel, this);

// 背包按鈕
        var bagBtn = FGUtil.getButton(this.transformationPanel, "alert/n57");
        bagBtn.onClick(this.openBagPanel, this);

// 天演符按鈕
        FGUtil.getButton(this.transformationPanel, "alert/n58").onClick(this.openFactionTalentPanel, this);

        let cardList = FGUtil.getList(this.transformationPanel, "alert/card_list");
// 設置變身卡初始化方法
        cardList.itemRenderer = this.initCardItem.bind(this);
// 虛擬列表
        cardList.setVirtual();

// 加載背包內變身卡數據
        this.loadTransformationsData();
    }

    /**
* 加載背包內變身卡數據
     */
    loadTransformationsData() {
        var list = [];
        let itemList = GameModel.player.itemList;
        for (let itemId in itemList) {
            let count = SKDataUtil.valueForKey(GameModel.player.itemList, itemId);
            let data = ItemUtil.getItemData(itemId)
            if (!data) continue
            if (count != null && count > 0 && data.type == 15) {
                let info = {
                    itemid: itemId,
                    count: count,
                    data: data
                };
                list.push(info);
            }
        }

        this.showCardsList = SKDataUtil.clone(list);
        FGUtil.getControl(this.transformationPanel, "alert/noCard").selectedIndex = this.showCardsList.length == 0 ? 1 : 0
        this.sortTransformations();
    }

    /**
* 顯示變身卡列表
* @param list 列表數據
     */
    showTransformationsList() {
        let cardList = FGUtil.getList(this.transformationPanel, "alert/card_list");
// 虛擬列表更新
        cardList.numItems = this.showCardsList.length;
        if (this.showCardsList.length > 0)
            this.showCardInfo(null, 0)
    }

    sortTransformations(type: number = 0) {
// 先按id排序
        this.showCardsList.sort((a, b) => {
            return a.itemid - b.itemid;
        })
        if (type > 0) {
// 類型排序
            this.showCardsList.sort((a, b) => {
                if (a.data.attrType == b.data.attrType) return 0;
                return a.data.attrType == type ? -1 : 0
            })
        }
        if (this.selectCardIdx != -1) {
            this.selectCardIdx = 0;
            this.showCardInfo(null, 0);
        }
        this.showTransformationsList();
    }

    /**
* 初始化變身卡
     */
    initCardItem(idx, obj: fairygui.GObject) {
        var item = obj.asCom;
        var card = FGUtil.getLoader(item, "card");
        var type = FGUtil.getLoader(item, "type");
        var change = FGUtil.getLoader(item, "change");
        var info = this.showCardsList[idx].data;

        var level = this.getTransformationLevel(parseInt(info.id));
        var typeIcon = this.getTransformationTypeIcon(level, info.attrType, info.id);
        card.url = `ui://main_ui/${info.icon}`;
        type.url = `ui://main_ui/${typeIcon}`;
        if (TransformationUtil.Instance.getCardsInfo(info.id).cardstate == 0 || level == 2) {
            change.url = null;
        } else
            change.url = `ui://main_ui/${this.getTransformationChangeIcon(level)}`;
        item.node["idx"] = idx;
        FGUtil.getTextField(item, "num").text = SKDataUtil.transform(this.showCardsList[idx].count);
        FGUtil.getControl(item, "selected").selectedIndex = idx == this.selectCardIdx ? 1 : 0;
        item.asButton.onClick(this.showCardInfo, this);
    }

    showCardInfo(e: Event, id: number = 0) {
        var idx;
        if (e && e.target && e.target["idx"])
            idx = e.target["idx"];
        else
            idx = id;
        this.selectCardIdx = idx;

// 選中卡片並刷新
        let cardList = FGUtil.getList(this.transformationPanel, "alert/card_list");
        cardList.refreshVirtualList();

        var cardInfo = this.showCardsList[idx];
        if (cardInfo == null) return 
        var cardData = TransformationUtil.Instance.getCardsInfo(cardInfo.itemid);
        var des = TransformationUtil.Instance.getCardDesById(cardInfo.itemid);
        var addition = TransformationUtil.Instance.getCardAddition(cardInfo.itemid, this.practiceData);
        let infoCom = FGUtil.getComponent(this.transformationPanel, "alert/info");
        FGUtil.getComponent(infoCom, "decompose").visible = this.getTransformationLevel(cardInfo.itemid) > 0 ? true : false;
        FGUtil.getControl(infoCom, "level").selectedIndex = this.getTransformationLevel(cardInfo.itemid);
FGUtil.getTextField(infoCom, "type").text = cardInfo.data.attrType == 1 ? "強" : cardInfo.data.attrType == 2 ? "抗" : "物";
        FGUtil.getLoader(infoCom, "img").url = `ui://main_ui/p${cardInfo.data.icon}`;
FGUtil.getTextField(infoCom, "num").text = `擁有:[color=#1d7e43]${SKDataUtil.transform(cardInfo.count)}[/color]張`;
        FGUtil.getTextField(infoCom, "name").text = `${cardInfo.data.name}`;
FGUtil.getTextField(infoCom, "needLevel").text = `等級需求:${cardData.relive}轉${cardData.level}級`;
FGUtil.getTextField(infoCom, "5needLevel").text = `五行等級需求:${cardData.fplevel}級`;
FGUtil.getTextField(infoCom, "eff").text = `五行修煉加成:[color=#00A03C]${addition}%[/color]`;
        FGUtil.getTextField(infoCom, "arr_info/arr_info").text = des;
        if (GameModel.player.relive < cardData.relive || (GameModel.player.relive == cardData.relive && GameModel.player.level < cardData.level)) {
            FGUtil.getTextField(infoCom, "needLevel").color = new cc.Color(255, 0, 0);
            FGUtil.getTextField(infoCom, "needLevel").strokeColor = new cc.Color(255, 255, 255);
        } else {
            FGUtil.getTextField(infoCom, "needLevel").color = new cc.Color(255, 255, 255);
            FGUtil.getTextField(infoCom, "needLevel").strokeColor = new cc.Color(0, 0, 0);
        }
        if (GameModel.player.fplevel < cardData.fplevel) {
            FGUtil.getTextField(infoCom, "5needLevel").color = new cc.Color(255, 0, 0);
            FGUtil.getTextField(infoCom, "5needLevel").strokeColor = new cc.Color(255, 255, 255);
        } else {
            FGUtil.getTextField(infoCom, "5needLevel").color = new cc.Color(255, 255, 255);
            FGUtil.getTextField(infoCom, "5needLevel").strokeColor = new cc.Color(0, 0, 0);
        }
        infoCom.visible = true;
    }

    /**
* 打開變身卡分類面板
     */
    showTypeView() {
        if (this.transformationPanel && this.transformationPanel.node) {
            var view = FGUtil.getComponent(this.transformationPanel, "alert/sort");

            var mask = FGUtil.getComponent(view, "mask");
            mask.onClick(this.hideTypeView, this);

            var list = FGUtil.getList(view, "sort_list");
            for (let i = 0; i < list.numChildren; i++) {
                list.getChildAt(i).data = i;
            }
            list.on(fgui.Event.CLICK_ITEM, this.onClickTypeItem, this);

            FGUtil.getControl(this.transformationPanel, "alert/showSortView").selectedIndex = 1;
        }
    }

    /**
* 關閉變身卡分類面板
     */
    hideTypeView() {
        if (this.transformationPanel && this.transformationPanel.node) {
            FGUtil.getControl(this.transformationPanel, "alert/showSortView").selectedIndex = 0;
        }
    }

    /**
* 點擊變身卡分類子按鈕
     */
    onClickTypeItem(item: fgui.GObject) {
        var list = FGUtil.getList(this.transformationPanel, "alert/sort/sort_list");
        for (let i = 0; i < 4; i++) {
            list.getChildAt(i).asCom.getController("selected").selectedIndex = i == item.data ? 1 : 0;
        }
        this.sortTransformations(item.data);
        this.hideTypeView();
    }

    /**
* 使用選擇的變身卡
     */
    useCard() {
        if (this.selectCardIdx >= 0 && this.showCardsList.length > 0 && this.showCardsList[this.selectCardIdx].itemid) {
            if (GameModel.player.tResid > 0) {
FGAlert.show("您已使用過變身卡，是否再次使用?", () => {
                    FGAlert.hide();
                }, () => {
                    FGAlert.hide();
                    GameModel.send("c2s_use_bagitem", {
                        roleid: GameModel.player.roleid,
                        itemid: this.showCardsList[this.selectCardIdx].itemid,
                        count: 1,
                        operateid: 4
                    })
                })
                return;
            }
            GameModel.send("c2s_use_bagitem", {
                roleid: GameModel.player.roleid,
                itemid: this.showCardsList[this.selectCardIdx].itemid,
                count: 1,
                operateid: 4
            })
        }
        else {
MsgAlert.addMsg("請先選擇變身卡");
        }
    }

    /**
* 打開分解面板
     */
    openDecomposePanel() {
        if (!this.decomposePanel || (this.decomposePanel && !this.decomposePanel.node && !SKUIUtil.isValid(this.decomposePanel.node))) {
            this.decomposePanel = FGUtil.create("main_ui", "transformation_decompose_panel");
            FGUtil.root().addChild(this.decomposePanel);
            this.decomposePanel.makeFullScreen();
        }

// 關閉按鈕
        let closeBtn = FGUtil.getButton(this.decomposePanel, "mask")
        let mask = FGUtil.getComponent(this.decomposePanel, "alert/close")
        this.pushCloseEvent(closeBtn, this.decomposePanel);
        this.pushCloseEvent(mask, this.decomposePanel);

        var info = this.showCardsList[this.selectCardIdx];
        var decomposeBtn = FGUtil.getButton(this.decomposePanel, "alert/do");
        var addBtn = FGUtil.getButton(this.decomposePanel, "alert/add");
        var reduceBtn = FGUtil.getButton(this.decomposePanel, "alert/reduce");
        var slider = FGUtil.getComponent(this.decomposePanel, "alert/slider").asSlider;
        var item = FGUtil.getComponent(this.decomposePanel, "alert/item");

// 設置滑動條的最大值和默認值
        slider.max = info.count;
        slider.value = 1;
        slider.on(fgui.Event.STATUS_CHANGED, this.onSliderChanged, this);
FGUtil.getTextField(this.decomposePanel, "alert/num").text = `數量:1張`;

// 分解的卡片圖片
        FGUtil.getLoader(item, "card").url = `ui://main_ui/${info.data.icon}`;
// 獲取分解的卡片的類型Icon
        var level = this.getTransformationLevel(parseInt(info.data.id));
        var typeIcon = this.getTransformationTypeIcon(level, info.data.attrType, info.data.id);
        FGUtil.getLoader(item, "type").url = `ui://main_ui/${typeIcon}`;

        reduceBtn.clearClick();
        reduceBtn.onClick(this.reduceSliderValue, this);
        addBtn.clearClick();
        addBtn.onClick(this.addSliderValue, this);

        decomposeBtn.clearClick();
        decomposeBtn.onClick(this.decomposeCard, this);
    }

    /**
* 滑動改變變身卡分解數量
     */
    onSliderChanged(e) {
        var value = e._value;
FGUtil.getTextField(this.decomposePanel, "alert/num").text = `數量:${value}張`;
    }

    /**
* 減少變身卡分解數量
     */
    reduceSliderValue() {
        if (this.decomposePanel && this.decomposePanel.node) {
            var slider = FGUtil.getComponent(this.decomposePanel, "alert/slider").asSlider;
            if (slider.value > 0) {
                slider.value--;
FGUtil.getTextField(this.decomposePanel, "alert/num").text = `數量:${slider.value}張`;
            }
        }
    }

    /**
* 減少變身卡分解數量
     */
    addSliderValue() {
        if (this.decomposePanel && this.decomposePanel.node) {
            var slider = FGUtil.getComponent(this.decomposePanel, "alert/slider").asSlider;
            if (slider.value < slider.max) {
                slider.value++;
FGUtil.getTextField(this.decomposePanel, "alert/num").text = `數量:${slider.value}張`;
            }
        }
    }

    /**
* 分解變身卡
     */
    decomposeCard() {
        if (this.stopTap) {
MsgAlert.addMsg("您點擊太快了");
            return;
        }
        if (this.decomposePanel && this.decomposePanel.node) {
            var slider = FGUtil.getComponent(this.decomposePanel, "alert/slider").asSlider;
            var value = slider.value;
            if (value == 0) {
MsgAlert.addMsg("請分解大於0數量的變身卡");
                return;
            }
            this.stopTap = true;

            GameModel.send("c2s_card_resolve", {
                roleid: GameModel.player.roleid,
                itemid: this.showCardsList[this.selectCardIdx].data.id,
                count: value
            })
            FGUtil.dispose(this.decomposePanel);
            this.decomposeAnimation(this.getTransformationLevel(this.showCardsList[this.selectCardIdx].data.id));
            this.scheduleOnce(() => {
                this.stopTap = false
// 分解後刷新變身卡數據並顯示
                this.loadTransformationsData();
            }, 0.3);

        }
    }

    /**
* 分解變身卡動畫
    */
    decomposeAnimation(level) {
        var t = cc.tween;
        var itemNode = new cc.Node("decomposeItem");
        itemNode.addComponent(cc.Sprite).spriteFrame;
        itemNode.getComponent(cc.Sprite).spriteFrame = ItemUtil.getItemIcon(this.getTransformationChipIcon(level));
        itemNode.getComponent(cc.Sprite).sizeMode = cc.Sprite.SizeMode.CUSTOM
        itemNode.width = 50;
        itemNode.height = 50;
        itemNode.setPosition(this.transformationPanel.node.width / 2 + 120, -this.transformationPanel.node.height + 80);
        itemNode.opacity = 0;
        itemNode.parent = this.transformationPanel.node;

        t(itemNode)
            .parallel(
                t().by(0.4, { y: 80 }),
                t().to(0.2, { opacity: 255 })
            )
            .delay(0.15)
            .call(() => {
                let bezerby = cc.bezierBy(0.5, [cc.v2(88, 10), cc.v2(130, 80), cc.v2(155, -350)]);
                itemNode.runAction(cc.sequence(cc.spawn(bezerby, cc.rotateBy(0.3, 90)), cc.removeSelf()));
            })
            .start();
    }

    /**
* 打開合成面板
     */
    openComposePanel(count, type) {
        if (!this.composePanel || (this.composePanel && !this.composePanel.node && !SKUIUtil.isValid(this.composePanel.node))) {
            this.composePanel = FGUtil.create("main_ui", "transformation_compose_panel");
            FGUtil.root().addChild(this.composePanel);
            this.composePanel.makeFullScreen();
        }

// 關閉按鈕
        let closeBtn = FGUtil.getButton(this.composePanel, "mask")
        let mask = FGUtil.getComponent(this.composePanel, "alert/close")
        this.pushCloseEvent(closeBtn, this.composePanel);
        this.pushCloseEvent(mask, this.composePanel);

        var decomposeBtn = FGUtil.getButton(this.composePanel, "alert/do");
        var addBtn = FGUtil.getButton(this.composePanel, "alert/add");
        var reduceBtn = FGUtil.getButton(this.composePanel, "alert/reduce");
        var slider = FGUtil.getComponent(this.composePanel, "alert/slider").asSlider;

// 設置滑動條的最大值和默認值
        slider.max = Math.floor(count / 2);
        slider.value = 1;
        slider.on(fgui.Event.STATUS_CHANGED, this.onSliderChangedCompose, this);
FGUtil.getTextField(this.composePanel, "alert/num").text = `數量:1張`;

// 使用合成的卡片的道具圖片
        FGUtil.getLoader(this.composePanel, "alert/n18").icon = `ui://main_ui/${type}`;
// 合成的卡片的圖片
        FGUtil.getLoader(this.composePanel, "alert/n17").icon = `ui://main_ui/${parseInt(type) + 1}`;
// 獲取分解的卡片的類型Icon

        reduceBtn.clearClick();
        reduceBtn.onClick(this.reduceSliderValueCompose, this);
        addBtn.clearClick();
        addBtn.onClick(this.addSliderValueCompose, this);

        decomposeBtn.clearClick();
        decomposeBtn.node["itemid"] = type;
        decomposeBtn.onClick(this.composeCard, this);
    }

    /**
* 滑動改變變身卡合成數量
     */
    onSliderChangedCompose(e) {
        var value = e._value;
FGUtil.getTextField(this.composePanel, "alert/num").text = `數量:${value}張`;
    }

    /**
* 減少變身卡合成數量
     */
    reduceSliderValueCompose() {
        if (this.composePanel && this.composePanel.node) {
            var slider = FGUtil.getComponent(this.composePanel, "alert/slider").asSlider;
            if (slider.value > 0) {
                slider.value--;
FGUtil.getTextField(this.composePanel, "alert/num").text = `數量:${slider.value}張`;
            }
        }
    }

    /**
* 減少變身卡合成數量
     */
    addSliderValueCompose() {
        if (this.composePanel && this.composePanel.node) {
            var slider = FGUtil.getComponent(this.composePanel, "alert/slider").asSlider;
            if (slider.value < slider.max) {
                slider.value++;
FGUtil.getTextField(this.composePanel, "alert/num").text = `數量:${slider.value}張`;
            }
        }
    }

    /**
* 合成變身卡
     */
    composeCard(e: Event) {
        if (this.stopTap) {
MsgAlert.addMsg("您點擊太快了");
            return;
        }
        if (this.composePanel && this.composePanel.node) {
            var slider = FGUtil.getComponent(this.composePanel, "alert/slider").asSlider;
            var value = slider.value;
            if (value == 0) {
MsgAlert.addMsg("請合成大於0數量的變身卡");
                return;
            }
            this.stopTap = true;

            var itemId;
            if (e && e.target && e.target["itemid"]) {
                itemId = e.target["itemid"];

                GameModel.send("c2s_use_bagitem", {
                    roleid: GameModel.player.roleid,
                    itemid: itemId,
                    count: value,
                    operateid: 0
                })

            } else {
MsgAlert.addMsg("未找到變身卡碎片id");
                return;
            }
            FGUtil.dispose(this.composePanel);
            // this.composeAnimation(this.getTransformationLevel(this.showCardsList[this.selectCardIdx].data.id));
            this.scheduleOnce(() => {
                this.stopTap = false
            }, 0.3);
        }
    }

    /**
* 分解變身卡動畫
    */
    composeAnimation(level) {
        var t = cc.tween;
        var itemNode = new cc.Node("decomposeItem");
        itemNode.addComponent(cc.Sprite).spriteFrame;
        itemNode.getComponent(cc.Sprite).spriteFrame = ItemUtil.getItemIcon(this.getTransformationChipIcon(level));
        itemNode.getComponent(cc.Sprite).sizeMode = cc.Sprite.SizeMode.CUSTOM
        itemNode.width = 50;
        itemNode.height = 50;
        itemNode.setPosition(this.transformationPanel.node.width / 2 + 120, -this.transformationPanel.node.height + 80);
        itemNode.opacity = 0;
        itemNode.parent = this.transformationPanel.node;

        t(itemNode)
            .parallel(
                t().by(0.4, { y: 80 }),
                t().to(0.2, { opacity: 255 })
            )
            .delay(0.15)
            .call(() => {
                let bezerby = cc.bezierBy(0.5, [cc.v2(88, 10), cc.v2(130, 80), cc.v2(155, -350)]);
                itemNode.runAction(cc.sequence(cc.spawn(bezerby, cc.rotateBy(0.3, 90)), cc.removeSelf()));
            })
            .start();
    }

    /**
* 打開變身卡圖鑑面板
     */
    openLibraryPanel() {
        if (!this.libraryPanel || (this.libraryPanel && !this.libraryPanel.node && !SKUIUtil.isValid(this.libraryPanel.node))) {
            this.libraryPanel = FGUtil.create("main_ui", "transformation_library_panel");
            FGUtil.root().addChild(this.libraryPanel);
            this.libraryPanel.makeFullScreen();
        }

// 關閉按鈕
        let closeBtn = FGUtil.getButton(this.libraryPanel, "mask")
        let mask = FGUtil.getComponent(this.libraryPanel, "alert/close")
        this.pushCloseEvent(closeBtn, this.libraryPanel);
        this.pushCloseEvent(mask, this.libraryPanel);

// 強法按鈕
        let qfBtn = FGUtil.getButton(this.libraryPanel, "alert/n30");
        qfBtn.onClick(this.shwoQFCards, this);
// 抗性按鈕
        let kxBtn = FGUtil.getButton(this.libraryPanel, "alert/n31");
        kxBtn.onClick(this.shwoKXCards, this);
// 物理按鈕
        let wlBtn = FGUtil.getButton(this.libraryPanel, "alert/n32");
        wlBtn.onClick(this.shwoWLCards, this);

        let cardList = FGUtil.getList(this.libraryPanel, "alert/card_list");
// 設置變身卡初始化方法
        cardList.itemRenderer = this.initLibraryCardItem.bind(this);
// 虛擬列表
        cardList.setVirtual();

// 默認展示強法卡片
        this.shwoQFCards();
    }

    /**
* 展示強法變身卡圖鑑
     */
    shwoQFCards() {
        FGUtil.getControl(this.libraryPanel, "alert/n30/selected").selectedIndex = 1;
        FGUtil.getControl(this.libraryPanel, "alert/n31/selected").selectedIndex = 0;
        FGUtil.getControl(this.libraryPanel, "alert/n32/selected").selectedIndex = 0;
        this.libraryCardsList = this.searchAllCardsByType(1);
        let cardList = FGUtil.getList(this.libraryPanel, "alert/card_list");
        cardList.numItems = this.libraryCardsList.length;
        this.showLibraryCardInfo(null, 0);
        cardList.scrollToView(0);
    }

    /**
* 展示抗性變身卡圖鑑
     */
    shwoKXCards() {
        FGUtil.getControl(this.libraryPanel, "alert/n30/selected").selectedIndex = 0;
        FGUtil.getControl(this.libraryPanel, "alert/n31/selected").selectedIndex = 1;
        FGUtil.getControl(this.libraryPanel, "alert/n32/selected").selectedIndex = 0;
        this.libraryCardsList = this.searchAllCardsByType(2);
        let cardList = FGUtil.getList(this.libraryPanel, "alert/card_list");
        cardList.numItems = this.libraryCardsList.length;
        this.showLibraryCardInfo(null, 0);
        cardList.scrollToView(0);
    }

    /**
* 展示物理變身卡圖鑑
     */
    shwoWLCards() {
        FGUtil.getControl(this.libraryPanel, "alert/n30/selected").selectedIndex = 0;
        FGUtil.getControl(this.libraryPanel, "alert/n31/selected").selectedIndex = 0;
        FGUtil.getControl(this.libraryPanel, "alert/n32/selected").selectedIndex = 1;
        this.libraryCardsList = this.searchAllCardsByType(3);
        let cardList = FGUtil.getList(this.libraryPanel, "alert/card_list");
        cardList.numItems = this.libraryCardsList.length;
        this.showLibraryCardInfo(null, 0);
        cardList.scrollToView(0);
    }

    /**
* 根據變身卡類型返回所有符合的變身卡
     */
    searchAllCardsByType(type: number = 0) {
        var minId = 500001;
        var maxId = 500199;
        var list = [];
        for (let key = minId; key < maxId; key++) {
            if (key == 500051 || key == 500062 || key == 500063 || key == 500064) continue;
            var info = SKDataUtil.valueForKey(GameModel.game_conf.item, key);
            if (!info) continue;
            if (info.attrType == type)
                list.push(SKDataUtil.clone(info));
        }
        return list;
    }

    /**
* 初始化圖鑑變身卡
     */
    initLibraryCardItem(idx, obj: fairygui.GObject) {
        var item = obj.asCom;
        var card = FGUtil.getLoader(item, "card");
        var type = FGUtil.getLoader(item, "type");
        var change = FGUtil.getLoader(item, "change");
        var info = this.libraryCardsList[idx];
        var level = this.getTransformationLevel(parseInt(info.id));
        var typeIcon = this.getTransformationTypeIcon(level, info.attrType, info.id);
        card.url = `ui://main_ui/${info.icon}`;
        type.url = `ui://main_ui/${typeIcon}`;
        if (TransformationUtil.Instance.getCardsInfo(info.id).cardstate == 0 || level == 2) {
            change.url = null;
        } else
            change.url = `ui://main_ui/${this.getTransformationChangeIcon(level)}`;
        item.node["idx"] = idx;
        FGUtil.getControl(item, "selected").selectedIndex = idx == this.selectLibraryCardIdx ? 1 : 0;
        item.asButton.onClick(this.showLibraryCardInfo, this);
    }

    /**
* 顯示變身卡圖鑑裡面的信息
     */
    showLibraryCardInfo(e: Event, id: number = 0) {
        var idx;
        if (e && e.target && e.target["idx"])
            idx = e.target["idx"];
        else
            idx = id;
        this.selectLibraryCardIdx = idx;

// 選中卡片並刷新
        let cardList = FGUtil.getList(this.libraryPanel, "alert/card_list");
        cardList.refreshVirtualList();

        var cardInfo = this.libraryCardsList[idx];
        var cardData = TransformationUtil.Instance.getCardsInfo(cardInfo.id);
        var des = TransformationUtil.Instance.getCardDesById(cardInfo.id);
        var addition = TransformationUtil.Instance.getCardAddition(cardInfo.id, this.practiceData);

        let infoCom = FGUtil.getComponent(this.libraryPanel, "alert/info");

        FGUtil.getComponent(infoCom, "decompose").visible = false;
        FGUtil.getControl(infoCom, "level").selectedIndex = this.getTransformationLevel(cardInfo.id);
FGUtil.getTextField(infoCom, "type").text = cardInfo.attrType == 1 ? "強" : cardInfo.attrType == 2 ? "抗" : "物";
        FGUtil.getLoader(infoCom, "img").url = `ui://main_ui/p${cardInfo.icon}`;
        let count = ItemUtil.getBagItemCount(cardInfo.id);
FGUtil.getTextField(infoCom, "num").text = `擁有:[color=#000000]${count ? count : 0}[/color]張`;
        FGUtil.getTextField(infoCom, "name").text = `${cardInfo.name}`;
FGUtil.getTextField(infoCom, "needLevel").text = `等級需求:${cardData.relive}轉${cardData.level}級`;
FGUtil.getTextField(infoCom, "5needLevel").text = `五行等級需求:${cardData.fplevel}級`;
FGUtil.getTextField(infoCom, "eff").text = `五行修煉加成:[color=#00A03C]${addition}%[/color]`;
        FGUtil.getTextField(infoCom, "arr_info/arr_info").text = des;
        infoCom.visible = true;
    }

    /**
* 打開變身卡五行修煉面板
     */
    openPracticePanel() {
        if (GameModel.player.relive < 1 || (GameModel.player.relive == 1 && GameModel.player.level < 80)) {
MsgAlert.addMsg("五行修煉需要1轉80級");
            return;
        }
        if (!this.practicePanel || (this.practicePanel && !this.practicePanel.node && !SKUIUtil.isValid(this.practicePanel.node))) {
            this.practicePanel = FGUtil.create("main_ui", "wuxing_practice_panel");
            FGUtil.root().addChild(this.practicePanel);
            this.practicePanel.makeFullScreen();
        }

// 關閉按鈕
        let closeBtn = FGUtil.getButton(this.practicePanel, "mask")
        let mask = FGUtil.getComponent(this.practicePanel, "alert/close")
        this.pushCloseEvent(closeBtn, this.practicePanel);
        this.pushCloseEvent(mask, this.practicePanel);

        var effList = FGUtil.getList(this.practicePanel, "alert/left/list");
// 設置受影響變身卡初始化方法
        effList.itemRenderer = this.initEffCardItem.bind(this);
// 虛擬列表
        effList.setVirtual();

        var leftPanel = FGUtil.getComponent(this.practicePanel, "alert/left");
        var wuxingBox = FGUtil.getComponent(leftPanel, "wuxing");
        var goldBtn = FGUtil.getComponent(wuxingBox, "gold");
        var woodBtn = FGUtil.getComponent(wuxingBox, "wood");
        var waterBtn = FGUtil.getComponent(wuxingBox, "water");
        var fireBtn = FGUtil.getComponent(wuxingBox, "fire");
        var soilBtn = FGUtil.getComponent(wuxingBox, "soil");
        var colligateBtn = FGUtil.getComponent(wuxingBox, "colligate");
        goldBtn.node["idx"] = 1;
        woodBtn.node["idx"] = 2;
        waterBtn.node["idx"] = 3;
        fireBtn.node["idx"] = 4;
        soilBtn.node["idx"] = 5;
        colligateBtn.node["idx"] = 6;
        goldBtn.onClick(this.wuxingBtnOnClick, this);
        woodBtn.onClick(this.wuxingBtnOnClick, this);
        waterBtn.onClick(this.wuxingBtnOnClick, this);
        fireBtn.onClick(this.wuxingBtnOnClick, this);
        soilBtn.onClick(this.wuxingBtnOnClick, this);
        colligateBtn.onClick(this.wuxingBtnOnClick, this);
        this.wuxingBtnOnClick(null, this.practiceSelectIdx);
    }

    initPracticeLeftInfo(data: any = null) {
        try {
            if (data != null)
                this.practiceData = data;
            var leftPanel = FGUtil.getComponent(this.practicePanel, "alert/left");
            var wuxingBox = FGUtil.getComponent(leftPanel, "wuxing");
FGUtil.getTextField(wuxingBox, "goldLevel").text = `${data.jinlevel}級`;
FGUtil.getTextField(wuxingBox, "woodLevel").text = `${data.mulevel}級`;
FGUtil.getTextField(wuxingBox, "waterLevel").text = `${data.shuilevel}級`;
FGUtil.getTextField(wuxingBox, "fireLevel").text = `${data.huolevel}級`;
FGUtil.getTextField(wuxingBox, "soilLevel").text = `${data.tulevel}級`;
FGUtil.getTextField(wuxingBox, "collLevel").text = `${data.fplevel}級`;

            var idx = this.practiceSelectIdx;
            this.practiceEffCards = TransformationUtil.Instance.getEffCardsByAttr(idx);
            FGUtil.getControl(this.practicePanel, "alert/left/wuxing/selectId").selectedIndex = idx;
            var effList = FGUtil.getList(this.practicePanel, "alert/left/list");
            effList.numItems = this.practiceEffCards.length;
            this.initPracticeRigthInfo(idx);
        } catch (err) {
            console.log(err)
        }
    }

    initEffCardItem(idx, obj: fairygui.GObject) {
        var item = obj.asCom;
        var card = FGUtil.getLoader(item, "card");
        var type = FGUtil.getLoader(item, "type");
        var info = this.practiceEffCards[idx];
        var level = this.getTransformationLevel(parseInt(info.cardid));
        var typeIcon = this.getTransformationChangeIcon(level);
        card.url = `ui://main_ui/${info.cardid}`;
        type.url = `ui://main_ui/${typeIcon}`;
    }
    /**
* 點擊金木水火土和五行按鈕
     */
    wuxingBtnOnClick(e: Event, id: number = 1) {
        var idx;
        if (e && e.target && e.target["idx"])
            idx = e.target["idx"];
        else
            idx = id;
        this.practiceSelectIdx = idx;
        GameModel.send("c2s_five_phases", {
            roleid: GameModel.player.roleid,
            type: idx
        })
    }

    /**
     * 
     * @param typeId 
     */
    getPracticeInfoByType(typeId): any {
        if (typeId == 6) {
            return;
        }
var wordArr = ["金", "木", "水", "火", "土"];
        var keyArr = ["jin", "mu", "shui", "huo", "tu"];
        var colorArr = [{ r: 255, g: 155, b: 0 }, { r: 50, g: 200, b: 50 }, { r: 0, g: 20, b: 200 }, { r: 200, g: 0, b: 0 }, { r: 80, g: 50, b: 10 }];
var desArr = ['點石成金', '木秀於林', '普天率土', '火龍黼黻', '普天率土'];
        var item1Arr = [1003010, 1003030, 1003050, 1003070, 1003090];
        var item2Arr = [1003020, 1003040, 1003060, 1003080, 1003100];
        var info = {
            word: wordArr[typeId - 1],
            color: colorArr[typeId - 1],
            level: this.practiceData[`${keyArr[typeId - 1]}level`],
            exp: this.practiceData[`${keyArr[typeId - 1]}exp`],
            maxExp: this.practiceData.upexp,
des: `${desArr[typeId - 1]}：加強五行之中${wordArr[typeId - 1]}的能力，變身卡/屬性卡含${wordArr[typeId - 1]}屬性時會獲得額外的屬性加成。 `,
            item1Id: item1Arr[typeId - 1],
            item1Icon: `${item1Arr[typeId - 1]}`,
            item1Count: ItemUtil.getBagItemCount(item1Arr[typeId - 1]),
            item2Id: item2Arr[typeId - 1],
            item2Icon: `${item2Arr[typeId - 1]}`,
            item2Count: ItemUtil.getBagItemCount(item2Arr[typeId - 1]),
            parcticeTimes: this.practiceData.count
        };
        return info;
    }
    /**
* 根據選擇的五行屬性顯示不同信息
* @param typeId 五行屬性類型
     */
    initPracticeRigthInfo(typeId) {
        var info = this.getPracticeInfoByType(typeId);
        if (typeId < 6) {
            FGUtil.getControl(this.practicePanel, "alert/is5").selectedIndex = 0;
            FGUtil.getControl(this.practicePanel, "alert/right/isMax").selectedIndex = info.level == 100 ? 1 : 0;
            var rightPanel = FGUtil.getComponent(this.practicePanel, "alert/right");
            FGUtil.getTextField(rightPanel, "type_title").text = info.word;
            FGUtil.getTextField(rightPanel, "type_title").strokeColor = new cc.Color(info.color.r, info.color.g, info.color.b);

FGUtil.getTextField(rightPanel, "level_title").text = `${info.level}級`;
            FGUtil.getTextField(rightPanel, "n2/title").fontSize = 20;
            FGUtil.getTextField(rightPanel, "n2/title").text = `${info.exp}/${info.maxExp}`;
            FGUtil.getProgressBar(rightPanel, "n2").max = info.maxExp;
            FGUtil.getProgressBar(rightPanel, "n2").value = info.exp;
            FGUtil.getTextField(rightPanel, "n5").text = info.des;
            FGUtil.getLoader(rightPanel, "item1/icon").url = `ui://main_ui/${info.item1Icon}`;
            FGUtil.getTextField(rightPanel, "item1/title").text = `[b][color=#${info.item1Count > 0 ? '1BB457' : 'BE280B'}]${info.item1Count}[/color]/1[/b]`;
            FGUtil.getLoader(rightPanel, "item2/icon").url = `ui://main_ui/${info.item2Icon}`;
            FGUtil.getTextField(rightPanel, "item2/title").text = `[b][color=#${info.item2Count > 0 ? '1BB457' : 'BE280B'}]${info.item2Count}[/color]/1[/b]`;
FGUtil.getTextField(rightPanel, "times").text = `本周可修煉：${info.parcticeTimes}`;

            var practiceBtn1 = FGUtil.getButton(rightPanel, "xl1");
            var practiceBtn2 = FGUtil.getButton(rightPanel, "xl2");
            practiceBtn1.node["itemId"] = info.item1Id;
            practiceBtn2.node["itemId"] = info.item2Id;
            practiceBtn1.onClick(this.useItemToPractice, this);
            practiceBtn2.onClick(this.useItemToPractice, this);
        } else {
            FGUtil.getControl(this.practicePanel, "alert/wuxing/isMax").selectedIndex = this.practiceData.fplevel == 100 ? 1 : 0;
FGUtil.getTextField(this.practicePanel, "alert/wuxing/n9").text = `${this.practiceData.fplevel}級/100級`;
            FGUtil.getButton(this.practicePanel, "alert/wuxing/n10").onClick(this.upFPLevel, this);
            FGUtil.getControl(this.practicePanel, "alert/is5").selectedIndex = 1;
        }
    }
    refreshItemCount() {
        var item1id = FGUtil.getButton(this.practicePanel, "alert/right/xl1").node["itemId"]
        var item2id = FGUtil.getButton(this.practicePanel, "alert/right/xl2").node["itemId"]
        var count1 = ItemUtil.getBagItemCount(item1id)
        var count2 = ItemUtil.getBagItemCount(item2id)
        FGUtil.getTextField(this.practicePanel, "alert/right/item1/title").text = `[b][color=#${count1 > 0 ? '1BB457' : 'BE280B'}]${count1}[/color]/1[/b]`;
        FGUtil.getTextField(this.practicePanel, "alert/right/item2/title").text = `[b][color=#${count2 > 0 ? '1BB457' : 'BE280B'}]${count2}[/color]/1[/b]`;
    }
    useItemToPractice(e: Event) {
        if (this.practiceData.count <= 0) {
MsgAlert.addMsg("本周修煉次數已用完");
            return;
        }
        var itemId;
        if (e && e.target && e.target["itemId"])
            itemId = e.target["itemId"];
        if (!itemId)
            return;
        var count = ItemUtil.getBagItemCount(itemId);
        if (count <= 0) {
MsgAlert.addMsg("您未擁有此道具");
            return;
        }
        GameModel.send("c2s_use_bagitem", {
            roleid: GameModel.player.roleid,
            itemid: itemId,
            count: 1,
            operateid: 0
        })
    }
    upFPLevel() {
        GameModel.send("c2s_fplevel", {
            roleid: GameModel.player.roleid
        })
    }
    /**
* 獲取卡片等級
* @param cardId 卡片id
* @returns 卡片等級
     */
    getTransformationLevel(cardId: number = 0) {
        if (cardId < 500001 || cardId > 500199) {
console.error("卡片id錯誤");
            return;
        }
        var info = ItemUtil.getItemData(cardId);
        if (!info) {
console.error("未找到卡片信息");
            return;
        }
        var level = info.level;
        if (level == 1003) {
// 橘色
            return 3;
        } else if (level == 1002) {
// 紫色
            return 2;
        } else if (level == 1001) {
// 藍色
            return 1;
        } else if (level == 1000) {
// 綠色
            return 0;
        }
        return -1;
    }

    /**
* 獲取卡片對應變字圖標
* @param level 卡片等級
* @returns 卡片變字圖標名稱
     */
    getTransformationChangeIcon(level: number = -1) {
        if (level < 0 || level > 3) {
console.error("獲取卡片變字圖標時傳入數據錯誤");
            return;
        }
//強 抗 物 綠 藍 紫 橙
        var typeArr = [
            "CE379C20",
            "4FF0E3B9",
            "",
            "743CB1F3"
        ];
        return typeArr[level];
    }

    /**
* 獲取卡片對應類型圖標
* @param level 卡片等級
* @param type 卡片類型
* @returns 卡片類型圖標名稱
     */
    getTransformationTypeIcon(level: number = -1, type: number = 0, errid: any = "") {
        if (level < 0 || level > 3 || type < 1 || type > 3) {
console.error("獲取卡片顏色時傳入數據錯誤,錯誤卡片id：", errid);
            return;
        }
//強 抗 物 綠 藍 紫 橙
        var typeArr = [
            ["ECAE61A5", "6A45551C", "71EA9A95"],
            ["905A9C64", "56878EC7", "CD606498"],
            ["A1519957", "7844A6C6", "A71F8CC7"],
            ["9CC2C05E", "44D85091", "4988966A"]
        ];
        return typeArr[level][type - 1];
    }

    /**
* 獲取卡片對應碎片圖標
* @param level 卡片等級
* @returns 卡片碎片圖標名稱
     */
    getTransformationChipIcon(level: number = -1) {
        if (level < 0 || level > 3) {
console.error("獲取卡片碎片傳入數據錯誤");
            return;
        }
//綠 藍 紫 橙
        var typeArr = [
            "100317", "100311", "100313", "100315"
        ];
        return typeArr[level];
    }
    /**
* 添加關閉事件
     */
    pushCloseEvent(item: fairygui.GComponent, target: fairygui.GComponent, call: Function = null) {
        item.clearClick();
        item.onClick(() => {
            call && call();
            FGUtil.dispose(target);
            target = null;
        }, this)
    }


    hideTransPanel() {
        if (!SKUIUtil.isFGUIValid(this.transformationPanel)) return;
        this.transformationPanel.visible = false;
    }
    closeTransPanel() {
        if (!SKUIUtil.isFGUIValid(this.transformationPanel)) return;
        FGUtil.dispose(this.transformationPanel);
        this.transformationPanel = null;
    }

    /**
* 背包/天演界面打開變身卡
     */
    openTransPanelByBag() {
        if (SKUIUtil.isFGUIValid(this.transformationPanel)) {
            this.transformationPanel.visible = true;
            FGUtil.getControl(this.transformationPanel, "alert/page").selectedIndex = 1;
            return;
        }
        this.openTransformation();
    }

    /**
* 打開背包
     */
    openBagPanel() {
        AudioUtil.playFenyeAudio();
        Bag.Instance.openBagPanelByTrans();
        this.hideTransPanel();
    }

    /**
* 打開天演符
     */
    openFactionTalentPanel() {
        AudioUtil.playFenyeAudio();
        FactionTalent.Instance.openFcBagByOther();
        this.hideTransPanel();
    }
}