import { asyncDelay, asyncLoadDragonBoneAnime, callMiddleLayerFunction, onHomeworkFinish, playAudio } from "../script/util";
import { MyCocosSceneComponent } from "../script/MyCocosSceneComponent";

const { ccclass, property } = cc._decorator;

@ccclass
export default class SceneComponent extends MyCocosSceneComponent {

    addPreloadImage() {
        // TODO 根据自己的配置预加载图片资源
        // this._imageResList.push({ url: this.data.pic_url });
    }

    addPreloadAudio() {
        // TODO 根据自己的配置预加载音频资源
        this._audioResList.push({ url: (this.data.lrcData && this.data.lrcData.audio_url) || '' });
    }

    addPreloadAnima() {

        console.log('this.data: ' + JSON.stringify(this.data));

        if (this.data?.skeJsonData?.url) {
            this.data.skeJsonData.url += '?time=' + new Date().getTime()
            this.data.texJsonData.url += '?time=' + new Date().getTime()
            this.data.texPngData.url += '?time=' + new Date().getTime()
        }

        this._animaResList.push({ url: this.data.skeJsonData.url || '' });
        this._animaResList.push({ url: this.data.texJsonData.url || '' });
        this._animaResList.push({ url: this.data.texPngData.url || '' });
    }

    onLoadEnd() {
        // TODO 加载完成后的逻辑写在这里, 下面的代码仅供参考

        console.log(' in onLoadEnd 1')

        this.initData();

        console.log(' in onLoadEnd 2')

        let isDataLoaded = false;
        let isAnimLoaded = false;
        const checkStart = () => {

            console.log(' in checkStart: ', isDataLoaded)
            console.log(' in isAnimLoaded: ', isAnimLoaded)
            if (isDataLoaded && isAnimLoaded) {

                window["air"].hideAirClassLoading();
                this.initView();
            }
        }


        this.getState(() => {
            isDataLoaded = true;
            checkStart();

            this.setOneAnima(this.data, () => {
                isAnimLoaded = true;
                checkStart();
            });
        })



    }

    isFirst;
    isLast;
    playTimes;
    jumpData;
    getState(cb) {


        console.log(' in getState 1');

        // this.isFirst = this.checkIsFirst();
        // this.isLast = this.checkIsLast();
        // this.playTimes =  this.checkPlayTimes();
        // this.jumpData =  this.getJumpData();

        // cb && cb();
        // return;

        callMiddleLayerFunction('PSQS_get_course_info', {}, (data) => {

            console.log(' in getState 2');


            this.isFirst = data.first; //this.checkIsFirst();
            this.isLast = data.last // this.checkIsLast();
            this.playTimes = data.playTime // this.checkPlayTimes();
            this.jumpData = data.saveData // this.getJumpData();

            if (this.data.isDebug) {
                this.playTimes += 1;
            }

            cb && cb();
        })

    }

    checkIsFirst() {
        return true;
    }

    checkIsLast() {
        return true;
    }

    checkPlayTimes() {
        return 1;
    }

    getJumpData() {
        return //{step: 2};
    }


    _cantouch = null;
    canvas;
    initData() {
        // 所有全局变量 默认都是null 
        this._cantouch = true;
        this.canvas = cc.find("Canvas");


        this.initLocalAudio();
        this.initLyrics();
    }

    textArr;
    textArrIndex;
    initLyrics() {
        this.textArr = [];
        this.textArrIndex = 0;

        const lyrics = this.data?.lrcData?.lyrics;
        if (!lyrics) {
            return;
        }

        for (let i = 0; i < lyrics.length; i++) {

            const data = lyrics[i].data;
            if (!data) {
                continue;
            }

            const time = lyrics[i].time;

            let duration = 0;
            if (i != lyrics.length - 1) {
                duration = lyrics[i + 1].time - lyrics[i].time;
            }

            this.textArr.push({ data, time, duration });
        }
    }

    readyClip;
    goClip;
    goodjobClip;
    initLocalAudio() {

        const getLocalAudio = (name) => {
            const audioNode = cc.find("Canvas/res/audio/" + name);
            return audioNode.getComponent(cc.AudioSource).clip;
        }

        this.readyClip = getLocalAudio('ready');
        this.goClip = getLocalAudio('go');
        this.goodjobClip = getLocalAudio('goodjob');
    }

    initView() {

        console.log(' in initView')

        if (this.jumpData) {
            this.junpAnim();
            return;
        }


        if (this.isFirst) {
            this.initStartView();
            return;
        }

        this.startAnim();


        return;

    }


    junpAnim() {
        const jumpFrame = this.getJumpFrame();
        this.dragonDisplay.timeScale = jumpFrame;

        this.dragonDisplay.armatureName = this.dragonDisplay.getArmatureNames()[0];
        const animationName = this.dragonDisplay.getAnimationNames(this.dragonDisplay.armatureName)[0];
        this.dragonDisplay.playAnimation(animationName, 1);
    }

    getJumpFrame() {

        const maxDisFrame = this.data.frame * 2;

        const arr = this.data.stepArr;
        if (arr.length <= 1) {
            return maxDisFrame;
        }

        let disFrame = maxDisFrame;
        for (let i = 1; i < arr.length; i++) {

            const curDis = (arr[i].text - arr[i - 1].text) / 2;
            if (disFrame > curDis) {
                disFrame = curDis;
            }
        }

        return disFrame;
    }

    initStartView() {

        this.showStartLight();
        if (this.playTimes > 0) {
            this.showStartTitleGo();
        } else {
            this.showStartTitleReady();
        }
    }


    lightBg;
    lightLeft;
    lightRight
    showStartLight() {

        const lightBg = this.getSprNode('black');
        lightBg.scaleX = this.canvas.width / lightBg.width;
        lightBg.scaleY = this.canvas.height / lightBg.height;
        lightBg.opacity = 180;
        this.canvas.addChild(lightBg, 10);


        const lightLeft = this.getSprNode('light');
        lightLeft.anchorY = 0.9;
        lightLeft.x = -this.canvas.width / 2;
        lightLeft.y = this.canvas.height / 2;
        lightLeft.scale = this._mapScaleMin;
        lightLeft.zIndex = 10;
        lightLeft.parent = this.canvas;
        lightLeft.rotation = 45;
        lightLeft.opacity = 0;
        cc.tween(lightLeft)
            .to(1, { rotation: -45 }, { easing: "cubicOut" })
            .start();
        cc.tween(lightLeft)
            .to(0.5, { opacity: 255 })
            .start();

        const lightRight = this.getSprNode('light');
        lightRight.anchorY = 0.9;
        lightRight.x = this.canvas.width / 2;
        lightRight.y = this.canvas.height / 2;
        lightRight.scale = this._mapScaleMin;
        lightRight.zIndex = 10;
        lightRight.parent = this.canvas;
        lightRight.rotation = -45;
        lightRight.opacity = 0;
        cc.tween(lightRight)
            .to(1, { rotation: 45 }, { easing: "cubicOut" })
            .start();
        cc.tween(lightRight)
            .to(0.5, { opacity: 255 })
            .start();


        this.lightBg = lightBg;
        this.lightLeft = lightLeft;
        this.lightRight = lightRight;
    }




    title;
    showStartTitleReady() {
        const title = this.getSprNode('start_title');
        title.scale = this._mapScaleMin;
        title.y = this.canvas.height / 2 + title.height * title.scaleY;
        title.parent = this.canvas;
        title.zIndex = 11;

        cc.tween(title)
            .delay(0.3)
            .call(() => {
                playAudio(this.readyClip, (() => {
                    this.startAudioEnd();
                }));
            })
            .to(1.5, { y: 0 }, { easing: "elasticOut" })
            .start();

        this.title = title
    }


    async showStartTitleGo() {


        const title = new cc.Node();
        title.parent = this.canvas;
        title.zIndex = 11;
        title.scale = this._mapScaleMin;
        this.title = title


        playAudio(this.goClip, (() => {
            this.startAudioEnd();
        }));

        const popNum = (name, time = 1) => {
            const sprNode = this.getSprNode(name);
            title.addChild(sprNode);
            sprNode.scale = 0.2;
            sprNode.opacity = 0;

            cc.tween(sprNode)
                .to(time / 10, { opacity: 255 })
                .start();

            cc.tween(sprNode)
                .to(0.8 * time, { scale: this._mapScaleMin }, { easing: 'elasticOut' })
                .delay(0 * time)
                .to(0.2 * time, { opacity: 0 })
                .start();
        }


        await asyncDelay(2.2);

        popNum('go_1', 0.7);
        await asyncDelay(0.7);
        popNum('go_2', 0.7);
        await asyncDelay(0.7);
        popNum('go_3', 0.7);
        await asyncDelay(0.7);
        popNum('go_0');
        await asyncDelay(1);

        // cc.tween(title)
        //     .delay(0.3)
        //     .call(() => {
        //         playAudio(this.readyClip, (() => {
        //             this.startAudioEnd();
        //         }));
        //     })
        //     .to(1.5, {y: 0}, {easing: "elasticOut"})
        //     .start();

    }

    startAudioEnd() {
        this.hideStartView();
    }

    async hideStartView() {
        const hideSpr = (sprNode, cb = null) => {
            cc.tween(sprNode)
                .to(0.3, { opacity: 0 })
                .call(() => {
                    sprNode.active = false;
                    cb && cb();
                })
                .start();
        }

        hideSpr(this.lightLeft);
        hideSpr(this.lightRight);
        hideSpr(this.title);

        await asyncDelay(0.2)
        hideSpr(this.lightBg, () => {
            this.startAnim();
        });
    }

    audioId;
    audioClip;
    startAnim() {

        if (this.animaNode) {
            this.dragonDisplay.armatureName = this.dragonDisplay.getArmatureNames()[0];
            const animationName = this.dragonDisplay.getAnimationNames(this.dragonDisplay.armatureName)[0];

            this.dragonDisplay.playAnimation(animationName, 1);
            this.dragonDisplay.timeScale = 1;
        }


        // this.playAudioByUrl(this.data.lrcData.audio_url);

        cc.assetManager.loadRemote(this.data.lrcData.audio_url, (err, audioClip) => {
            this.audioId = cc.audioEngine.play(audioClip, false, 0.8);
            this.audioClip = audioClip;
        });


    }

    showHand(id) {

        const stepData = this.data.stepArr[Number(id) - 1];

        if (stepData['X'] == 0 && stepData['Y'] == 0) {
            console.log('stepData: ', stepData);

            this.changeToMiddleLayer();
            // this.delayDeleteAnim();



            callMiddleLayerFunction('PSQS_jump_to_question', { step: id }, null)
            return;
        }


        const handBase = cc.find("Canvas/hand");
        const hand = cc.instantiate(handBase);
        hand.parent = this.animaNode;
        hand.active = true;
        // hand.scale = this._mapScaleMin;
        hand.x = stepData['X'];
        hand.y = stepData['Y'];

        const dragonDisplay = hand.getComponent(dragonBones.ArmatureDisplay);
        dragonDisplay.playAnimation('normal', -1);


        const boxLen = 300;

        const clickBox = new cc.Node();
        clickBox.width = clickBox.height = boxLen;
        clickBox.parent = hand;
        // const ctx = clickBox.addComponent(cc.Graphics);
        // ctx.fillColor = cc.Color.RED.setA(100);
        // ctx.fillRect(-boxLen/2, -boxLen/2, boxLen, boxLen);
        // ctx.fill();

        let isClicked = false;
        clickBox.on('touchstart', () => {

            if (isClicked) {
                return;
            }
            isClicked = true;

            console.log('PSQS_show_rabbit 1');
            // callMiddleLayerFunction('PSQS_show_rabbit', null, () => {

            this.changeToMiddleLayer();

            console.log('in changeToMiddleLayer1 ');

            // this.delayDeleteAnim();


            console.log('PSQS_show_rabbit 2')
            callMiddleLayerFunction('PSQS_jump_to_question', { step: id }, null)
            // })
        })
    }

    delayDeleteAnim() {

        this.cleanListener();
        const middleLayer = <any>cc.find("middleLayer");
        if (middleLayer) {

            middleLayer.myAnimNode = null;

            let dragonDisplay = this.animaNode.getComponent(dragonBones.ArmatureDisplay);

            const oldAtlas = dragonDisplay.dragonAtlasAsset;
            const oldAsset = dragonDisplay.dragonAsset;





            this.delayRelease(oldAtlas, oldAsset, this.animaNode);


            console.log(' setOneAnima 101')
            this.animaNode.removeComponent(dragonBones.ArmatureDisplay)
            dragonDisplay = this.animaNode.addComponent(dragonBones.ArmatureDisplay);


            const handBase = cc.find("Canvas/hand");
            const hand = cc.instantiate(handBase);
            hand.active = true;
            const handDisplay = hand.getComponent(dragonBones.ArmatureDisplay)

            // const atlas = new dragonBones.DragonBonesAtlasAsset();
            // const asset = new dragonBones.DragonBonesAsset();

            dragonDisplay.dragonAtlasAsset = handDisplay.dragonAtlasAsset;
            dragonDisplay.dragonAsset = handDisplay.dragonAsset;
            console.log('汪汪汪 21')


            oldAsset.decRef();
            oldAsset.decRef();
            oldAsset.decRef();

            oldAsset.decRef();
            oldAsset.decRef();
            oldAsset.decRef();


            // this.changeToMiddleLayer();
            // this.delayRelease(oldAtlas, oldAsset);
        }

    }

    cleanListener() {
        this.dragonDisplay.off(dragonBones.EventObject.COMPLETE)
        this.dragonDisplay.off(dragonBones.EventObject.FRAME_EVENT)
        this.animaNode.off('touchstart');
    }


    jumpAudio(id) {
        console.log('in jumpAudio id: ', id);
        const stepData = this.data.stepArr[id - 1];
        console.log('stepData: ', stepData);
        const time = stepData.text / this.data.frame;

        cc.assetManager.loadRemote(this.data.lrcData.audio_url, (err, audioClip) => {
            const audioId = cc.audioEngine.play(audioClip, false, 0.8);
            cc.audioEngine.setCurrentTime(audioId, time);
            this.audioId = audioId;
            this.audioClip = audioClip;
        });

    }

    continueAnim(id) {

        console.log(' in continueAnim')

        // this.dragonDisplay.timeScale = 1;

        callMiddleLayerFunction('PSQS_hide_rabbit', null, () => {

            this.jumpAudio(id);
            this.dragonDisplay.timeScale = 1;
        });
    }

    animChangeStep(stepName) {

        console.log('stepName: ', stepName);
        const id = stepName.split('step')[1];


        if (this.jumpData) {
            console.log('this.jumpData: ', this.jumpData);
            if (id == this.jumpData.step) {

                this.dragonDisplay.timeScale = 0;

                this.continueAnim(id);
                this.jumpData = null;
            }
            return
        }

        console.log('id: ', id);
        this.dragonDisplay.timeScale = 0;
        cc.audioEngine.pauseAllEffects();



        this.showHand(id);
    }


    showGoodjob() {
        const goodjob = cc.find("Canvas/goodjob");
        goodjob.zIndex = 15;
        goodjob.active = true;
        goodjob.scale = this._mapScaleMin;

        const dragonDisplay = goodjob.getComponent(dragonBones.ArmatureDisplay);
        dragonDisplay.playAnimation('newAnimation', 1);

        playAudio(this.goodjobClip);

        // asyncDelay(2);
        // this.showBack();

        // dragonDisplay.on(dragonBones.EventObject.COMPLETE, (e) => {
        //     // this.animPlayEnd();
        // })
    }

    showBack() {
        const back = this.getSprNode('back');
        this.canvas.addChild(back, 20);
        back.x = -this.canvas.width / 2 + 80;
        back.y = this.canvas.height / 2 - 80;
        back.scale = 0.3;
        back.opacity = 0
        cc.tween(back)
            .to(0.9, { scale: this._mapScaleMin, opacity: 255 }, { easing: 'elasticOut' })
            .start();

        back.addComponent(cc.Button);
        back.on('click', () => {
            console.log('click back')
            callMiddleLayerFunction('PSQS_exit_book', null, () => { });
        })
    }

    animPlayEnd() {

        console.log(' in animPlayEnd 1')
        // callMiddleLayerFunction('PSQS_show_rabbit', null, () => {


        this.changeToMiddleLayer();

        console.log(' in animPlayEnd 2')

        // setTimeout(() => {
        callMiddleLayerFunction('PSQS_play_animate_over', null, () => { })
        // }, 100);
        // callMiddleLayerFunction('PSQS_play_animate_over', this.animaNode, () => {})
        // })

    }

    changeToMiddleLayer() {

        return;

        this.cleanListener();

        const middleLayer = <any>cc.find("middleLayer");
        if (middleLayer) {
            // middleLayer.myAnimNode.parent = middleLayer

            // this.animaNode.updateScale(middleLayer);

            console.log('in changeToMiddleLayer1 ');

            const cScale = this.animaNode.parent.scale;
            const mScale = middleLayer.scale;
            this.animaNode.scale = cScale / mScale * this._mapScaleMax;
            if (this.data.scale) {
                this.animaNode.scale *= this.data.scale;
            }


            this.dragonDisplay.dragonAtlasAsset.addRef();

            this.dragonDisplay.dragonAsset.addRef();



            // setTimeout(() => {

            console.log('in changeToMiddleLayer 2 ');
            this.animaNode.parent = middleLayer;
            // }, 50);
        }
    }

    async setOneAnima1(data, cb) {
        if (!data.texPngData) {
            return
        }

        await asyncLoadDragonBoneAnime(this.canvas, data);
        const animaNode = this.canvas.animaNode;

        animaNode.scale = this._mapScaleMax;
        if (this.data.scale) {
            animaNode.scale *= this.data.scale;
        }

        const dragonDisplay = animaNode.getComponent(dragonBones.ArmatureDisplay);

        dragonDisplay.armatureName = dragonDisplay.getArmatureNames()[0];
        const animationName = dragonDisplay.getAnimationNames(dragonDisplay.armatureName)[0];
        dragonDisplay.playAnimation(animationName, 1);
        dragonDisplay.timeScale = 0;

        dragonDisplay.off(dragonBones.EventObject.FRAME_EVENT)
        dragonDisplay.on(dragonBones.EventObject.FRAME_EVENT, (event) => {
            console.log(' in frameEventFunc ')

            if (this.playTimes > 0) {
                this.animChangeStep(event.name);
            }
        })

        dragonDisplay.off(dragonBones.EventObject.COMPLETE)
        dragonDisplay.on(dragonBones.EventObject.COMPLETE, () => {
            console.log(' in compFunc ')

            if (this.isLast && this.playTimes > 0) {
                this.showGoodjob();
            } else {
                this.animPlayEnd();
            }
        })

        animaNode.off('touchstart')
        animaNode.on('touchstart', (e) => {
            const pos = e.getLocation();
            const x = pos.x// - e.currentTarget.width / 2;
            const y = pos.y// - e.currentTarget.height / 2;

            const newPos = animaNode.convertToNodeSpaceAR(cc.v2(x, y));
            console.log('X: ', Math.round(newPos.x));
            console.log('Y: ', Math.round(newPos.y));
        });

        this.dragonDisplay = dragonDisplay;
        this.animaNode = animaNode;

        cb && cb();
    }

    dragonDisplay;
    animaNode;
    maxTexture;
    setOneAnima(data, cb) {
        this.setOneAnima1(data, cb);
        return;

        console.log(' setOneAnima 1')

        let animaNode = new cc.Node();
        let dragonDisplay = animaNode.addComponent(dragonBones.ArmatureDisplay);


        // const middleLayer = <any>cc.find("middleLayer");

        // let myAnimNode = middleLayer?.myAnimNode;

        // let animaNode ; //= middleLayer?.myAnimNode;

        // let dragonDisplay;
        // if (!animaNode || true) { 

        //     console.log(' setOneAnima 2')

        //     animaNode = new cc.Node();
        //     dragonDisplay = animaNode.addComponent(dragonBones.ArmatureDisplay);

        //     const mapMaxScale = this._mapScaleMax;
        //     const data = this.data;
        //     animaNode.updateScale = (oldS, newS) => {

        //         console.log('in updateScale 1');

        //         const cScale = oldS;
        //         const mScale = newS;
        //         animaNode.scale = cScale / mScale * mapMaxScale;

        //         if (data.scale) {
        //             animaNode.scale *= data.scale;
        //             console.log('in updateScale 2');
        //         } 

        //     }

        //     if (middleLayer) {
        //         console.log(' setOneAnima 3')
        //         middleLayer.myAnimNode = animaNode;
        //     }
        // } else {
        //     console.log(' setOneAnima 4')

        //     dragonDisplay = animaNode.getComponent(dragonBones.ArmatureDisplay);
        // }

        animaNode.parent = this.canvas;



        if (!data.texPngData) {
            return
        }

        console.log(' setOneAnima 5')

        const image = data.texPngData.url; //"http://staging-teach.cdn.ireadabc.com/5a0c5af3e952acd0ac83a6e5c6f03ff1.png";
        const ske = data.skeJsonData.url; //"http://staging-teach.cdn.ireadabc.com/bd825dcceea298d1146be8067ae3d17f.json";
        const atlas = data.texJsonData.url; //"http://staging-teach.cdn.ireadabc.com/246f8991b729fa3e5a7f4802de828efa.json";



        // let oldAtlas;
        // let oldAsset;
        // if (myAnimNode) {
        //     const oldDragonDisplay = myAnimNode.getComponent(dragonBones.ArmatureDisplay)
        //     oldAtlas = oldDragonDisplay.dragonAtlasAsset;
        //     oldAsset = oldDragonDisplay.dragonAsset;
        // }



        cc.assetManager.loadRemote(image, (error, texture) => {

            console.log(' setOneAnima 6')

            // cc.loader.load({url: atlas, type: 'txt'}, (error, atlasJson) => {

            cc.assetManager.loadAny({ url: atlas, reload: true }, (error, atlasJson) => {

                console.log(' setOneAnima 7')

                // cc.loader.load({url: ske, type: 'txt'}, (error, dragonBonesJson) => {
                cc.assetManager.loadAny({ url: ske, reload: true }, (error, dragonBonesJson) => {


                    console.log(' setOneAnima 8')



                    // console.log('  jumpData == null ');
                    // this.delayRelease(oldAtlas, oldAsset)


                    // setTimeout(() => {
                    //     if (oldAtlas) {
                    //         console.log(' in aaaa 1')
                    //         if (oldAtlas.texture) {
                    //             console.log(' in aaaa 2')
                    //             oldAtlas.texture.destroy();
                    //         }
                    //         oldAtlas.destroy();
                    //     }
                    //     if (oldAsset) {
                    //         console.log(' in aaaa 3')
                    //         oldAsset.destroy();
                    //     }

                    //     const assets = cc.assetManager.assets;
                    //     console.log('~ assets: ', assets);
                    // }, 2000);


                    // this.maxTexture = texture;
                    // const atlas = new dragonBones.DragonBonesAtlasAsset();
                    // atlas.atlasJson = atlasJson;
                    // atlas.texture = texture;

                    const atlas = new dragonBones.DragonBonesAtlasAsset();
                    atlas.atlasJson = JSON.stringify(atlasJson);
                    atlas.texture = texture;

                    console.log(' setOneAnima 9')

                    const asset = new dragonBones.DragonBonesAsset();
                    asset.dragonBonesJson = JSON.stringify(dragonBonesJson);


                    // console.log(' setOneAnima 10')
                    // animaNode.removeComponent(dragonBones.ArmatureDisplay)
                    // dragonDisplay = animaNode.addComponent(dragonBones.ArmatureDisplay);


                    console.log('dragonDisplay = ' + typeof (dragonDisplay));
                    dragonDisplay.dragonAtlasAsset = atlas;
                    console.log('汪汪汪 1')
                    dragonDisplay.dragonAsset = asset;
                    console.log('汪汪汪 2')


                    console.log('type: ' + typeof (asset.dragonBonesJson));

                    let json = JSON.parse(asset.dragonBonesJson);
                    console.log('json: ', json);

                    let armatures = json["armature"];
                    console.log('armatures: ', armatures);
                    let armatureNames = [];
                    for (let i = 0; i < armatures.length; i++) {
                        armatureNames.push(armatures[i].name);
                    }
                    console.log('armatureNames: ', armatureNames);

                    console.log(' setOneAnima 11')

                    if (armatureNames.length > 0) {
                        let defaultArmatureName = armatureNames[0];
                        dragonDisplay.armatureName = defaultArmatureName;
                        // let animationNames = dragonDisplay.getAnimationNames(defaultArmatureName);
                        let defaultArmature = armatures[0];
                        let animations = defaultArmature.animation;
                        let animationNames = [];
                        for (let i = 0; i < animations.length; i++) {
                            animationNames.push(animations[i].name);
                        }

                        animaNode['animationNames'] = animationNames;
                    }

                    console.log(' setOneAnima 12')

                    animaNode.scale = this._mapScaleMax;
                    if (this.data.scale) {
                        animaNode.scale *= this.data.scale;
                    }

                    // dragonDisplay.timeScale = 50;


                    // cb && cb();
                    // setTimeout(() => {

                    //     animaNode.parent = middleLayer;



                    //     // dragonDisplay.dragonAtlasAsset.decRef();
                    //     // dragonDisplay.destroy();
                    //     // dragonDisplay.dragonAsset.decRef();


                    //     setTimeout(() => {
                    //         callMiddleLayerFunction('PSQS_play_animate_over', null, () => {})
                    //     }, 1000);

                    // }, 10000);
                    // return ;




                    dragonDisplay.playAnimation(animaNode['animationNames'][0], 1);
                    dragonDisplay.timeScale = 0;

                    console.log(' setOneAnima 13')

                    const frameEventFunc = (e) => {
                        console.log(' in frameEventFunc ')

                        if (this.playTimes > 0) {
                            this.animChangeStep(e['name']);
                        }
                    };
                    dragonDisplay.off(dragonBones.EventObject.FRAME_EVENT)
                    dragonDisplay.on(dragonBones.EventObject.FRAME_EVENT, frameEventFunc)

                    console.log(' setOneAnima 14')


                    const compFunc = (e) => {
                        console.log(' in compFunc ')

                        if (this.isLast && this.playTimes > 0) {
                            this.showGoodjob();
                        } else {
                            this.animPlayEnd();
                        }
                    }
                    dragonDisplay.off(dragonBones.EventObject.COMPLETE)
                    dragonDisplay.on(dragonBones.EventObject.COMPLETE, compFunc)

                    console.log(' setOneAnima 15')

                    const touchFunc = (e) => {

                        console.log(' in touchFunc ')

                        const pos = e.getLocation();
                        const x = pos.x// - e.currentTarget.width / 2;
                        const y = pos.y// - e.currentTarget.height / 2;

                        const newPos = animaNode.convertToNodeSpaceAR(cc.v2(x, y));
                        console.log('X: ', Math.round(newPos.x));
                        console.log('Y: ', Math.round(newPos.y));
                    }
                    animaNode.off('touchstart')
                    animaNode.on('touchstart', touchFunc)


                    console.log(' setOneAnima 16')

                    this.dragonDisplay = dragonDisplay;
                    this.animaNode = animaNode;

                    cb && cb();


                    // console.log("animaNode: ", animaNode);

                });
            });
        });

    }

    delayRelease(oldAtlas, oldAsset, delteItem = null) {
        setTimeout(() => {


            if (oldAtlas) {
                console.log(' in aaaa 1')
                if (oldAtlas.texture) {
                    console.log(' in aaaa 2')
                    oldAtlas.texture.destroy();
                }
                oldAtlas.destroy();
            }
            if (oldAsset) {
                console.log(' in aaaa 3')
                oldAsset.destroy();
            }

            if (delteItem) {
                delteItem.removeFromParent();
            }
            const assets = cc.assetManager.assets;
            console.log('~ assets: ', assets);
        }, 2000);
    }

    curTextObj;
    checkShowText() {
        if (this.audioId == null) {
            return;
        }

        if (!this.curTextObj) {
            this.curTextObj = this.getCurTextObj();
        }

        if (!this.curTextObj) {
            return;
        }

        const currentTime = cc.audioEngine.getCurrentTime(this.audioId);
        const startTime = this.curTextObj.time;

        if (currentTime >= startTime) {
            this.showText(this.curTextObj, currentTime);
        }


    }

    getCurTextObj() {
        const data = this.textArr[this.textArrIndex];
        if (data) {
            this.textArrIndex++;
        }
        return data;
    }

    textLabel;
    showText(textObj, currentTime) {
        if (textObj.isShow) {
            return;
        }
        textObj.isShow = true;

        if (currentTime > Number(textObj.time) + Number(textObj.duration)) {
            this.curTextObj = null;
            return;
        }

        console.log('textObj: ', textObj);


        if (!this.textLabel) {
            this.textLabel = this.getTextLabel();
        }

        if (this.textLabel.curTween) {
            this.textLabel.curTween.stop();
        }


        this.textLabel.node.opacity = 0;
        this.textLabel.string = `<outline color=white width=4>${textObj.data}</outline>`

        if (textObj.duration) {
            this.textLabel.curTween = cc.tween(this.textLabel.node)
                .to(0.2, { opacity: 255 }, { easing: 'sineOut' })
                .delay(textObj.duration)
                .call(() => {
                    this.curTextObj = null;
                })
                .to(0.1, { opacity: 0 })
                .start();
        } else {
            this.textLabel.curTween = cc.tween(this.textLabel.node)
                .to(0.2, { opacity: 255 }, { easing: 'sineOut' })
                .start();
        }

    }

    getTextLabel() {
        const richTextNode = new cc.Node();
        richTextNode.y = -this.canvas.height / 2 + 20 * this._mapScaleMin;
        richTextNode.opacity = 0;
        richTextNode.anchorY = 0;
        richTextNode.scale = this._mapScaleMin;

        richTextNode.color = cc.Color.BLACK;
        const richText = richTextNode.addComponent(cc.RichText);
        const font = this.getFont('Muli_1GDlj');
        richText.font = font;
        richText.fontSize = 50;
        richText.lineHeight = 60;
        richText.maxWidth = this.canvas.width * 0.9;
        richText.horizontalAlign = cc.macro.TextAlignment.CENTER;


        this.canvas.addChild(richTextNode, 14);
        return richText
    }

    getFont(name) {

        const fontNode = cc.find("Canvas/res/font/" + name);
        const font = fontNode.getComponent(cc.Label).font;
        return font
    }







    update(dt) {
        this.checkShowText();
    }


    initListener() {

    }


    releaseAssets() {

        // console.log(' in releaseAssets 1');
        // const maxTexture = this.maxTexture;
        // const audioClip = this.audioClip;

        // if (cc.assetManager.cacheManager) {
        //     cc.assetManager.cacheManager.clearCache()
        // }


    }

    onDestroy() {
        console.log(' in onDestroy');
        this.releaseAssets();

        this.animaNode.removeFromParent();
        setTimeout(() => {
            if (this.dragonDisplay) {
                this.dragonDisplay.dragonAtlasAsset.texture.destroy();
                this.dragonDisplay.dragonAtlasAsset.destroy();
                this.dragonDisplay.dragonAsset.destroy();
            } else {
                console.log('没有 this.dragonDisplay');
            }
        }, 100);
    }
}
