import {Component, Node, sp, isValid, v3} from 'cc';

export class SpineView extends Component {
    private spineAnim: sp.Skeleton;
    private readonly EVENT_NAME: Array<string> = ["dice1", "dice2", "dice3", "dice4", "dice5", "dice6"];
    private readonly BONE_NAME: Array<string> = ["dice1", "dice2", "dice3", "dice4", "dice5", "dice6"];
    private readonly OPEN_EVENT: string = "open";
    private readonly ANIM_NAME: string = "animation";

    private boneArr: sp.spine.Bone[];
    private images: Node[];

    protected onLoad(): void {
        this.spineAnim = this.node.getChildByName("Spine").getComponent(sp.Skeleton);
        for (let i: number = 0; i < this.EVENT_NAME.length; i++) {
            this.node.getChildByName(`${i}`).active = false;
        }
    }

    protected onEnable(): void {
        this.listener(true);
    }

    protected onDisable(): void {
        this.listener(false);
    }

    private listener(isAdd: boolean): void {
        if (!isValid(this.node)) return;
        if (isAdd) {
            this.spineAnim.setCompleteListener(this.onAnimCompleteHandler.bind(this));
            this.spineAnim.setEventListener(this.onEventHandler.bind(this));
        } else {
            this.spineAnim.setCompleteListener(null);
            this.spineAnim.setEventListener(null);
        }
    }

    private onAnimCompleteHandler(): void {
        if (!isValid(this.node)) return;
        console.log(`Spine播放完毕！`);
    }

    private onEventHandler(trackEntry: sp.spine.TrackEntry, event: sp.spine.Event): void {
        if (!isValid(this.node)) return;
        if (!event.data) return;
        let index: number = this.EVENT_NAME.indexOf(event.data.name); //查找到触发的event
        if (index < 0) {
            if (event.data.name == this.OPEN_EVENT) {
                console.log("spine open");
            }
        } else {
            this.images[index] = this.node.getChildByName(`${index}`);
        }
    }

    /**
     * 播放Spine动画
     */
    public play(): void {
        this.setBoneArr();
        this.images = [];
        this.spineAnim.timeScale = 1;
        let track = this.spineAnim.setAnimation(0, this.ANIM_NAME, false);
        track.trackTime = track.animationStart;
    }

    private setBoneArr(): void {
        this.boneArr = [];
        for (let i: number = 0; i < this.BONE_NAME.length; i++) {
            this.boneArr[i] = this.spineAnim.findBone(this.BONE_NAME[i]);
        }
    }

    private updateDice(diceOne: Node, bone: sp.spine.Bone): void {
        diceOne.setPosition(v3(bone.worldX, bone.worldY, 0));
        diceOne.setScale(bone.getWorldScaleX(), bone.getWorldScaleY());
    }

    protected update(dt: number): void {
        if (this.images == null || this.images.length == 0) return;
        for (let i: number = 0; i < this.BONE_NAME.length; i++) {
            if (!this.images[i]) continue;
            if (!this.images[i].active) {
                this.images[i].active = true;
            }
            this.updateDice(this.images[i], this.boneArr[i]);
        }
    }

    protected onDestroy(): void {
        this.boneArr = null;
        this.images = null;
    }
}

import {Component, Animation, AnimationState, isValid} from 'cc';

export class AnimView extends Component {
    private anim: Animation;
    private animState: AnimationState;

    protected onLoad(): void {
        this.anim = this.node.getChildByName("Anim").getComponent(Animation);
    }


    protected onEnable(): void {
        this.listener(true);
    }

    protected onDisable(): void {
        this.listener(false);
    }

    private listener(isAdd: boolean): void {
        if (!isValid(this.node)) return;
        if (isAdd) {
            this.anim.on(Animation.EventType.FINISHED, this.onAnimComplete, this);
        } else {
            this.anim.off(Animation.EventType.FINISHED, this.onAnimComplete, this);
        }
    }

    private onAnimComplete(event: string, date: AnimationState): void {
        if (!isValid(this.node)) return;
        switch (date.name) {
            case "anim":
                console.log(`Anim 播放完毕！`);
                this.animState = this.anim.getState("anim");
                if (this.animState) {
                    console.log(`complete ${this.animState.isPlaying}`);
                }
                break;
        }
    }

    public play(): void {

        this.scheduleOnce(() => {
            if (!isValid(this.node)) return;
            console.log(`Anim 开始播放！！！！！！`);
            this.anim.play("anim");
        }, 6);
    }


    protected onDestroy(): void {
        this.anim = null;
        this.animState = null;
    }
}