cc.Class({
    extends: cc.Component,

    properties: {
        pfbLetter: cc.Prefab,
        dragonBone: dragonBones.ArmatureDisplay,
        audMove: cc.AudioClip,
        audRight: cc.AudioClip,
        audWrong: cc.AudioClip,
    },

    onLoad() {
        this.layerLetters = this.node.getChildByName('lettters');
        this.layerRightLetters = cc.find('wrong/rightLetters/layout', this.node);
    },

    setData(data, index) {
        this.data = data;
        this.index = index;
        this.item = this.data.dataArray[this.index];
        this.loadDragonBone();
        this.initLetters();
        this.initRightLetters();
        this.setRightLettersX();

        this.playerResult();
    },

    loadDragonBone() {
        this.dragonBone.dragonAtlasAsset = null;
        this.dragonBone.dragonAsset = null;
        this.dragonBone.armatureName = '';
        var imageUrl = this.item.tex_png;
        var skeUrl = this.item.ske_json;
        var atlasUrl = this.item.tex_json;
        // imageUrl = 'http://127.0.0.1/walkingfish_tex.png';
        // skeUrl = 'http://127.0.0.1/walkingfish_ske.json';
        // atlasUrl = 'http://127.0.0.1/walkingfish_tex.json';

        // imageUrl = 'http://127.0.0.1/B1U5L3_page1_ani_tex.png';
        // skeUrl = 'http://127.0.0.1/B1U5L3_page1_ani_ske.json';
        // atlasUrl = 'http://127.0.0.1/B1U5L3_page1_ani_tex.json';
        cc.assetManager.loadAny([{ url: atlasUrl, ext: '.txt' }, { url: skeUrl, ext: '.txt' }], (error, assets) => {
            if (error) {
                console.log(error)
            }
            else {
                cc.assetManager.loadRemote(imageUrl, (error, texture) => {
                    if (error) {
                        console.log(error)
                    }
                    else {
                        var atlas = new dragonBones.DragonBonesAtlasAsset();
                        atlas._uuid = atlasUrl;
                        atlas.atlasJson = assets[0];
                        atlas.texture = texture;

                        var asset = new dragonBones.DragonBonesAsset();
                        asset._uuid = skeUrl;
                        asset.dragonBonesJson = assets[1];

                        this.dragonBone.dragonAtlasAsset = atlas;
                        this.dragonBone.dragonAsset = asset;
                        let data = asset._dragonBonesJsonData.armature[0];
                        if (!data) {
                            return;
                        }
                        this.dragonBone.armatureName = data.name;
                        this.animationName = data.animation[0].name;

                        this.setSpineScale(data.canvas);
                    }
                });
            }
        });

    },

    setSpineScale(size) {
        let bgWidth = 250;
        let bgHeight = 250;
        if (size.width != bgWidth || size.height != bgHeight) {
            let designScale = bgWidth / bgHeight;
            let scale = size.width / size.height;
            if (scale > designScale) {
                this.dragonBone.node.parent.scale = bgWidth / size.width;
            } else {
                this.dragonBone.node.parent.scale = bgHeight / size.height;
            }
        }
    },

    initLetters() {
        let text = this.item.text;
        for (let i = 0; i < text.length; i++) {
            let node = cc.instantiate(this.pfbLetter);
            node.parent = this.layerLetters;
            let colorType = this.index % 4;
            let color = 'normal';
            if (colorType == 0) {
                color = 'yellow';
            } else if (colorType == 1) {
                color = 'green';
            } else if (colorType == 2) {
                color = 'red';
            } else if (colorType == 3) {
                color = 'blue';
            }
            let letter = text.charAt(i);
            if (this.item.letterIndex == i) {
                node.getComponent('ItemLetter').setData(color, letter, 96);
            } else {
                node.getComponent('ItemLetter').setData('normal', letter, 96);
            }
        }
        this.layerLetters.getComponent(cc.Layout).updateLayout();
    },

    initRightLetters() {
        if (/[a-z]/.test(this.data.letter1) || /[A-Z]/.test(this.data.letter1)) {
            let letter = this.data.letter1.toLowerCase();
            let node1 = cc.instantiate(this.pfbLetter);
            node1.parent = this.layerRightLetters;
            node1.getComponent('ItemLetter').setData('red2', letter.toUpperCase(), 48);
            let node2 = cc.instantiate(this.pfbLetter);
            node2.parent = this.layerRightLetters;
            node2.getComponent('ItemLetter').setData('red2', letter, 48);

            if (/[a-z]/.test(this.data.letter2) || /[A-Z]/.test(this.data.letter2)) {
                let node = cc.instantiate(this.pfbLetter);
                node.parent = this.layerRightLetters;
                node.getComponent('ItemLetter').setData('red2', '，', 48);
            }
        }


        if (/[a-z]/.test(this.data.letter2) || /[A-Z]/.test(this.data.letter2)) {
            let letter = this.data.letter2.toLowerCase();
            let node1 = cc.instantiate(this.pfbLetter);
            node1.parent = this.layerRightLetters;
            node1.getComponent('ItemLetter').setData('red2', letter.toUpperCase(), 48);
            let node2 = cc.instantiate(this.pfbLetter);
            node2.parent = this.layerRightLetters;
            node2.getComponent('ItemLetter').setData('red2', letter, 48);
        }

        this.layerRightLetters.getComponent(cc.Layout).updateLayout();
    },

    setRightLettersX() {
        this.scheduleOnce(()=>{
            let x = this.layerLetters.children[0].x;
            let x2 = x - 3;
            this.layerRightLetters.parent.x = x2;
        },1)
    },


    playerResult() {
        let isRight = this.item.isRight;
        if (isRight) {
            this.playRightResult();
        } else {
            this.playWrongResult();
        }
    },

    playRightResult() {
        this.playAudMove();
        this.getComponent(cc.Animation).play('result1');

        this.scheduleOnce(() => {
            this.playDragonBone();
            this.playAudWord(() => {
                this.playAudRight();
                this.scheduleOnce(() => {
                    this.onPlayResultDone();
                }, 1)
            });
        }, 0.5)
    },
    playWrongResult() {
        this.playAudMove();
        this.getComponent(cc.Animation).play('result1');

        this.scheduleOnce(() => {
            this.playDragonBone();
            this.playAudWord(() => {
                this.playAudWrong();
                this.getComponent(cc.Animation).play('result2');

                this.scheduleOnce(() => {
                    this.onPlayResultDone();
                }, 2)
            });
        }, 0.5)
    },

    playDragonBone() {
        this.dragonBone.playAnimation(this.animationName, 1);
    },

    playAudMove() {
        cc.audioEngine.play(this.audMove, false, 1);
    },

    playAudWord(cb) {
        // this.item.shortAudio_url = 'http://127.0.0.1/iamflying.mp3'
        cc.assetManager.loadRemote(this.item.shortAudio_url, null, (err, clip) => {
            if (err) {
                console.log(err)
                return;
            }
            let id = cc.audioEngine.play(clip, false, 1);
            let duration = cc.audioEngine.getDuration(id);
            this.scheduleOnce(() => {
                cb && cb();
            }, duration)
        });
    },

    playAudRight() {
        cc.audioEngine.play(this.audRight, false, 1);
    },
    playAudWrong() {
        cc.audioEngine.play(this.audWrong, false, 1);
    },

    onPlayResultDone() {
        cc.tween(this.node)
            .to(0.3, { opacity: 0 })
            .call(() => {
                let event = new cc.Event.EventCustom('showResultDone', true);
                event.setUserData(this.index);
                this.node.dispatchEvent(event);
                this.node.destroy();
            })
            .start()
    },
    // update (dt) {},
});
