// Learn cc.Class:
//  - https://docs.cocos.com/creator/manual/en/scripting/class.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 { setSprNodeMaxLen, btnClickAnima } from "./util";

cc.Class({

	extends: cc.Component,

	properties: {
	},

	// 生命周期 onLoad
	onLoad() {
		this.initSceneData();
		this.initSize();
	},

	_imageResList: null,
	_audioResList: null,
	_animaResList: null,
	initSceneData() {
		this._imageResList = [];
		this._audioResList = [];
		this._animaResList = [];
	},

	_designSize: null,  // 设计分辨率
	_frameSize: null,  // 屏幕分辨率
	_mapScaleMin: null,  // 场景中常用缩放（取大值）
	_mapScaleMax: null,  // 场景中常用缩放（取小值）
	_cocosScale: null,  // cocos 自缩放 （较少用到）
	initSize() {

		// 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小
		let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height
		let design_size = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height
		let f = screen_size >= design_size
		cc.Canvas.instance.fitHeight = f
		cc.Canvas.instance.fitWidth = !f

		const frameSize = cc.view.getFrameSize();
		this._frameSize = frameSize;

		this._designSize = cc.view.getDesignResolutionSize();

		let sx = cc.winSize.width / frameSize.width;
		let sy = cc.winSize.height / frameSize.height;
		this._cocosScale = Math.min(sx, sy);
		
		sx = frameSize.width / this._designSize.width;
		sy = frameSize.height / this._designSize.height;
		this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
		this._mapScaleMax = Math.max(sx, sy) * this._cocosScale;
	},


	// 生命周期 start
	start() {
		let getData = this.getData.bind(this);
		if (window && window.courseware) {
			getData = window.courseware.getData;
		}

		getData((data) => {
			console.log('data:', data);
			this.data = data || this.getDefaultData();
			this.data = JSON.parse(JSON.stringify(this.data))
			this.preloadItem()
		})
	},

	getData(cb) {
		cb(this.getDefaultData());
	},

	getDefaultData() {

		const dataJson = '{"exercisesArr":[{"answers":[{"isRight":"1","audioUrl":"http://staging-teach.cdn.ireadabc.com/f95fd3997cdd67abd51a1ab45efd855d.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/10dab2d49188db958a6a6e6b3ab7b5f5.png"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/cb6a2f948c3febbb7881e6b6a7417811.png","audioUrl":"http://staging-teach.cdn.ireadabc.com/b44fa51172b19b555fda30717c773027.mp3"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/a886b150e8792d433ced3672f4df7dfb.jpg","audioUrl":"http://staging-teach.cdn.ireadabc.com/b62600fd1e72b54d1d1c3bc71b7361af.mp3"}],"frames":[{"picUrl":"http://staging-teach.cdn.ireadabc.com/824c94f5e363c351e24dde9325731ab7.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/95638e0ab356b51f960e800e3fa5aacb.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d330a49df81ae964a705048f8ea0e0d.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3023da8f58edfa36a0a9c34e68902ef7.png"}],"hotZoneItemArr":[{"index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/28c3a876b5d0bbbb43f1b118bbe40df6.png","audio_url":"http://staging-teach.cdn.ireadabc.com/afdd23cc154d515a3afff15ccc775502.mp3","itemType":"pic","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":0.9,"imgScale":0.5089285714285714,"mapScale":0.9,"picX":0,"picY":168.00142857142856,"rect":{"x":779,"y":146.19,"width":200,"height":200}}],"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/d74f4a1fff340bf4cf02101d5bfda7e8.json","name":"女孩_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/66d2f8e8c531a4a8583e5faf2cf35e41.json","name":"女孩_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/546d11d5c1abbe2a0e442fe4816718b7.png","name":"女孩_tex.png"},"bg":{"rect":{"x":0,"y":-78.18857142857144,"width":1152,"height":690.3771428571429}}},{"answers":[{"isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/b62600fd1e72b54d1d1c3bc71b7361af.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/cb6dfd436c533f44e8e9fdd594458576.png"},{"isRight":"1","audioUrl":"http://staging-teach.cdn.ireadabc.com/8b5ecca5d4509e1b8a7e81e69d8db615.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/b2b296923e5fd09e77cd29fd3883f78e.png"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/3fed3a7bacc07dfb84de7196a50d39ab.png","audioUrl":"http://staging-teach.cdn.ireadabc.com/919b2c150b41b3306869ebe78ecb70b3.mp3"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/9f9361601b4f2dbd60f037c6996a5af6.png","isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/a252c069d04f8e04f91b2a1394072f30.mp3"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/2f65d31e390318626fce1180bb09b2ea.png","isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/b44fa51172b19b555fda30717c773027.mp3"}],"frames":[{"picUrl":"http://staging-teach.cdn.ireadabc.com/25a82fd9d55b026a76d2caaeed754a02.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/25a82fd9d55b026a76d2caaeed754a02.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d8d02f661a45283aa4eef1b6faed704.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/8c1833c5a38efea3394ad78a44cd8801.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d8d02f661a45283aa4eef1b6faed704.png"}],"hotZoneItemArr":[{"index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/28c3a876b5d0bbbb43f1b118bbe40df6.png","audio_url":"http://staging-teach.cdn.ireadabc.com/518441578f9d37076d87ef067c70a734.mp3","itemType":"pic","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":0.9,"imgScale":0.5089285714285714,"mapScale":0.9,"picX":793,"picY":160,"rect":{"x":693,"y":117,"width":200,"height":200}}],"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/6db25cc732cb592dd26295aaefdd016a.json","name":"FT01测试_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/9223e48368163e5d2bd556aa869b4610.json","name":"FT01测试_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/f7314ee89b8f27dc6b7cfcd6831ed728.png","name":"FT01测试_tex.png"},"bg":{"rect":{"x":0,"y":-57,"width":1152,"height":648},"picUrl":"http://staging-teach.cdn.ireadabc.com/0b6497174aed7ae05127d1eb8c29d94a.jpg"}}],"bg":{"rect":{"x":0,"y":-153.75,"width":1152,"height":841.5}},"title":{"val":"Find Body Part","audioUrl":"http://staging-teach.cdn.ireadabc.com/ef597f87e534ab2c73f4f9ed34eb26fa.mp3"}}';
		const data = JSON.parse(dataJson);
		return data;
	},

	preloadItem() {
		this.addPreloadImage();
		this.addPreloadAudio();
		this.addPreloadAnima();
		this.preload();
	},


	addPreloadImage() {


		for (let i = 0; i < this.data.exercisesArr.length; ++i) {
			let exercises = this.data.exercisesArr[i];

			if (exercises.bg && exercises.bg.picUrl){
				this._imageResList.push({ url: exercises.bg.picUrl });
			}
			

			//循环处理备选答案的图片
			let answers = exercises.answers;
			for (let j = 0; j < answers.length; ++j) {
				let answer = answers[j];

				if (answer.picUrl) {
					this._imageResList.push({ url: answer.picUrl });
				}
			}


			let hotZoneItemArr = exercises.hotZoneItemArr;
			for (let j = 0; j < hotZoneItemArr.length; ++j) {
				let hotZoneItem = hotZoneItemArr[j];

				if (hotZoneItem.pic_url) {
					this._imageResList.push({ url: hotZoneItem.pic_url });
				}
			}
		}
	},

	addPreloadAudio() {

		//this._audioResList.push({ url: this.data.audio_url });

		if (this.data.title.audioUrl) {
			this._audioResList.push({ url: this.data.title.audioUrl });
		}

		for (let i = 0; i < this.data.exercisesArr.length; ++i) {
			let exercises = this.data.exercisesArr[i];

			//循环处理备选答案的音频
			let answers = exercises.answers;
			for (let j = 0; j < answers.length; ++j) {
				let answer = answers[j];
				
				if (answer.audioUrl) {
					this._audioResList.push({ url: answer.audioUrl });
				}
			}


			let hotZoneItemArr = exercises.hotZoneItemArr;
			for (let j = 0; j < hotZoneItemArr.length; ++j) {
				let hotZoneItem = hotZoneItemArr[j];

				if (hotZoneItem.audio_url) {
					this._audioResList.push({ url: hotZoneItem.audio_url });
				}
			}
		}
	},

	addPreloadAnima() {

	},

	preload() {

		const preloadArr = this._imageResList.concat(this._audioResList).concat(this._animaResList);
		cc.assetManager.loadAny(preloadArr, null, null, (err, data) => {

			this.loadEnd();
			if (window && window["air"]) {
				window["air"].hideAirClassLoading();
			}

			cc.debug.setDisplayStats(false);
		});
	},


	loadEnd() {
		this.initData();
		this.initAudio();
		this.initView();

	},

	_cantouch: null,
	_curIndex: null,
	_curExercise: null,
	_circleArr: null,
	initData() {
		// 所有全局变量 默认都是null 
		this._cantouch = true;

		this._curIndex = 0;

		this._curExercise = this.data.exercisesArr[this._curIndex];

		this._circleArr = [];
	},

	audioBtn: null,
	/**正确音频 */
	audioRight: null,
	/**错误音频 */
	audioError: null,
	/**重试一次音频 */
	audioTryAgain: null,
	/**刷新 */
	audioRefresh: null,
	initAudio() {
		const audioNode = cc.find('Canvas/res/audio');

		const getAudioByResName = (resName) => {
			return audioNode.getChildByName(resName).getComponent(cc.AudioSource);
		}

		this.audioBtn = getAudioByResName('btn');
		this.audioRight = getAudioByResName('good_job');
		this.audioError = getAudioByResName('error');
		this.audioTryAgain = getAudioByResName('try_again');
		this.audioRefresh = getAudioByResName('appear');
	},


	initView() {
		this.initMaskLayer();
		this.initTitle();
		this.initBtn();
		this.initExercise();
		this.showStartAudio();
	},

	maskLayer: null,
	initMaskLayer() {

		const bNode = this.getSprNode('black');
		bNode.scaleX = cc.winSize.width / bNode.width;
		bNode.scaleY = cc.winSize.height / bNode.height;
		bNode.parent = cc.find('Canvas');
		bNode.active = false;
		this.maskLayer = bNode;
	},

	showStartAudio() {
		this.playAudioByUrl(this.data.title.audioUrl, () => {
			this.showQuestionAudio();
		})
	},

	showQuestionAudio() {

		if (this._curExercise.hotZoneItemArr && this._curExercise.hotZoneItemArr.length > 0) {
			this.playAudioByUrl(this._curExercise.hotZoneItemArr[0].audio_url);
		}

	},


	initBg() {
		const bgNode = cc.find('Canvas/bg');
		bgNode.active = true;
		bgNode.opacity = 255;
		//如果客户自定义背景图片，则进行替换
		if (this._curExercise.bg.picUrl) {

			let spr = bgNode.bg;

			if(spr){
				spr.removeFromParent();
			}
			
			spr = bgNode.getComponent(cc.Sprite)

			cc.find('Canvas/decorate').active = false;

			this.getSpriteFrimeByUrl(this._curExercise.bg.picUrl, (sf) => {
				spr.spriteFrame = sf;
				
				bgNode.scaleX = this._frameSize.width / bgNode.width * this._cocosScale;
				bgNode.scaleY = this._frameSize.height / bgNode.height * this._cocosScale;
			})

		}
		else {

			bgNode.scaleX = this._frameSize.width / bgNode.width * this._cocosScale;
			bgNode.scaleY = this._frameSize.height / bgNode.height * this._cocosScale;

			cc.find('Canvas/decorate').active = true;

			const bgFloorNode = cc.find('Canvas/decorate/bg_floor');
			bgFloorNode.scaleX = this._frameSize.width / bgFloorNode.width * this._cocosScale;

			const bgTopNode = cc.find('Canvas/decorate/bg_top');
			bgTopNode.scale = this._frameSize.width / bgTopNode.width * this._cocosScale;

			const titleBgNode = this.getSprNode('bg');
			titleBgNode.parent = bgNode;

		}
	},

	titleLabel: null,
	initTitle() {
		/*
		const titleBgNode = this.getSprNode('title_bg');
		titleBgNode.parent = cc.find('Canvas');
		titleBgNode.scale = this._mapScaleMin;
		titleBgNode.anchorX = 0;
		titleBgNode.anchorY = 1;

		titleBgNode.x = -titleBgNode.parent.width / 2
		titleBgNode.y = titleBgNode.parent.height / 2;
		*/
		const titleBgNode = cc.find('Canvas/title_bg');

		titleBgNode.zIndex = 99;

		const labelNode = new cc.Node();
		labelNode.parent = titleBgNode;
		const label = labelNode.addComponent(cc.RichText);
		const size = 36
		label.font = cc.find('Canvas/res/font/FatMarker').getComponent(cc.Label).font;
		label.string = `<size=${size}><color=#6e160c>${this.data.title.val}</color></size>`
		label.horizontalAlign = cc.macro.TextAlignment.LEFT
		labelNode.anchorX = 0.5;
		labelNode.anchorY = 0.5;
		labelNode.rotation = -3;
		


		this.titleLabel = label;

		const maxW = titleBgNode.width * 0.65;
		if (labelNode.width > maxW) {
			labelNode.scale = maxW / labelNode.width;
		}

		labelNode.x = titleBgNode.width / 2 - 20 * this._cocosScale;
		labelNode.y = -(titleBgNode.height - labelNode.height) / 2;

		titleBgNode.addComponent(cc.Button);
		titleBgNode.on('click', () => {
			this.playAudioByUrl(this.data.title.audioUrl);
		});



	},




	initBtn() {

		const bottomPart = cc.find('Canvas/bottomBtn')
		bottomPart.scale = this._mapScaleMin;
		//bottomPart.x = bottomPart.parent.width / 2;
		//bottomPart.y = -bottomPart.parent.height / 2;

		const lastBtn = bottomPart.getChildByName('btn_last');

		const nextBtn = bottomPart.getChildByName('btn_next');

		const refreshBtn = bottomPart.getChildByName('btn_refresh');

		btnClickAnima(lastBtn)
		lastBtn.on('click', () => {
			if (!this._cantouch) {
				return;
			}
			this._cantouch = false;
			this.lastBtnClick();
			this.refreshBtnStatue();
		})

		btnClickAnima(nextBtn)
		nextBtn.on('click', () => {
			if (!this._cantouch) {
				return;
			}
			this._cantouch = false;
			this.nextBtnClick();
			this.refreshBtnStatue();
		})

		btnClickAnima(refreshBtn)
		refreshBtn.on('click', () => {

			console.log("this._cantouch: ", this._cantouch);
			if (!this._cantouch) {
				return;
			}
			this._cantouch = false;
			this.refreshBtnClick();
			this.refreshBtnStatue();
		})

		this.refreshBtnStatue();
	},

	refreshBtnStatue() {

		const lastBtn = cc.find('Canvas/bottomBtn/btn_last');
		const nextBtn = cc.find('Canvas/bottomBtn/btn_next');

		lastBtn.opacity = 255;
		nextBtn.opacity = 255;


		if (this._curIndex <= 0) {
			lastBtn.opacity = 80;
		}
		if (this._curIndex >= this.data.exercisesArr.length - 1) {
			nextBtn.opacity = 80;
		}

	},

	lastBtnClick() {
		if (this._curIndex <= 0) {
			this._cantouch = true;
			return;
		}

		cc.audioEngine.play(this.audioBtn.clip, false, 0.1)

		this._curIndex--;
		this._curExercise = this.data.exercisesArr[this._curIndex];

		this.showNewGroup();
	},

	nextBtnClick() {
		if (this._curIndex >= this.data.exercisesArr.length - 1) {
			this._cantouch = true;
			return;
		}

		cc.audioEngine.play(this.audioBtn.clip, false, 0.1)

		this._curIndex++;
		this._curExercise = this.data.exercisesArr[this._curIndex];

		this.showNewGroup();
	},

	refreshBtnClick() {
		cc.audioEngine.play(this.audioRefresh.clip, false, 0.2);
		this.showNewGroup();
	},

	showNewGroup() {

		this.showMaskLayer(() => {

			this.initExercise();

			this.hideMaskLayer(() => {
				this._cantouch = true;
				this.showQuestionAudio();
			});
		})
	},

	showMaskLayer(cb) {
		this.maskLayer.opacity = 0;
		this.maskLayer.active = true;
		cc.tween(this.maskLayer)
			.to(0.5, { opacity: 255 }, { easing: 'sineOut' })
			.call(() => {
				cb()
			})
			.start()
	},

	hideMaskLayer(cb = null) {
		this.maskLayer.opacity = 255;
		cc.tween(this.maskLayer)
			.to(0.5, { opacity: 0 }, { easing: 'sineIn' })
			.call(() => {
				this.maskLayer.active = false;
				if (cb) {
					cb()
				}
			})
			.start()
	},


	initCenterPart() {
		const centerPart = cc.find('Canvas/stage/centerPart');
		centerPart.scale = this._mapScaleMin;

		this.setOneAnima(this._curExercise);

		if (centerPart.bubbleArr) {
			centerPart.bubbleArr.forEach((bubble, i) => {
				bubble.removeFromParent();
			});
		}

		centerPart.bubbleArr = [];

		for (let i = 0; i < this._curExercise.hotZoneItemArr.length; ++i) {

			let hotZoneItem = this._curExercise.hotZoneItemArr[i];

			this.getSprNodeByUrl(hotZoneItem.pic_url, (bubbleSpr) => {

				if (centerPart.bubbleArr[i]) {
					centerPart.bubbleArr[i].removeFromParent();
				}

				let bubble_bg = cc.find('Canvas/stage/centerPart/bubble_bg');
				bubble_bg.zIndex = 4;

				bubbleSpr.node.parent = bubble_bg;

				let rate = bubble_bg.width / this._curExercise.bg.rect.width;
				
				let rect = {};
				rect.x = hotZoneItem.rect.x * rate;
				rect.y = hotZoneItem.rect.y * rate;
				rect.width = hotZoneItem.rect.width * rate;
				rect.height = hotZoneItem.rect.height * rate;

				let x = rect.x + rect.width / 2 - bubble_bg.width / 2;
				
				let y = bubble_bg.height / 2 - (rect.y + rect.height / 2);

				bubbleSpr.node.x = x;
				bubbleSpr.node.y = y;
				bubbleSpr.node.scale = 0;
				bubbleSpr.zIndex = 5;
				centerPart.bubbleArr[i] = bubbleSpr.node;

				bubbleSpr.node.addComponent(cc.Button)
				bubbleSpr.node.on('click', () => {

					this.playAudioByUrl(hotZoneItem.audio_url, () => {

					});
				});

				cc.tween(bubbleSpr.node)
					.to(0.7, { scale: this._mapScaleMin }, { easing: 'cubicIn' }).call(() => {

					}).start();
			});
		}
	},

	initExercise() {

		let answers = this._curExercise.answers;

		this.initBg();

		this.initCenterPart();

		const circleArr = this.getCircleArr(answers);

		this._circleArr = circleArr;

		circleArr.forEach((item, i) => {
			const data = answers[i];
			if (data) {

				this.getSprNodeByUrl(data.picUrl, (spr) => {

					if (!item.blackMask) {
						const blackMaskNode = this.getSprNode('mask')
						blackMaskNode.parent = item;
						blackMaskNode.scale = 1.0;
						blackMaskNode.x = 0;
						blackMaskNode.y = 3;

						blackMaskNode.zIndex = 2;
						item.blackMask = blackMaskNode;
					}
					item.blackMask.active = false;

					if (!item.blackMask.icon) {
						const icon = this.getSprNode('circle_x');
						icon.parent = item.blackMask;
						item.blackMask.icon = icon;
					}
					item.blackMask.icon.scale = 0;

					if(!item.board2){
						const board2 = this.getSprNode('option_board2');
						board2.parent = item;
						board2.scale = 1.0;
						board2.zIndex = 1;
						board2.opacity = 0;
						item.board2 = board2;
					}

					if (!item.maskNode) {
						let maskNode = new cc.Node(); // new cc.Node();
						maskNode.parent = item;

						if (item.getChildByName('mask')) {
							maskNode = item.getChildByName('mask');
							maskNode.scale = 1.0;
							maskNode.x = 0;
							maskNode.y = 3;
							maskNode.zIndex = 2;

							const mask = maskNode.getComponent(cc.Mask);
							mask.inverted = false;
						}
						item.maskNode = maskNode
					}

					const maskNode = item.maskNode;

					

					if (item.pic) {
						item.pic.removeFromParent();
					}
					spr.node.parent = maskNode;
					let picMaxW, picMaxH
					picMaxW = item.width;
					picMaxH = item.height;
					spr.node.zIndex = 2;
					setSprNodeMaxLen(spr.node, picMaxW, picMaxH);
					item.pic = spr.node;

					spr.node.addComponent(cc.Button);
					spr.node.on('click', () => {
						if (!this._cantouch) {
							return;
						}
						
						if (data.isRight == '1') {
							this.showRightCircle(item);

							this._cantouch = false;
						} else {
							this.showWrongCircle(item);
						}
					});

				})
			}
		});

		this.addCircleSound();

		this._curExercise.isAnswered = false;

		this._cantouch = true;
	},

	_answer_node: null,
	getCircleArr(answers) {

		const circleArr = [];
		let node, circleNum = 0;
		console.log('answers: ', answers);

		const answer_3 = cc.find('Canvas/stage/answer_3');
		const answer_4 = cc.find('Canvas/stage/answer_4');
		const answer_5 = cc.find('Canvas/stage/answer_5');
		if (answers.length == 3) {
			answer_3.active = true;
			answer_4.active = false;
			answer_5.active = false;
			node = answer_3;
			circleNum = 3;

		} else if (answers.length == 4) {
			answer_3.active = false;
			answer_4.active = true;
			answer_5.active = false;
			node = answer_4;
			circleNum = 4;

		}
		else if (answers.length == 5) {
			answer_3.active = false;
			answer_4.active = false;
			answer_5.active = true;
			node = answer_5;
			circleNum = 5;
		}


		this._answer_node = node;

		for (let i = 0; i < circleNum; i++) {
			let circleNode = node.getChildByName('option_board_' + (i + 1).toString());
			if (answers[i]) {
				circleNode.active = true;
				circleNode.data = answers[i];
				circleArr.push(circleNode);
			} else {
				circleNode.active = false;
			}
		}

		return circleArr;
	},

	addCircleSound() {
		this._circleArr.forEach(item => {
			if (item.icon) {
				return;
			}

			

			const sprNode = this.getSprNode('loudspeaker');
			sprNode.parent = item;
			sprNode.x = item.width / 2.4;
			sprNode.y = item.height / 3.0;
			sprNode.zIndex = 5;
			item.icon = sprNode;

			const sprNode2 = this.getSprNode('loudspeaker_playing');
			sprNode2.parent = sprNode.parent;
			sprNode2.x = sprNode.x;
			sprNode2.y = sprNode.y;
			sprNode2.zIndex = 6;
			sprNode2.opacity = 0;
			sprNode.spr2 = sprNode2;
			

			sprNode.addComponent(cc.Button)
			sprNode.on('click', () => {

				this.showSoundAnima(sprNode, item);
				
				this.playAudioByUrl(item.data.audioUrl, () => {
					this.stopSoundAnima(sprNode);
				});
			});
		});
	},

	/**正在播放的音频节点 */
	_playingNode: null,
	showSoundAnima(iconNode, item, time = 0.4) {
		
		if (this._playingNode != iconNode && this._playingNode) {
			this.stopSoundAnima(this._playingNode);
		}

		this._playingNode = iconNode;

		iconNode.isRunAnima = true;
		iconNode.spr2.opacity = 255;
		iconNode.opacity = 0;
		item.board2.opacity = 255;console.log(item.board2);

		cc.tween(iconNode)
			.delay(time / 2)
			.call(() => {
				iconNode.spr2.opacity = 0;
				iconNode.opacity = 255;
				item.board2.opacity = 0;
			})
			.delay(time / 2)
			.call(() => {
				if (iconNode.isRunAnima) {
					this.showSoundAnima(iconNode, item);
				}
			})
			.start()
	},

	stopSoundAnima(iconNode) {
		iconNode.isRunAnima = false;
	},

	showRightCircle(circle) {

		cc.audioEngine.play(this.audioRight.clip, false, 0.3)


		cc.tween(this._answer_node)
			.to(0.7, { scale: 0 }, { easing: 'cubicIn' })
			.call(() => {

				this._answer_node.active = false;
				this._answer_node.scale = this._mapScaleMin;
				this._cantouch = true;

				this._curExercise.isAnswered = true;

				this.showDragonAnima();

				
			})
			.start();
	},

	showWrongCircle(circle) {
		if (circle.blackMask.active) {
			return;
		}

		cc.audioEngine.play(this.audioError.clip, false, 0.2)

		const showIcon = () => {
			cc.tween(circle.blackMask.icon)
				.to(0.3, { scale: 0.9 }, { easing: 'bounceOut' })
				.delay(0.2)
				.to(0.7, { scale: 0 }, { easing: 'cubicIn' })
				.start();
		}

		const hide = () => {
			circle.blackMask.opacity = 0;
			cc.tween(circle.blackMask)
				.to(0.1, { opacity: 255 })
				.call(() => {
					showIcon();
				})
				.start()
		}

		hide();
		circle.blackMask.active = true;
	},

	curDragonDisplay: null,
	setOneAnima(data) {

		const picNode = cc.find('Canvas/stage/centerPart/ani');


		if (picNode.animaNode) {
			picNode.animaNode.removeFromParent();
		}
		const animaNode = new cc.Node();
		animaNode.parent = picNode;
		animaNode.x =0;
		animaNode.y = 0;
		picNode.animaNode = animaNode;


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

		this.curDragonDisplay = dragonDisplay;

		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";
		cc.loader.load(image, (error, texture) => {

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

				cc.loader.load({url: ske, type: 'txt'}, (error, dragonBonesJson) => {

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

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

					dragonDisplay.dragonAtlasAsset = atlas;
					dragonDisplay.dragonAsset = asset;

					let json = JSON.parse(asset.dragonBonesJson);
					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);
					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);
						}

						dragonDisplay.animaNames = animationNames;
						console.log('animaNode: ', animaNode);
						
						animaNode.addComponent(cc.Button)
						animaNode.on('click', () => {

							if(this._curExercise.isAnswered){
								console.log('anima node clicked ~~~');
								this.showDragonAnima();
							}
							
						})
					}

				});
			});
		});

	},

	showDragonAnima() {
		if (this.curDragonDisplay && this.curDragonDisplay.animaNames.length > 0) {
			this.curDragonDisplay.playAnimation(this.curDragonDisplay.animaNames[0], 1);
		}
	},


















	// ------------------------------------------------
	getSprNode(resName) {
		const sf = cc.find('Canvas/res/img/' + resName).getComponent(cc.Sprite).spriteFrame;
		const node = new cc.Node();
		node.addComponent(cc.Sprite).spriteFrame = sf;
		return node;
	},


	getSpriteFrimeByUrl(url, cb) {
		cc.loader.load({ url }, (err, img) => {
			const spriteFrame = new cc.SpriteFrame(img)
			if (cb) {
				cb(spriteFrame);
			}
		})
	},

	getSprNodeByUrl(url, cb) {
		const node = new cc.Node();
		const spr = node.addComponent(cc.Sprite);
		this.getSpriteFrimeByUrl(url, (sf) => {
			spr.spriteFrame = sf;
			if (cb) {
				cb(spr);
			}
		})
	},

	_audioId : null,
	playAudioByUrl(audio_url, cb = null) {

		if(this._audioId){
			cc.audioEngine.pause(this._audioId);
		}

		if (audio_url) {
			cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
				const audioId = cc.audioEngine.play(audioClip, false, 0.8);
				this._audioId = audioId;
				if (cb) {
					cc.audioEngine.setFinishCallback(audioId, () => {
						cb();
					});
				}
			});
		}
	},

	// ------------------------------------------

});
