// 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 { getSprNode } from "./util";
import { onHomeworkFinish, getSprNode, playAudioByUrl, getScaleRateBy2Node, localPosTolocalPos, randomSortByArr, loadDragonBones, playAudio, showTrebleFirework, delayCall, removeFromArr, showBtnAnima, asyncDelay, jellyShake, showLog, formatTime, getSpriteFrimeByUrl, RandomInt, exchangeNodePos, getSprNodeByUrl } from "../script/util_demo_op_sky_stairway";

cc.Class({
	extends: cc.Component,

	properties: {
		baseWidth: {
			default: 1280,
			type: cc.Integer
		},
		baseHeight: {
			default: 720,
			type: cc.Integer
		}
	},

	onLoad() {
		cc.debug.setDisplayStats(false);
		this.initSceneData();
		this.initSize();
	},

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



	_designSize: null,
	_frameSize: null,
	_mapScaleMin: null,
	_mapScaleMax: null,
	_cocosScale: null,
	canvas: null,
	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;

		this.canvas = cc.find('Canvas');


		// cc.log('cc.Canvas: ', cc.Canvas);
	},

	isTeacher: null,
	serverAllUser: null,
	start() {

		const nextBtn = cc.find('middleLayer/BtnRight');
		if (nextBtn) {
			nextBtn.active = false;
		}

		let getData = this.getData.bind(this);
		if (window && window.courseware) {
			getData = window.courseware.getData;
		}
		getData((data, aspect) => {

			if (window['air']?.airClassInfo?.user?.classRole == 'tea') {
				this.isTeacher = true;
			}
			if (aspect) {
				console.log('aspect : ', aspect);
				this.serverAllUser = aspect.all_user;
				this.initPageData(aspect);
			}

			// this.initPageData({});


			this.data = data || this.getDefaultData();
			console.log('data:', this.data);
			console.log('dataStr:', JSON.stringify(this.data));

			this.preloadItem()
		})
	},

	// 用于存储公共数据 当翻页时清空 
	pageData: null,
	initPageData(aspect) {
		const pageDataStr = aspect?.page_aspect?.pagedata;
		if (!pageDataStr) {
			this.pageData = {};
		} else {
			this.pageData = JSON.parse(pageDataStr);
		}
		console.log('this.pageData: ', this.pageData);
	},

	setPageData(key, value, isSend = true) {



		if (this.pageData) {

			console.log('this.pageData: ', this.pageData);

			this.pageData[key] = value;
			if (isSend) {
				this.sendPageData();
			}
		}
	},

	getPageData(key) {
		if (this.pageData && this.pageData[key] != null) {
			return this.pageData[key];
		}
	},

	sendPageData() {

		const data = this.pageData;
		if (window && window.courseware) {
			let storePageAspect = window.courseware.storePageAspect;
			if (storePageAspect) {
				storePageAspect(data);
				console.log('storePageAspect : ', data);
			}
		}
	},

	_imageResList: null,
	_audioResList: null,
	_animaResList: null,
	preloadItem() {
		this.addPreloadImage();
		this.addPreloadAudio();
		this.addPreloadAnima();
		this.preload();
	},

	getData(func) {
		if (window && window.courseware) {
			window.courseware.getData(func, 'ak_08');
			return;
		}

		const middleLayer = cc.find('middleLayer');
		if (middleLayer) {
			const middleLayerComponent = middleLayer.getComponent('middleLayer');
			middleLayerComponent.getData(func);
			return;
		}

		func(this.getDefaultData());
	},



	getDefaultData() {
		// const dataJson = '{"video_url":"http://staging-teach.cdn.ireadabc.com/537aa38d43627c3997b28da1f1cc43da.mp4","lrcData":{"audio_url":"http://staging-teach.cdn.ireadabc.com/c5bc3378e4e0be11b67fc6cf625dfdf7.mp3","fontSize":24,"lineHeight":32,"lyrics":[{"time":0,"data":"","newLine":false},{"time":4.105990000000002,"data":"Apple, apple. I like apples.","newLine":false},{"time":7.992413,"data":"I like apples.","newLine":false},{"time":10.024486,"data":"What about you?","newLine":false},{"time":11.416603999999996,"data":"","newLine":false},{"time":15.850838,"data":"Banana, banana. I like bananas.","newLine":false},{"time":20.004074,"data":"I like bananas.","newLine":false},{"time":21.992325,"data":"What about you?","newLine":false},{"time":23.668069,"data":"","newLine":false},{"time":25.011329000000003,"data":"Ah, banana, my favorite!","newLine":false},{"time":27.440496,"data":"","newLine":false},{"time":28.103187000000002,"data":"Orange, orange. I like oranges.","newLine":false},{"time":31.986444,"data":"I like oranges.","newLine":false},{"time":34.104426999999994,"data":"What about you?","newLine":false},{"time":35.740390999999995,"data":"","newLine":false}]},"accompany_audio_url":"http://staging-teach.cdn.ireadabc.com/6d59bf82e77182bcb6520e3a3593b579.mp3"}';
		// const data1 = JSON.parse(dataJson);
		// return data1;

		return  {"groupArr":[{"grid":[[{},{"pic_url":"http://staging-teach.cdn.ireadabc.com/926282a49b0a7d0d13a7e0909c33048a.png"},{},{},{}],[{},{"value":"b","isEmpty":true},{"value":""},{"value":""},{}],[{"pic_url":"http://staging-teach.cdn.ireadabc.com/7eb54a8c001cc337eae2a2357ffb26a4.png"},{"value":"a","isEmpty":true},{"value":"n"},{"value":"t"},{}],[{},{"value":"g","isEmpty":true},{"value":""},{"value":""},{}],[{},{},{},{},{}]],"optionArr":[{"value":"a"},{"value":"b"},{"value":"c"},{"value":"d"},{"value":"e"},{"value":"f"},{"value":"g"},{"value":"h"}]},{"grid":[[{},{},{"pic_url":"http://staging-teach.cdn.ireadabc.com/e572b9344bbfc291ffbc77db72c227fb.png"},{},{}],[{},{"value":""},{"value":"b"},{},{}],[{"pic_url":"http://staging-teach.cdn.ireadabc.com/2c01fe6071567d3a2d640b8f2e04022d.png"},{"value":"c","isEmpty":true},{"value":"a","isEmpty":true},{"value":"t"},{}],[{},{},{"value":"g","isEmpty":false},{},{}],[{},{},{},{},{}]],"optionArr":[{"value":"a"},{"value":"c"},{"value":"d"},{"value":"d"},{"value":"d"}]},{"grid":[[{},{},{},{"pic_url":"http://staging-teach.cdn.ireadabc.com/926282a49b0a7d0d13a7e0909c33048a.png"},{}],[{},{},{},{"value":"b"},{}],[{"pic_url":"http://staging-teach.cdn.ireadabc.com/afb9386cc69c23f9ca46af6cf4f201a6.png"},{"value":"t"},{"value":"e","isEmpty":true},{"value":"a","isEmpty":true},{}],[{},{},{},{"value":"g"},{}],[{},{},{},{},{}]],"optionArr":[{"value":"e"},{"value":"a"},{"value":"d"},{"value":"d"},{"value":"d"},{"value":"d"},{"value":"d"}]},{"grid":[[{},{},{},{},{}],[{},{},{"value":"r","isEmpty":true},{},{}],[{},{"value":"g"},{"value":"a"},{"value":"b","isEmpty":true},{"pic_url":"http://staging-teach.cdn.ireadabc.com/afb9386cc69c23f9ca46af6cf4f201a6.png"}],[{},{},{"value":"c"},{},{}],[{},{},{"pic_url":"http://staging-teach.cdn.ireadabc.com/9244140539250c15874d7ff9d1509c75.png"},{},{}]],"optionArr":[{"value":"b"},{"value":"r"},{"value":"d"},{"value":"d"},{"value":"d"},{"value":"d"},{"value":"d"}]}],"begin_audio_url":"http://staging-teach.cdn.ireadabc.com/f5918cfa1f0bf144e1bbbcf9189f1e4c.mp3","idle_audio_url":"http://staging-teach.cdn.ireadabc.com/f5918cfa1f0bf144e1bbbcf9189f1e4c.mp3"}
		// return  {"quesArr":[{"itemType":"choice","bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/311e82c0bef7eb5ca9b30b97433634b8.png","isShowDebugLine":true,"rect":{"x":109.5,"y":0,"width":1004,"height":753}},"hotZoneItemArr":[{"id":"1656987173954","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/e0f7140d677ee316237b0429566a0bb7.png","itemType":"pic","fontScale":0.95546875,"imgScale":0.5822535206718347,"imgSizeW":1440,"imgSizeH":796,"mapScale":0.95546875,"dragDot":{"x":611.5,"y":322.5},"gIdx":"1","rect":{"x":83.94,"y":106.24,"width":838.45,"height":463.47}},{"id":"1656987238117","index":1,"audio_url":"http://staging-teach.cdn.ireadabc.com/fa5e4d4542227efbec5b187a09b6d2c7.mp3","itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/8aaa1c24a8fdc286dc0e077a1340368e.json","name":"octopus_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/4dc3de5b042acee6d83322b237c3156b.json","name":"octopus_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/ca8aa7616818313b90b9c9fd23c638ad.png","name":"octopus_tex.png"},"dragDot":{"x":611.5,"y":322.5},"gIdx":"0","posX":901.5,"posY":545.5,"rect":{"x":677.7,"y":520.1,"width":325.72,"height":233.49}}]}],"pageArr":[{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/311e82c0bef7eb5ca9b30b97433634b8.png","rect":{"x":166.17,"y":0,"width":890.67,"height":668}},"hotZoneItemArr":[{"id":"1656989557052","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/63afd85384bb48089937a9279aa7ed61.png","audio_url":"http://staging-teach.cdn.ireadabc.com/15919338083633fcbcefc08615e7e86d.mp3","itemType":"pic","fontScale":0.95546875,"imgScale":0.798752452432188,"imgSizeW":609,"imgSizeH":512,"mapScale":0.95546875,"dragDot":{"x":611.5,"y":376.5},"gIdx":"1","rect":{"x":202.1,"y":129.52,"width":486.44,"height":408.96}},{"id":"1656989611856","index":1,"itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/246f6c4b82ee6787b9e43bb7d7c25b16.json","name":"I-am-thin弹出_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/02d92318a34b4cfe9a98d991fc0c8896.json","name":"I-am-thin弹出_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/0e6209a36e45bad7965c609fcde5176a.png","name":"I-am-thin弹出_tex.png"},"dragDot":{"x":611.5,"y":376.5},"gIdx":"0","posX":929.5,"posY":652.5,"rect":{"x":565.54,"y":490.13,"width":323.8,"height":177.42}}]},{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/7e2e266a6e2e596103ac973e0a22d3ac.jpg","rect":{"x":178.83,"y":0,"width":865.33,"height":649}},"hotZoneItemArr":[{"id":"1656989706585","index":0,"audio_url":"http://staging-teach.cdn.ireadabc.com/40cb0cf356a9596c04932eb2aa798eed.mp3","itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/83e84d640ba79992ec83ab7382fd7ebf.json","name":"gorilla_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/a079c8b9508087d8a9dde926b2a9664d.json","name":"gorilla_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/7253c2f57f212525c3cca89545156fce.png","name":"gorilla_tex.png"},"dragDot":{"x":611.5,"y":376.5},"gIdx":"0","posX":219.5,"posY":276.5,"rect":{"x":8.62,"y":152.12,"width":172.38,"height":172.38}}]}],"finish_audio_url":"http://staging-teach.cdn.ireadabc.com/ae270b1453fa86f7d4ee432382f60a70.mp3"};
		// return {"quesArr":[{"itemType":"choice","bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/311e82c0bef7eb5ca9b30b97433634b8.png","isShowDebugLine":true,"rect":{"x":109.5,"y":0,"width":1004,"height":753}},"hotZoneItemArr":[{"id":"1656987173954","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/e0f7140d677ee316237b0429566a0bb7.png","itemType":"pic","fontScale":0.95546875,"imgScale":0.5822535206718347,"imgSizeW":1440,"imgSizeH":796,"mapScale":0.95546875,"dragDot":{"x":611.5,"y":322.5},"gIdx":"1","rect":{"x":83.94,"y":106.24,"width":838.45,"height":463.47}},{"id":"1656987238117","index":1,"audio_url":"http://staging-teach.cdn.ireadabc.com/fa5e4d4542227efbec5b187a09b6d2c7.mp3","itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/8aaa1c24a8fdc286dc0e077a1340368e.json","name":"octopus_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/4dc3de5b042acee6d83322b237c3156b.json","name":"octopus_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/ca8aa7616818313b90b9c9fd23c638ad.png","name":"octopus_tex.png"},"dragDot":{"x":611.5,"y":322.5},"gIdx":"0","posX":901.5,"posY":545.5,"rect":{"x":677.7,"y":520.1,"width":325.72,"height":233.49}}]}],"pageArr":[{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/311e82c0bef7eb5ca9b30b97433634b8.png","rect":{"x":173.5,"y":0,"width":876,"height":657}},"hotZoneItemArr":[{"id":"1656989557052","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/63afd85384bb48089937a9279aa7ed61.png","audio_url":"http://staging-teach.cdn.ireadabc.com/15919338083633fcbcefc08615e7e86d.mp3","itemType":"pic","fontScale":0.95546875,"imgScale":0.7856028104331443,"imgSizeW":609,"imgSizeH":512,"mapScale":0.95546875,"dragDot":{"x":611.5,"y":376.5},"gIdx":"1","rect":{"x":198.78,"y":127.39,"width":478.43,"height":402.23}},{"id":"1656989611856","index":1,"itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/8aaa1c24a8fdc286dc0e077a1340368e.json","name":"octopus_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/4dc3de5b042acee6d83322b237c3156b.json","name":"octopus_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/ca8aa7616818313b90b9c9fd23c638ad.png","name":"octopus_tex.png"},"dragDot":{"x":611.5,"y":376.5},"gIdx":"0","posX":929.5,"posY":652.5,"rect":{"x":556.23,"y":482.06,"width":318.47,"height":174.5}}]},{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/7e2e266a6e2e596103ac973e0a22d3ac.jpg","rect":{"x":109.5,"y":0,"width":1004,"height":753}},"hotZoneItemArr":[{"id":"1656989706585","index":0,"audio_url":"http://staging-teach.cdn.ireadabc.com/40cb0cf356a9596c04932eb2aa798eed.mp3","itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/83e84d640ba79992ec83ab7382fd7ebf.json","name":"gorilla_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/a079c8b9508087d8a9dde926b2a9664d.json","name":"gorilla_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/7253c2f57f212525c3cca89545156fce.png","name":"gorilla_tex.png"},"dragDot":{"x":611.5,"y":376.5},"gIdx":"0","posX":219.5,"posY":276.5,"rect":{"x":10,"y":176.5,"width":200,"height":200}}]}],"finish_audio_url":"http://staging-teach.cdn.ireadabc.com/ae270b1453fa86f7d4ee432382f60a70.mp3"}
		// return {"song_video_url":"http://staging-teach.cdn.ireadabc.com/52dc3ea47b718f3099496c79564f3f25.mp4","pageArr":[{"itemType":"sound","text":"apple","bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/a8e8941e33dfd07333f186854646e3f2.png","rect":{"x":396.27,"y":0,"width":430.47,"height":557}},"hotZoneItemArr":[{"id":"1655283968382","index":0,"itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"dragDot":{"x":611.5,"y":278.5},"gIdx":"0","posX":516.5,"posY":254.5,"rect":{"x":56.73,"y":223,"width":127,"height":63}},{"id":"1655283976912","index":1,"itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"dragDot":{"x":611.5,"y":278.5},"gIdx":"0","posX":710.4957911909361,"posY":258.4978805526737,"rect":{"x":250.73,"y":227,"width":127,"height":63}}],"ques_video_url":"http://staging-teach.cdn.ireadabc.com/99397832b6a8535c876ac029a5ca0dc5.mp4","wait_video_url":"http://staging-teach.cdn.ireadabc.com/8b9f69a4bf1839dc72dd4b042ffa124e.mp4","right_video_url":"http://staging-teach.cdn.ireadabc.com/00e97b098b0915033f537e92ecf256d6.mp4","wrong_video_url":"http://staging-teach.cdn.ireadabc.com/c66483c63d7cb614d496eca49535f79b.mp4","end_video_url":"http://staging-teach.cdn.ireadabc.com/14a205520c902bb5cdb1499ffe8b8b42.mp4"},{"itemType":"choice","bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/795cdecd744e77097534afe84167a11c.png","rect":{"x":223.06,"y":0,"width":776.89,"height":437}},"hotZoneItemArr":[{"id":"1655284245600","index":0,"itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"dragDot":{"x":611.5,"y":278.5},"gIdx":"0","selectType":"right","posX":502.5549478910865,"posY":294.11453367770866,"rect":{"x":228.32,"y":195,"width":102.35,"height":198.23}},{"id":"1655284254056","index":1,"itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"dragDot":{"x":611.5,"y":278.5},"gIdx":"0","selectType":"wrong","posX":686.9368654913993,"posY":301.47891856910906,"rect":{"x":416.31,"y":189,"width":95.14,"height":224.96}}],"ques_video_url":"http://staging-teach.cdn.ireadabc.com/9cf8b3c1ea478ce4146f1348504adaad.mp4","wait_video_url":"http://staging-teach.cdn.ireadabc.com/22429094400d7da6a11ae7c4d754786b.mp4","right_video_url":"http://staging-teach.cdn.ireadabc.com/56fc776578ed4ce53206712ddea34b56.mp4","wrong_video_url":"http://staging-teach.cdn.ireadabc.com/72b502a269be5256813cf083aff747d1.mp4"}],"ques_video_url":"http://staging-teach.cdn.ireadabc.com/bd34a6ead4db21ad42db082a0d1aaf49.mp4","wait_video_url":"http://staging-teach.cdn.ireadabc.com/763043d051db1d33ba53d21ed5f7aba3.mp4"}
		// return {"song_video_url":"http://staging-teach.cdn.ireadabc.com/52dc3ea47b718f3099496c79564f3f25.mp4","pageArr":[{"itemType":"sound","text":"apple","bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/a8e8941e33dfd07333f186854646e3f2.png","rect":{"x":396.27,"y":0,"width":430.47,"height":557}},"hotZoneItemArr":[{"id":"1655283968382","index":0,"itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"dragDot":{"x":611.5,"y":278.5},"gIdx":"0","posX":516.5,"posY":254.5,"rect":{"x":56.73,"y":223,"width":127,"height":63}},{"id":"1655283976912","index":1,"itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"dragDot":{"x":611.5,"y":278.5},"gIdx":"0","posX":710.4957911909361,"posY":258.4978805526737,"rect":{"x":250.73,"y":227,"width":127,"height":63}}],"ques_video_url":"http://staging-teach.cdn.ireadabc.com/3efed880a6f393a53475c94ecb28141a.mp4","wait_video_url":"http://staging-teach.cdn.ireadabc.com/e885bf09a96f3974341cee9586f9cbe8.mp4","right_video_url":"http://staging-teach.cdn.ireadabc.com/82dd7cc4e53dd7b15ccbf6dffc015fde.mp4","wrong_video_url":"http://staging-teach.cdn.ireadabc.com/a06f8ec573abcca6823a41be42854108.mp4","end_video_url":"http://staging-teach.cdn.ireadabc.com/d0f38ced4ec9102c3c6416367858de21.mp4"},{"itemType":"choice","bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/795cdecd744e77097534afe84167a11c.png","rect":{"x":223.06,"y":0,"width":776.89,"height":437}},"hotZoneItemArr":[{"id":"1655284245600","index":0,"itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"dragDot":{"x":611.5,"y":278.5},"gIdx":"0","selectType":"right","posX":502.5549478910865,"posY":294.11453367770866,"rect":{"x":228.32,"y":195,"width":102.35,"height":198.23}},{"id":"1655284254056","index":1,"itemType":"rect","fontScale":0.95546875,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":0.95546875,"dragDot":{"x":611.5,"y":278.5},"gIdx":"0","selectType":"wrong","posX":686.9368654913993,"posY":301.47891856910906,"rect":{"x":416.31,"y":189,"width":95.14,"height":224.96}}],"ques_video_url":"http://staging-teach.cdn.ireadabc.com/1ecca079b8a2b7885784492eb6adf8e5.mp4","wait_video_url":"http://staging-teach.cdn.ireadabc.com/f180fd68aaa1c52a728bd7808192e084.mp4","right_video_url":"http://staging-teach.cdn.ireadabc.com/d1d4a6d797315d7d8c9fed0fd0d91b4a.mp4","wrong_video_url":"http://staging-teach.cdn.ireadabc.com/143e5abe401f06614005c58e7ae25ab1.mp4"}],"ques_video_url":"http://staging-teach.cdn.ireadabc.com/bd34a6ead4db21ad42db082a0d1aaf49.mp4","wait_video_url":"http://staging-teach.cdn.ireadabc.com/763043d051db1d33ba53d21ed5f7aba3.mp4"}

		// return { "lrcData": { "video_url": "http://staging-teach.cdn.ireadabc.com/a73a97faf1638403b36784a2141b92c1.mp4", "lyrics": [{ "time": 0.7127950000000012, "data": "ant apple alligator axe.", "newLine": false, "textArr": [{ "data": "ant " }, { "isIcon": true, "url": "http://staging-teach.cdn.ireadabc.com/c8abf7383d65bcbdba8f390785cece60.png" }, { "isHidden": true, "data": "apple " }, { "data": "alligator " }, { "isHidden": true, "data": "ax" }] }, { "time": 4.957703, "data": "ant apple alligator axe.", "newLine": false, "textArr": [{ "data": "aa" }] }, { "time": 9.020296000000002, "data": "ant apple alligator axe.", "newLine": false, "textArr": [{ "isIcon": true, "url": "http://staging-teach.cdn.ireadabc.com/f6f4bbef497409fef3c8f1d375893829.png" }] }, { "time": 13.198415, "data": "ant apple alligator axe.", "newLine": false, "textArr": [{ "isIcon": true, "url": "http://staging-teach.cdn.ireadabc.com/7b18a7931d64f7b9e8b7ecd25cb5e3d4.png" }, { "data": "bbbbb  " }, { "isIcon": true, "url": "http://staging-teach.cdn.ireadabc.com/e12d13282a10f92d65ac41b4aecaad4c.png" }] }, { "time": 17.376999, "data": "", "newLine": false, "textArr": [] }] }, "audio_url": "http://staging-teach.cdn.ireadabc.com/6db45327fad91c086de94e9d96cb8c7d.mp3", "mute_video_url": "http://staging-teach.cdn.ireadabc.com/1200e283244f6f62f311e96ed1dabf04.mp4", "begin_audio_url": "http://staging-teach.cdn.ireadabc.com/83513f8d6083ebe072e3f9e47a21558a.mp3", "record_audio_url": "http://staging-teach.cdn.ireadabc.com/5285e1e88a26a08783757e9c43a8653f.mp3", "fight_audio_url": "http://staging-teach.cdn.ireadabc.com/440cf9d57752b30691d90ed565e8c924.mp3", "compose_audio_url": "http://staging-teach.cdn.ireadabc.com/a5fa20e0c6024421b0d9a7007c303503.mp3", "finish_audio_url": "http://staging-teach.cdn.ireadabc.com/a41f0f2bf190396e2641ec8dada8edfe.mp3", "song_video_url": "http://staging-teach.cdn.ireadabc.com/78734cdbe1cf0b8d665a976e7bbf5f65.mp4" }
	},

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

			this.addServerListener();

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

	addPreloadImage() {

		const groupArr = this.data.groupArr;
		if (!groupArr || groupArr.length == 0) {
			return;
		} 

		for (let i=0; i<groupArr.length; i++) {
			const grid = groupArr[i].grid;
			for (let x=0; x<5; x++) {
				for (let y=0; y<5; y++) {
					if (grid[x][y].pic_url) {
						this._imageResList.push({ url: grid[x][y].pic_url });

					}

				}
			}
		}



	},

	addPreloadAudio() {

		if (this.data.idle_audio_url) {
			this._audioResList.push({url: this.data.idle_audio_url || ''});
		}

		if (this.data.begin_audio_url) {
			this._audioResList.push({url: this.data.begin_audio_url || ''});
		}

	},

	addPreloadAnima() {


		const loadOneAnim = (hotZoneItemArr) => {
			if (!hotZoneItemArr) {
				return;
			}
			hotZoneItemArr.forEach((item) => {
				if (item.skeJsonData) {
					this._animaResList.push({ url: item.skeJsonData.url || '' });
					this._animaResList.push({ url: item.texJsonData.url || '' });
					this._animaResList.push({ url: item.texPngData.url || '' });
				}
			})
		}
	
		const pageArr = this.data.pageArr;
		if (!pageArr || pageArr.length == 0) {
			return;
		} 

		for (let i=0; i<pageArr.length; i++) {
			const item = pageArr[i];

			if (item.hotZoneItemArr) {
				loadOneAnim(item.hotZoneItemArr)
			}
		}
	},


	loadEnd(cb) {


		console.log(' in loadEnd ')
		if (this.isDestroy) {
			return;
		}

		this.initData();
		this.initAudioEffect();

		this.initView();


		this.initListener();

		cb();

	},

	initMusic() {
		// cc.assetManager.loadRemote(this.data.bg_audio_url, (err, clip) => {
		// 	cc.audioEngine.setMusicVolume(0.3);
		// 	const audioID = cc.audioEngine.playMusic(clip, true);
		// });
	},



	quesNodeArr: null,
	quesIndex: null,
	initData() {
		this.quesIndex = 0;
		this.canTouch = true;
	},



	rightAudio: null,
	wrongAudio: null,
	finishAudio: null,
	upStepAudio: null,
	initAudioEffect() {

		const audioNode = cc.find('Canvas/res/audio');

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

		this.rightAudio = getAudioByResName('right');
		this.wrongAudio = getAudioByResName('wrong');
		this.finishAudio = getAudioByResName('finish');
		this.upStepAudio = getAudioByResName('up_step');
	},



	sendServerEvent(key, data) {


		const c = window.courseware;
		if (c) {
			c.sendEvent(key, data);
		}
	},


	addServerListener() {

		console.log(' in addServerListener');

		const c = window.courseware;
		if (!c) {
			return;
		}


		if (!window.air) {
			console.log(' window air err !!!!!!!!')
			return;
		}

		window.air.onCourseInScreen = (next) => {
			//各种逻辑
			// this.showTemplateStartAnima();
			this.loadEnd(() => {
				next();
			});
		}



	},



	loadSpine(data, bg) {


		console.log(' in loadSpine');
		const pageData = bg.data;
		const rate = (bg.scale * bg.width) / pageData.bgItem.rect.width;

		const rectNode = new cc.Node();
		rectNode.name = 'rect' + data.index;
		bg.addChild(rectNode, 10);

		const ctx = rectNode.addComponent(cc.Graphics);
		// 红色矩形
		ctx.lineWidth = 4;
		ctx.strokeColor = cc.Color.BLACK;
		ctx.fillColor = cc.Color.WHITE.setA(100);

		const scale = rate / bg.scaleY;

		rectNode.width = data.rect.width * scale;
		rectNode.height = data.rect.height * scale;
		rectNode.x = -bg.width / 2 + data.rect.x * scale;
		rectNode.y = bg.height / 2 - data.rect.height * scale - data.rect.y * scale;
		rectNode.anchorX = rectNode.anchorY = 0;

		if (pageData.bgItem.isShowDebugLine) {
			ctx.rect(0, 0, rectNode.width, rectNode.height);
		}
		ctx.stroke();
		ctx.fill();


		const animaNode = new cc.Node();
		animaNode.name = 'anima_' + data.index;
		bg.addChild(animaNode);


		if (data.audio_url) {
			cc.assetManager.loadRemote(data.audio_url, (err, audioClip) => {
				animaNode.audioClip = audioClip;
			});
		}

		// const dragonDisplay = animaNode.addComponent(dragonBones.ArmatureDisplay);
		const skeleton = animaNode.addComponent(sp.Skeleton);

		if (!data.texPngData) {
			return
		}

		// const canvas = cc.find("Canvas");
	
		// var spineNode = new cc.Node();
		// var skeleton = spineNode.addComponent(sp.Skeleton);
		// canvas.addChild(spineNode, 20);
		// spineNode.y = -canvas.height / 2;
		// spineNode.scale = 0.5;



		let image = data.texPngData.url // "http://staging-teach.cdn.ireadabc.com/7a82b062a23a5badbf0563103bddccbc.png";
		let ske = data.skeJsonData.url // "http://staging-teach.cdn.ireadabc.com/85d7d26ad7a3f95232b8202825a9d7b6.json";
		let atlas = data.texJsonData.url //"http://staging-teach.cdn.ireadabc.com/32a9ebc39a3391056a8f82f580a550c4.atlas";



		const loadTexture = new Promise((resolve, reject) => {
				cc.assetManager.loadRemote(image, (error, texture) => {
						if (error) {
								reject(error);
						}
						resolve(texture);
				});
		});

		const loadTexJsonData = new Promise((resolve, reject) => {
				cc.assetManager.loadAny({ url: atlas }, (error, atlasJson) => {
						if (error) {
								reject(error);
						}
						resolve(atlasJson);
				});
		});

		const loadSkeJsonData = new Promise((resolve, reject) => {
				cc.assetManager.loadAny({ url: ske }, (error, dragonBonesJson) => {
						if (error) {
								reject(error);
						}
						resolve(dragonBonesJson);
				});
		});

		Promise.all([loadTexture, loadTexJsonData, loadSkeJsonData]).then(([texture, atlasJson, dragonBonesJson]) => {
				
			// console.log('assets: ', assets);
			// console.log('texture: ', texture);

			var asset = new sp.SkeletonData();
			asset._uuid = ske;
			asset.skeletonJson = JSON.stringify( dragonBonesJson );
			asset.atlasText = atlasJson;
			asset.textures = [texture];
			asset.textureNames = [data.texPngData.name];

			// console.log('data.texPngData~~~', data.texPngData);

			skeleton.skeletonData = asset;
			// skeleton.animation = 'walk';
			// skeleton._updateSkeletonData();


			// let asset = new sp.SkeletonData();
			// asset.skeletonJson = JSON.stringify( dragonBonesJson )//assets[1];
			// asset.atlasText = atlasJson //assets[0];
			// asset.textures = [texture];
			// asset.textureNames = ['vine-pro.png'];
			// skeleton.skeletonData = asset;

			const jsonObj = dragonBonesJson //JSON.parse( assets[1]);
			const animationNameObj = jsonObj.animations;
			let animationNames = [];

			for (let name in animationNameObj) {
				console.log('name~~:  ', name);
				animationNames.push(name);
			}

			if (animationNames.length > 0) {

				console.log("jsonObj: ", jsonObj);
				console.log("animationNames: ", animationNames);
				// skeleton.animation = animationNames[1];

				// skeleton.defaultAnimation = animations[0];
				// skeleton.setAnimation(key)
			}

			console.log("skeleton.animation: ", skeleton.animation);

			skeleton.loop = false;
			// skeleton.setCompleteListener(() => {
			// 			skeleton.paused();
			// });

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

				if (!this.canTouch) {
					return;
				}
				if (rectNode.isClicked) {
					// return;
				}
				rectNode.isClicked = true;
				console.log('clicked');

				if (animaNode.audioClip) {
					cc.audioEngine.stopAllEffects();
					// cc.director.emit('STOP_ALL_AUDIO')
					cc.audioEngine.playEffect(animaNode.audioClip, false, 0.8);
				}

				if (animationNames.length > 0) {
					skeleton.animation = animationNames[0]
					

					// dragonDisplay.playAnimation(animationNames[0], 1);
				}
			});

		});

	},

	initView() {


		this.initBg();
		this.initStairway();
		this.initQuestion();
		this.initCatListener();

		this.initCurQuesNode();
		this.showOptionNode();

		this.gameStart();
	},

	initCurQuesNode() {
		this.curQuesNode = this.quesNodeArr[this.quesIndex];
	},

	showOptionNode() {
		const optionNode = this.curQuesNode.optionNode;
		optionNode.active = true;


		const {optionArr} = optionNode;
		for (let i=0; i<optionArr.length; i++) {
			const optionBg = optionArr[i].optionBg;
			const baseScale = optionBg.scale;
			optionBg.scale = 0;
			cc.tween(optionBg)
				.delay(Math.random() * 0.2)
				.to(0.3, {scale: baseScale}, {easing: "cubicOut"})
				.start();
		}


	},

	hideOptionNode() {
		const optionNode = this.curQuesNode.optionNode;
		optionNode.active = true;
		optionNode.opacity = 255;
		cc.tween(optionNode)
			.to(0.5, {opacity: 0}, {easing: "cubicOut"})
			.call(() => {

			})
			.start();
	},

	initBg() {
		const bg = getSprNode("bg");
		bg.scale = this._mapScaleMax;
		this.canvas.addChild(bg);

		const cloud = getSprNode("cloud");
		cloud.scale = this._mapScaleMin;
		cloud.anchorX = 1;
		cloud.anchorY = 0;
		cloud.x = this.canvas.width / 2;
		cloud.y = -this.canvas.height / 2;
		this.canvas.addChild(cloud, 2);

		const moon = getSprNode("moon");
		moon.scale = this._mapScaleMin;
		moon.x = -this.canvas.width / 2 + 150 * this._mapScaleMin;
		moon.y = this.canvas.height / 2 - 120 * this._mapScaleMin;
		this.canvas.addChild(moon);
	},

	initStairway() {
		const stairway = getSprNode("stairway");
		const oneHeight = stairway.height / 5;
		stairway.scale = this.canvas.height / (oneHeight * 1.5);
		stairway.anchorX = 0;
		stairway.anchorY = 0;
		stairway.x = -this.canvas.width / 3.5;
		stairway.y = -this.canvas.height / 2 - 20 * this._mapScaleMin;
		this.canvas.addChild(stairway);

		this.stairway = stairway;



		// cc.tween(this.stairway)
		// 	.to(5, {x: this.stairway.x - oneHeight* 6, y: this.stairway.y - oneHeight * 6}, {easing: "cubicOut"})
		// 	.start();

		// setTimeout(() => {
		// 	this.stairway.y -= oneHeight * 5;
		// 	this.stairway.x -= oneHeight * 5;
		// }, 2000);

	},

	initQuestion() {

		const posArr = [
			{x: 32, y: 266},
			{x: 327, y: 513},
			{x: 623, y: 809},
			{x: 919, y: 1105}
		]

		console.log('this.data.groupArr: ', this.data.groupArr);

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

			const {grid, optionArr} = this.data.groupArr[i];
			const quesNode = new cc.Node();
			quesNode.dragEndRectArr = [];

			for (let x=0; x<5; x++) {
				for (let y=0; y<5; y++) {
					const gridData = grid[x][y];
					if (gridData.pic_url) {
						this.setOnePicGrid(quesNode, y, x, gridData);
					} else if(gridData.value) {
						this.setOneLetterGrid(quesNode, y, x, gridData);
					}
				}
			}

			quesNode.x = posArr[i].x;
			quesNode.y = posArr[i].y;
			this.quesNodeArr.push(quesNode);
			this.stairway.addChild(quesNode);

			quesNode.optionNode = this.initOption(optionArr);
		}



	},

	setOnePicGrid(quesNode, x, y, data) {

		const picBg = getSprNode("pic_bg");
		quesNode.addChild(picBg);
		picBg.scale = 0.65;

		const distance = 1;
		picBg.x = x * (picBg.width * picBg.scale + distance);
		picBg.y = -y * (picBg.height * picBg.scale + distance);

		getSprNodeByUrl(data.pic_url, (spr) => {
			picBg.addChild(spr.node);

			const btn = spr.node.addComponent(cc.Button);
			btn.enableAutoGrayEffect = true;
			btn.interactable = false;

			spr.node.scale = (picBg.width * 0.8) / spr.node.width;

			spr.node.logicX = x;
			spr.node.logicY = y;
			spr.node.data = data;

			if (!quesNode.picArr) {
				quesNode.picArr = [];
			}
			quesNode.picArr.push(spr.node);

		})

	},

	setOneLetterGrid(quesNode, x, y, data) {
		const letterBg = getSprNode("letter_bg");
		quesNode.addChild(letterBg);
		letterBg.scale = 0.68;
		letterBg.data = data;
		letterBg.logicX = x;
		letterBg.logicY = y;

		quesNode.dragEndRectArr.push(letterBg);

		const distanceW = 2.1;
		const distanceH = 1.2;
		letterBg.x = x * (letterBg.width * letterBg.scale + distanceW);
		letterBg.y = -y * (letterBg.height * letterBg.scale + distanceH);

		const label = this.getLabel();
		label.lineHeight = letterBg.height;
		label.string = data.value;
		label.font = cc.find('Canvas/res/font/MuliBold_YzEVy').getComponent(cc.Label).font;
		label.node.y = 4;
		label.node.data = data;

		if (data.isEmpty) {
			label.node.active = false;
		}

		const labelColor = new cc.Color()
		cc.Color.fromHEX(labelColor, "#ffd138")  ;
		label.node.color =labelColor; 
		letterBg.addChild(label.node);
		// letterBg.letterLabel = label;
		letterBg.labelNode = label.node;
	},

	initOption(optionArr) {

		const optionNode = new cc.Node();
		optionNode.active = false;
		this.canvas.addChild(optionNode);
		const h = this.stairway.height * this.stairway.scale / 5;
		optionNode.x = (-this.canvas.width / 2 - this.stairway.x) / 2 + this.stairway.x;
		optionNode.y = -this.canvas.height / 2 + h / 2;

		let cloneOption = JSON.parse( JSON.stringify(optionArr) );
		cloneOption = randomSortByArr(cloneOption);
		
		const len = 40 * this.stairway.scale;
		const disH = 10 * this.stairway.scale;
		const disW = 20 * this._mapScaleMin;
		let baseY = (Math.ceil( cloneOption.length / 2 ) - 1) * ( len + disH ) / 2

		for (let i=0; i<cloneOption.length; i++) {
			const optionBg = getSprNode("option_bg");
			optionBg.scale = len / optionBg.width;
			optionBg.y = baseY - Math.floor(i / 2) * (len + disH);
			optionBg.x = i % 2 * (len + disW) - (len + disW) / 2;
			optionNode.addChild(optionBg);

			const data = cloneOption[i];
			const label = this.getLabel();
			label.string = data.value;
			label.font = cc.find('Canvas/res/font/MuliBold_YzEVy').getComponent(cc.Label).font;
			label.node.y = 4;

			label.node.baseX = label.node.x;
			label.node.baseY = label.node.y;

			label.node.color = this.getColor("#7ecef4");
			optionBg.addChild( label.node );
			optionBg.optionLabel = label;

			data.optionBg = optionBg;
			data.optionLabelNode = label.node;
			optionBg.data = data;
			this.addOptionListener(optionBg);
		}

		optionNode.active = false;
		optionNode.optionArr = cloneOption;
		return optionNode;
	},

	addOptionListener(optionBg) {
		const {optionLabel} = optionBg;
		optionBg.on("touchstart", () => {
			this._curTouchItem = optionLabel.node;
		})
	},

	getColor(colorValue) {
		const color = new cc.Color();
		cc.Color.fromHEX(color, colorValue);
		return color;
	},






	gameStart() {

		console.log(' in gameStart')
		this.playAni('begin', 0)
		//播放引导音频1

		this.canTouch = false;

		playAudioByUrl(this.data.begin_audio_url, () => {

			console.log(' in this.data.begin_audio_url')

			if (this.isDestroy) {
				return;
			}

			this.playAni('normal', 0);
			this.canTouch = true;
		})


	},




	initCatListener() {

		const cat = cc.find('Canvas/catFrame/cat');
		cat.parent.zIndex = 10;
		cat.active = true;

		this.playAni('normal', -1);

		const clickBox = cc.find("Canvas/catFrame/clickBox");
		clickBox.on('touchstart', () => {
			
			if (!this.canTouch) {
				return;
			}
			if (this.isGameEnd) {
				return;
			}
			this.canTouch = false;

			this.playAni('begin', -1);

			playAudioByUrl(this.data.idle_audio_url, () => {
				this.canTouch = true;
				this.playAni('normal', -1);
			})

		})
	},

	playAni(name, times = 1) {

		const cat = cc.find('Canvas/catFrame/cat');
		var dragonDisplay = cat.getComponent(dragonBones.ArmatureDisplay);
		const state = dragonDisplay.playAnimation(name, times);
		return state;
	},



	update() {

		if (this.isDestroy) {
			return;
		}

		// this.updateCheckStop();

		// this.updateVideoStrip();
		// this.updateRecordStrip();
		// this.checkPlayRecord()



	},

	





	initListener() {

		const canvas = cc.find('Canvas');

		let downFlag = false;



		const touchStart = (e) => {
			this.canvasTouchStart(e);
			console.log('touch start');

			if (canvas.hasEventListener(cc.Node.EventType.MOUSE_DOWN)) {
				canvas.off(cc.Node.EventType.MOUSE_DOWN, mouseDown)
			}
		}


		const mouseDown = (e) => {
			if (!downFlag) {
				return;
			}
			this.canvasTouchStart(e);
			console.log('mouse down');

			if (canvas.hasEventListener(cc.Node.EventType.TOUCH_MOVE)) {
				canvas.off(cc.Node.EventType.TOUCH_MOVE, touchMove)
				this.removeHtmlCanvasListener('touchmove');
			}
		}


		const touchMove = (e) => {
			this.canvasTouchMove(e);
			// console.log('touch move');

			if (canvas.hasEventListener(cc.Node.EventType.MOUSE_MOVE)) {
				canvas.off(cc.Node.EventType.MOUSE_MOVE, mouseMove)
			}
		}

		const mouseMove = (e) => {
			if (!downFlag) {
				return;
			}
			this.canvasTouchMove(e);
			console.log('mouse move');

			if (canvas.hasEventListener(cc.Node.EventType.TOUCH_MOVE)) {
				canvas.off(cc.Node.EventType.TOUCH_MOVE, touchMove)
				this.removeHtmlCanvasListener('touchmove');
			}
		}

		const touchEnd = (e) => {

			downFlag = false;
			this.canvasTouchEnd(e);

			if (canvas.hasEventListener(cc.Node.EventType.MOUSE_UP)) {
				canvas.off(cc.Node.EventType.MOUSE_UP, mouseUp)
			}
			if (canvas.hasEventListener(cc.Node.EventType.MOUSE_LEAVE)) {
				canvas.off(cc.Node.EventType.MOUSE_LEAVE, mouseUp)
			}
			this.removeHtmlTouchEnd();
		}

		const mouseUp = (e) => {

			downFlag = false;

			this.canvasTouchEnd(e);

			if (canvas.hasEventListener(cc.Node.EventType.TOUCH_END)) {
				canvas.off(cc.Node.EventType.TOUCH_END, touchEnd)
			}
			if (canvas.hasEventListener(cc.Node.EventType.TOUCH_CANCEL)) {
				canvas.off(cc.Node.EventType.TOUCH_CANCEL, touchEnd)
			}
		}



		canvas.on(cc.Node.EventType.TOUCH_START, touchStart)
		canvas.on(cc.Node.EventType.MOUSE_DOWN, mouseDown)

		canvas.on(cc.Node.EventType.TOUCH_MOVE, touchMove)
		canvas.on(cc.Node.EventType.MOUSE_MOVE, mouseMove)

		canvas.on(cc.Node.EventType.TOUCH_END, touchEnd)
		canvas.on(cc.Node.EventType.TOUCH_CANCEL, touchEnd)
		canvas.on(cc.Node.EventType.MOUSE_UP, mouseUp)

	},

	canvasTouchStart(e) {


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

		// this.showBackBtn();

	},

	canvasTouchMove(e) {

		if (!this._curTouchItem) {
			return;
		}


		const pos = e.getLocation();
		// px = (pos.x - e.currentTarget.width / 2) / this._curTouchItem.parent.scale;
		// py = (pos.y - e.currentTarget.height / 2) / this._curTouchItem.parent.scale;

		const localPos = this._curTouchItem.parent.convertToNodeSpaceAR(cc.v2(pos.x, pos.y));
		this._curTouchItem.x = localPos.x;
		this._curTouchItem.y = localPos.y;


		// this.knife.x = pos.x - e.currentTarget.width / 2;
		// this.knife.y = pos.y - e.currentTarget.height / 2;


		// const curTouchBar = this.videoCtrlJs.curTouchBar;
		// if (curTouchBar) {

		// 	const px = pos.x - e.currentTarget.width / 2;
		// 	const py = pos.y - e.currentTarget.height / 2;

		// 	const worldPos = this.canvas.convertToWorldSpaceAR(cc.v2(px, py));
		// 	const localPos = curTouchBar.parent.convertToNodeSpaceAR(worldPos);

		// 	curTouchBar.x = localPos.x;
		// 	if (curTouchBar.x < curTouchBar.minX) {
		// 		curTouchBar.x = curTouchBar.minX;
		// 	} else if (curTouchBar.x > curTouchBar.maxX) {
		// 		curTouchBar.x = curTouchBar.maxX;
		// 	}

		// 	this.setVideoTimeByTouchBar(curTouchBar);

		// }

	},

	

	canvasTouchEnd(e) {

		if (!this._curTouchItem) {
			return;
		}
		this.checkOnDragEndRect();
		this._curTouchItem = null;
	},



	removeHtmlCanvasListener(type) {
		// const canvasHtml = document.querySelector('canvas');
		// canvasHtml.addEventListener(type, (e) => {})
	},


	removeHtmlTouchEnd() {
		// const canvasHtml = document.querySelector('canvas');
		// canvasHtml.removeEventListener('touchend', this.htmlCanvasTouchendFunc, this);
	},






	checkOnDragEndRect() {

		const quesNode = this.curQuesNode;
		for (let i = 0; i < quesNode.dragEndRectArr.length; i++) {

			const letterBg = quesNode.dragEndRectArr[i];

			const worldPos = this._curTouchItem.parent.convertToWorldSpaceAR(cc.v2(this._curTouchItem.x, this._curTouchItem.y));
			const worldRect = letterBg.getBoundingBoxToWorld();
			if (worldRect.contains(worldPos)) {
			
				if (letterBg.data.value == this._curTouchItem.parent.data.value) {
					this.dragSuccess(letterBg);
					playAudio(this.rightAudio.clip);
				} else {
					this.addWrongTimes(letterBg);
					this.itemBack();
				}

				return;
			}
			
		}

		this.itemBack();
	},


	dragSuccess(letterBg) {
		const optionArr = this.curQuesNode.optionNode.optionArr;
		for (let i=0; i<optionArr.length; i++) {
			if (optionArr[i].value == letterBg.data.value) {

				this.hideOption(optionArr[i]);
				this.showLetter(letterBg);

				const index = this.curQuesNode.dragEndRectArr.indexOf(letterBg);
				this.curQuesNode.dragEndRectArr.splice(index, 1);
				break;
			}
		}
		this.checkPicFillColor();
		this.checkToNextStep();
	},

	checkPicFillColor() {
		const picArr = this.curQuesNode.picArr;
		if (!picArr) {
			return;
		}

		for (let i=0; i<picArr.length; i++) {
			if (picArr[i].isFillColorEnd) {
				continue;
			}
			const colFillEnd = this.checkPicFillEndCol(picArr[i]);
			const rowFillEnd = this.checkPicFillEndRow(picArr[i]);
			if (colFillEnd && rowFillEnd) {
				this.picFillColor(picArr[i]);
				picArr[i].isFillColorEnd = true;
			}
		}
	},

	picFillColor(picNode) {

		const btn = picNode.getComponent(cc.Button);
		btn.interactable = true;
	},



	checkPicFillEndCol(picNode) {
		const {logicX, logicY, data} = picNode;
		
		const dragEndRectArr = this.curQuesNode.dragEndRectArr;
		const hasEmpty = dragEndRectArr.find(it => {
			return it.logicX == logicX && it.data.isEmpty;
		})

		return !hasEmpty
	},

	checkPicFillEndRow(picNode) {
		const {logicX, logicY, data} = picNode;
		
		const dragEndRectArr = this.curQuesNode.dragEndRectArr;
		const hasEmpty = dragEndRectArr.find(it => {
			return it.logicY == logicY && it.data.isEmpty;
		})

		return !hasEmpty
	},

	checkToNextStep() {

		console.log('this.curQuesNode.dragEndRectArr.length: ', this.curQuesNode.dragEndRectArr.length);
		
		const hasEmpty = this.curQuesNode.dragEndRectArr.find((it) => {
			return it.data.isEmpty
		})

		if (!hasEmpty) {
			this.enterNextStep();
		}
	},

	enterNextStep() {
		this.hideOptionNode();

		this.quesIndex ++;
		this.initCurQuesNode();
		if (this.curQuesNode) {

			this.canTouch = false;
			delayCall(0.5, () => {
				this.moveStairway();
				
			})

		} else {

			this.gameEnd();
		}
	},

	moveStairway() {
		// playAudio(this.upStepAudio.clip);
		const audioId = cc.audioEngine.playEffect(this.upStepAudio.clip, false, 0.5);
		const stairway = this.stairway;
		const oneHeight = stairway.height / 5 * stairway.scale;

		cc.tween(this.stairway)
			.to(3.5, {x: this.stairway.x - oneHeight, y: this.stairway.y - oneHeight}, {easing: "cubicInOut"})
			.call(() => {
				this.showOptionNode();
				this.canTouch = true;

			})
			.start();
	},

	hideOption(option) {
		option.optionBg.active = false;
		option.optionLabelNode.active = false;
		// this._curTouchItem.active = false;
	},

	showLetter(rect) {
		rect.labelNode.active = true;
	},

	addWrongTimes(letterBg) {
		if (!letterBg.wrongTimes) {
			letterBg.wrongTimes = 0;
		}
		letterBg.wrongTimes ++;

		if (letterBg.wrongTimes >= 3) {
			this.dragSuccess(letterBg);
		}
	},

	checkIsDragEndSuccess(rect) {

		const worldPos = dragItem.parent.convertToWorldSpaceAR(cc.v2(dragItem.targetPx, dragItem.targetPy));
		const worldRect = rect.getBoundingBoxToWorld();

		console.log(' worldPos: ', worldPos);
		console.log(' worldRect: ', worldRect);

		if (worldRect.contains(worldPos)) {
			dragItem.x = dragItem.targetPx;
			dragItem.y = dragItem.targetPy;
			// dragItem.isDragEnd = true;

			// cc.audioEngine.playEffect(this.rightClip, false, 0.8);

			return true;

		} else {

			return false;
			// this.itemBack();
		}
	},


	itemBack() {

		cc.audioEngine.playEffect(this.wrongAudio.clip, false, 0.8);

		cc.tween(this._curTouchItem)
			.to(0.5, {x: this._curTouchItem.baseX, y: this._curTouchItem.baseY}, {easing: "elasticOut"})
			.start();
	},



	gameEnd() {

		this.isGameEnd = true;
		playAudio(this.finishAudio.clip);

		const greatIcon = getSprNode("great");
		greatIcon.scale = 0;
		greatIcon.opacity = 0;
		this.canvas.addChild(greatIcon, 15);

		cc.tween(greatIcon)
			.to(1.5, {scale: this._mapScaleMin}, {easing: "elasticOut"})
			.start();

		cc.tween(greatIcon)
			.to(0.3, {opacity: 255})
			.start();
	},



	initHotZone() {
		this.initHotZoneBg();
	},


	hotZoneBg: null,
	initHotZoneBg() {

		for (let i=0; i<this.data.pageArr.length; i++) {

			const data = this.data.pageArr[i];


			const hotZoneBg = new cc.Node();
			hotZoneBg.name = 'hotZoneBg';
			hotZoneBg.parent = cc.find('Canvas');
			hotZoneBg.data = data;

			data.hotZoneBg = hotZoneBg;
			hotZoneBg.active = false;

	
			if (!data.bgItem) {
				continue;
			}
	
			cc.loader.load({ url: data.bgItem.url }, (err, img) => {
	
				hotZoneBg.width = img.width;
				hotZoneBg.height = img.height;
		
	
				const sprNode = new cc.Node();
				sprNode.name = 'bgItemSpr'
				var sf = new cc.SpriteFrame(img);
				// const spr = hotZoneBg.addComponent(cc.Sprite);
				const spr = sprNode.addComponent(cc.Sprite);
				spr.spriteFrame = sf
				sprNode.width = hotZoneBg.width;
				sprNode.height = hotZoneBg.height;
				sprNode.parent = hotZoneBg;
				
				// sprNode.opacity = 0;

	
				// const sx = this.canvas.width / hotZoneBg.width;
				const sy = this.canvas.height / hotZoneBg.height;
				// const s = Math.min(sx, sy);
				hotZoneBg.scale = sy;
				
				// this.hotZoneBg = hotZoneBg;
				this.initHotZoneItem(hotZoneBg);

			});
		}
		


		// this.hotZoneBg = new cc.Node();
		// this.hotZoneBg.name = 'hotZoneBg';
		// this.hotZoneBg.parent = cc.find('Canvas');
		// // this.hotZoneBg.zIndex = 4;

		// const titleH = 107 * this._mapScaleMin + 11 * 2

		// if (!this.data.bgItem) {
		// 	return;
		// }

		// cc.loader.load({ url: this.data.bgItem.url }, (err, img) => {

		// 	// this.addMask(this.hotZoneBg);

		// 	this.hotZoneBg.width = img.width;
		// 	this.hotZoneBg.height = img.height;

	

		// 	const sprNode = new cc.Node();
		// 	sprNode.name = 'bgItemSpr'
		// 	var sf = new cc.SpriteFrame(img);
		// 	// const spr = this.hotZoneBg.addComponent(cc.Sprite);
		// 	const spr = sprNode.addComponent(cc.Sprite);
		// 	spr.spriteFrame = sf
		// 	sprNode.width = this.hotZoneBg.width;
		// 	sprNode.height = this.hotZoneBg.height;
		// 	sprNode.parent = this.hotZoneBg;
		// 	window['bg'] = sprNode


		// 	const sx = this.canvas.width / this.hotZoneBg.width;
		// 	const sy = (this.canvas.height - titleH) / this.hotZoneBg.height;
		// 	const s = Math.min(sx, sy);
		// 	this.hotZoneBg.scale = s;

		// 	// this.hotZoneBg.y = -frameSize.height / 2 * this._cocosScale + this.hotZoneBg.height / 2 * this.hotZoneBg.scaleY + (subNum * mapS * this._cocosScale);
		// 	this.hotZoneBg.y = 0 - titleH / 2;
		// 	// console.log('this.hotZoneBg.y', this.hotZoneBg.y);




		// 	// this.data.bgItem.isShowDebugLine = true;
		// 	this.initHotZoneItem();



		// });

	},

	initHotZoneItem(bg) {
		const quesData = bg.data;
		quesData.hotZoneItemArr.forEach((item) => {
			// console.log('item.gIdx: ', item.gIdx);
			switch (item.gIdx) {
				case "0":
					this.setOneAnima(item, bg);
					break;
				case "1":
					this.setOnePic(item, bg);
					break;
				// case "2":
				// 	this.setOneRect(item, bg);
				// 	break;
				// case "3":
				// case "4":
				// case "5":
				// 	this.setOneAction(item, bg);
				// 	break;


				default:
					break;
			}

		});

	},


	// addMask(node) {
	// 	const mask = node.addComponent(cc.Mask);
	// 	mask.type = cc.Mask.Type.RECT;
	// },

	setOneAction(data) {



		const rate = (this.hotZoneBg.scale * this.hotZoneBg.width) / this.data.bgItem.rect.width;
		const rectNode = new cc.Node();
		rectNode.name = 'rect' + data.index;
		this.hotZoneBg.addChild(rectNode);

		const ctx = rectNode.addComponent(cc.Graphics);
		// 红色矩形
		ctx.lineWidth = 4;
		ctx.strokeColor = cc.Color.BLACK;
		ctx.fillColor = cc.Color.WHITE.setA(100);

		const scale = rate / this.hotZoneBg.scaleY;

		rectNode.width = data.rect.width * scale;
		rectNode.height = data.rect.height * scale;
		rectNode.x = -this.hotZoneBg.width / 2 + data.rect.x * scale;
		rectNode.y = this.hotZoneBg.height / 2 - data.rect.height * scale - data.rect.y * scale;
		const { x, y, width, height } = rectNode;
		rectNode.anchorX = rectNode.anchorY = 0;

		if (this.data.bgItem.isShowDebugLine) {
			ctx.rect(0, 0, rectNode.width, rectNode.height);
		}
		ctx.stroke();
		ctx.fill();



		console.log('setOneAction ~~ data: ', data)
		const actionData = data['actionData_' + data.gIdx];
		if (!actionData) {
			return;
		}
		if (actionData.type == 'text') {
			const label = this.setOneActionText(rectNode, actionData);
			label.node.scale = scale * data.fontScale;

			// label.overflow = cc.Label.Overflow.NONE;
			// label.node.setContentSize(new cc.Size(0, lineHeight));
			label["_forceUpdateRenderData"](true);


		} else if (actionData.type == 'pic') {

			const pic = this.setOneActionPic(rectNode, actionData);

		} else if (actionData.type == 'anima') {

			const anima = this.setOneActionAnima(rectNode, actionData);
		}
	},

	setOneActionText(rectNode, actionData) {


		// const labelNode = new cc.Node();
		// labelNode.parent = rectNode;
		const label = this.getLabel(); // labelNode.addComponent(cc.Label);
		const labelNode = label.node;
		labelNode.parent = rectNode;

		label.font = cc.find('Canvas/res/font/aharoni').getComponent(cc.Label).font;
		label.string = actionData.text;
		// label.string = `<size=${size}><color=#751e00>${this.curGroup.title }</color></size>`
		// label.lineHeight = size;
		// label.horizontalAlign = cc.macro.TextAlignment.LEFT
		// labelNode.anchorX = 0;
		// labelNode.anchorY = 1
		labelNode.color = cc.Color.BLACK;


		const opArr = actionData.changeOption
		// console.log('opArr', opArr);


		const tweenArr = [];

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

			const opData = opArr[i];
			console.log('opArr[0]', opArr[i])
			if (opData[0] == 'fontColor') {
				const color = new cc.Color();
				cc.Color.fromHEX(color, opData[1]);
				labelNode.color = color;

			} else if (opData[0] == 'opacity') {
				// console.log('opData: ', opData)
				labelNode.opacity = Number(opData[1] / 100 * 255) + 0.1;
				// console.log(labelNode.opacity);
				tweenArr.push({ item: labelNode, option: `{"${opData[0]}" : ${opData[2] / 100 * 255}}`, optionName: opData[0] },)

			} else {
				label[opData[0]] = opData[1];
				tweenArr.push({ item: label, option: `{"${opData[0]}" : ${opData[2]}}`, optionName: opData[0] })

			}
		}


		if (actionData.audio_url) {
			cc.assetManager.loadRemote(actionData.audio_url, (err, audioClip) => {
				labelNode.audioClip = audioClip;
			});
		}


		label.lineHeight = label.fontSize;

		labelNode.y += rectNode.height / 2;
		labelNode.x += rectNode.width / 2;


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

			if (labelNode.audioClip) {
				cc.audioEngine.stopAllEffects();
				cc.audioEngine.playEffect(labelNode.audioClip, false, 0.8);
			}

			if (labelNode.isClicked) {
				// return;
			}
			labelNode.isClicked = true;

			// const j = JSON.stringify({'fontSize': 500});
			// console.log('j: ', JSON.parse('{"fontSize":500}'));

			for (let i = 0; i < tweenArr.length; i++) {
				const tweenData = tweenArr[i];

				// JSON.parse(tweenData.option)

				// console.log( JSON.parse(tweenData.option) );

				if (tweenData.optionName == 'opacity') {
					console.log('~~~ ', tweenData.item[tweenData.optionName]);
					// tweenData.item[tweenData.optionName] = tweenData.item[tweenData.optionName] + 1

					cc.tween(tweenData.item)
						.to(actionData.changeTime, JSON.parse(tweenData.option))
						.start();
				}


			}

			// cc.tween({})
			// 	.to(5, { scale: (Math.random() - 0.5) + 1})
			// 	.start();

		});

		// labelNode.opacity = 255;

		return label;
	},

	setOneActionPic(rectNode, actionData) {

		console.log('setOneActionPic actionData: ', actionData)
		const picNode = new cc.Node();
		rectNode.addChild(picNode);

		cc.loader.load({ url: actionData.pic_url }, (err, img) => {

			const spr = picNode.addComponent(cc.Sprite);
			spr.spriteFrame = new cc.SpriteFrame(img)

			picNode.y += rectNode.height / 2;
			picNode.x += rectNode.width / 2;

			picNode.scaleX = rectNode.width / picNode.width;
			picNode.scaleY = rectNode.height / picNode.height;

			const opArr = actionData.changeOption
			const tweenArr = [];

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

				const opData = opArr[i];
				console.log('opData: ~~~ ', opData);

				if (opData[0] == 'opacity') {
					picNode.opacity = Number(opData[1] / 100 * 255) + 0.1;
					console.log(picNode.opacity);
					tweenArr.push({ item: picNode, option: `{"${opData[0]}" : ${opData[2] / 100 * 255}}`, optionName: opData[0] },)

				} else {
					// picNode[opData[0]] = Number(opData[1]);
					// tweenArr.push({item: picNode, option: `{"${opData[0]}" : ${opData[2]}}`, optionName: opData[0]})
				}


				if (actionData.audio_url) {
					cc.assetManager.loadRemote(actionData.audio_url, (err, audioClip) => {
						rectNode.audioClip = audioClip;
					});
				}


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

					if (rectNode.audioClip) {
						cc.audioEngine.stopAllEffects();
						cc.audioEngine.playEffect(rectNode.audioClip, false, 0.8);
					}

					if (rectNode.isClicked) {
						// return;
					}
					rectNode.isClicked = true;

					for (let i = 0; i < tweenArr.length; i++) {
						const tweenData = tweenArr[i];

						if (tweenData.optionName == 'opacity') {
							cc.tween(tweenData.item)
								.to(actionData.changeTime, JSON.parse(tweenData.option))
								.start();
						}
					}

				});
			}

		});
	},

	setOneActionAnima(rectNode, actionData) {


		const animaNode = new cc.Node();
		rectNode.addChild(animaNode);

		if (actionData.audio_url) {
			cc.assetManager.loadRemote(actionData.audio_url, (err, audioClip) => {
				rectNode.audioClip = audioClip;
			});
		}

		const data = actionData;

		const dragonDisplay = animaNode.addComponent(dragonBones.ArmatureDisplay);
		if (!data.texPngData) {
			return
		}



		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"];
					let armatureNames = [];
					for (let i = 0; i < armatures.length; i++) {
						armatureNames.push(armatures[i].name);
					}
					// console.log('armatureNames: ', armatureNames);

					let animationNames = [];

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

						// rectNode.addComponent(cc.Button);
						// rectNode.on('click', () => {
						// 	if (rectNode.isClicked) {
						// 		// return;
						// 	}
						// 	rectNode.isClicked = true;
						// 	console.log('clicked');

						// 	if (rectNode.audioClip) {
						// 		cc.audioEngine.stopAllEffects();
						// 		cc.director.emit('STOP_ALL_AUDIO')
						// 		cc.audioEngine.playEffect(rectNode.audioClip, false, 0.8);
						// 	}

						// 	if (animationNames.length > 0) {
						// 		dragonDisplay.playAnimation(animationNames[0], 1);
						// 	}
						// });
					}


					// animaNode.x = rectNode.x + rectNode.width / 2;
					// animaNode.y = rectNode.y + rectNode.height / 2;

					// const sx = rectNode.width / animaNode.width;
					// const sy = rectNode.height / animaNode.height;
					// const scale = Math.min(sx, sy);
					// animaNode.scale = scale;






					animaNode.y += rectNode.height / 2;
					animaNode.x += rectNode.width / 2;

					animaNode.scaleX = rectNode.width / animaNode.width;
					animaNode.scaleY = rectNode.height / animaNode.height;

					const opArr = actionData.changeOption
					const tweenArr = [];

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

						const opData = opArr[i];
						console.log('opData: ~~~ ', opData);

						if (opData[0] == 'opacity') {
							animaNode.opacity = Number(opData[1] / 100 * 255) + 0.1;
							console.log(animaNode.opacity);
							tweenArr.push({ item: animaNode, option: `{"${opData[0]}" : ${opData[2] / 100 * 255}}`, optionName: opData[2] == null ? '' : opData[0] },)

						} else {
							// animaNode[opData[0]] = Number(opData[1]);
							// tweenArr.push({item: animaNode, option: `{"${opData[0]}" : ${opData[2]}}`, optionName: opData[2] == null ? '' : opData[0]})
						}


						if (actionData.audio_url) {
							cc.assetManager.loadRemote(actionData.audio_url, (err, audioClip) => {
								rectNode.audioClip = audioClip;
							});
						}



						rectNode.addComponent(cc.Button);
						rectNode.on('click', () => {
							dragonDisplay.timeScale = 1;

							if (rectNode.audioClip) {
								cc.audioEngine.stopAllEffects();
								cc.audioEngine.playEffect(rectNode.audioClip, false, 0.8);
							}

							if (rectNode.isClicked) {
								// return;
							}
							rectNode.isClicked = true;

							for (let j = 0; j < tweenArr.length; j++) {
								const tweenData = tweenArr[j];

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

								if (tweenData.optionName) {

									cc.tween(tweenData.item)
										.to(actionData.changeTime, JSON.parse(tweenData.option))
										.start();

								}

							}

							if (animationNames.length > 0) {
								dragonDisplay.playAnimation(animationNames[0], 1);
							}

						});
					}


				});
			});
		});

	},




	setOneAnimaSmall(data, bg) {
		console.log( 'in setOneAnimaSmall ');

		const pageData = bg.data;
		const rate = (bg.scale * bg.width) / pageData.bgItem.rect.width;

		const rectNode = new cc.Node();
		rectNode.name = 'rect' + data.index;
		bg.addChild(rectNode);


		const ctx = rectNode.addComponent(cc.Graphics);
		// 红色矩形
		ctx.lineWidth = 4;
		ctx.strokeColor = cc.Color.BLACK;
		ctx.fillColor = cc.Color.WHITE.setA(100);

		const scale = rate / bg.scaleY;

		rectNode.width = data.rect.width * scale;
		rectNode.height = data.rect.height * scale;
		rectNode.x = -bg.width / 2 + data.rect.x * scale;
		rectNode.y = bg.height / 2 - data.rect.height * scale - data.rect.y * scale;

		rectNode.anchorX = rectNode.anchorY = 0;


		if (pageData.bgItem.isShowDebugLine) {
			ctx.rect(0, 0, rectNode.width, rectNode.height);
		}
		ctx.stroke();
		ctx.fill();




		const animaNode = new cc.Node();
		animaNode.name = 'anima_' + data.index;
		bg.addChild(animaNode);



		if (data.audio_url) {
			cc.assetManager.loadRemote(data.audio_url, (err, audioClip) => {
				animaNode.audioClip = audioClip;
			});
		}


		const dragonDisplay = animaNode.addComponent(dragonBones.ArmatureDisplay);
		if (!data.texPngData) {
			return
		}

		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, (error1, texture) => {

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

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

					console.log('error1: ', error1);
					console.log('error2: ', error2);
					console.log('error3: ', error3);

					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);
						}

						rectNode.addComponent(cc.Button);
						rectNode.on('click', () => {
							if (!this.canTouch) {
								return;
							}
							if (rectNode.isClicked) {
								// return;
							}
							rectNode.isClicked = true;
							console.log('clicked');

							if (animaNode.audioClip) {
								cc.audioEngine.stopAllEffects();
								// cc.director.emit('STOP_ALL_AUDIO')
								cc.audioEngine.playEffect(animaNode.audioClip, false, 0.8);
							}

							if (animationNames.length > 0) {
								dragonDisplay.playAnimation(animationNames[0], 1);
							}
						});
					}


					// animaNode.x = rectNode.x + rectNode.width / 2;
					// animaNode.y = rectNode.y + rectNode.height / 2;

					const sx = rectNode.width / animaNode.width;
					const sy = rectNode.height / animaNode.height;
					const scale = Math.min(sx, sy);
					animaNode.scale = scale;

				});
			});
		});

	},


	setOnePic(data, bg) {
		console.log( 'in setOnePic ');
		const pageData = bg.data;
		const rate = (bg.scale * bg.width) / pageData.bgItem.rect.width;

		const picNode = new cc.Node();
		picNode.name = 'pic' + data.index;
		picNode.data = data;
		bg.addChild(picNode);

		cc.loader.load({ url: data.pic_url }, (err, img) => {

			const spr = picNode.addComponent(cc.Sprite);
			spr.spriteFrame = new cc.SpriteFrame(img)

			const scale = rate / bg.scaleY;

			picNode.width = data.rect.width * scale;
			picNode.height = data.rect.height * scale;
			picNode.x = -bg.width / 2 + data.rect.x * scale;
			picNode.y = bg.height / 2 - data.rect.height * scale - data.rect.y * scale;

			picNode.anchorX = picNode.anchorY = 0;

			if (data.audio_url) {
				this.addPicAudio(picNode);
			}

		});

	},

	setOneRect(data, bg) {
		const quesData = bg.data;
		const rate = (bg.scale * bg.width) / quesData.bgItem.rect.width;

		const rectNode = new cc.Node();
		rectNode.name = 'rect' + data.index;
		bg.addChild(rectNode);


		const ctx = rectNode.addComponent(cc.Graphics);
		// 红色矩形
		ctx.lineWidth = 4;
		ctx.strokeColor = cc.Color.BLACK;
		ctx.fillColor = cc.Color.WHITE.setA(100);

		const scale = rate / bg.scaleY;
		// console.log('scale: ', scale);
		// console.log('scale2: ', scale / data.mapScale);


		rectNode.width = data.rect.width * scale;
		rectNode.height = data.rect.height * scale;
		rectNode.x = -bg.width / 2 + data.rect.x * scale;
		rectNode.y = bg.height / 2 - data.rect.height * scale - data.rect.y * scale;
		// rectNode.scale = 1 / data.mapScale;

		rectNode.anchorX = rectNode.anchorY = 0;


		if (quesData.bgItem.isShowDebugLine) {
			ctx.rect(0, 0, rectNode.width, rectNode.height);
		}
		ctx.stroke();
		ctx.fill();

		console.log('```data: ', data)

		// if (data.audio_url) {
		// 	cc.assetManager.loadRemote(data.audio_url, (err, audioClip) => {
		// 		rectNode.audioClip = audioClip;
		// 	});
		// }

		rectNode.addComponent(cc.Button);
		rectNode.on('click', () => {
			if (rectNode.isClicked) {
				return;
			}
			rectNode.isClicked = true;
			console.log('clicked');
			this.video.pause();
			if (data.selectType == 'right') {
				this.startRightVideo();
			} else {
				this.startWrongVideo();
			}

			bg.active = false;
			// if (rectNode.audioClip) {
			// 	cc.audioEngine.stopAllEffects();
			// 	cc.audioEngine.playEffect(rectNode.audioClip, false, 0.8);
			// }
		});


	},


	setOneAnima (data, bg) {


		console.log( 'in setOneAnima ');

		if (data.animType == 'spine') {
			this.loadSpine(data, bg);
			return;
		}

		const pageData = bg.data;
		const rate = (bg.scale * bg.width) / pageData.bgItem.rect.width;

		const rectNode = new cc.Node();
		rectNode.name = 'rect' + data.index;
		bg.addChild(rectNode, 10);

		const ctx = rectNode.addComponent(cc.Graphics);
		// 红色矩形
		ctx.lineWidth = 4;
		ctx.strokeColor = cc.Color.BLACK;
		ctx.fillColor = cc.Color.WHITE.setA(100);

		const scale = rate / bg.scaleY;

		rectNode.width = data.rect.width * scale;
		rectNode.height = data.rect.height * scale;
		rectNode.x = -bg.width / 2 + data.rect.x * scale;
		rectNode.y = bg.height / 2 - data.rect.height * scale - data.rect.y * scale;
		rectNode.anchorX = rectNode.anchorY = 0;

		if (pageData.bgItem.isShowDebugLine) {
			ctx.rect(0, 0, rectNode.width, rectNode.height);
		}
		ctx.stroke();
		ctx.fill();


		const animaNode = new cc.Node();
		animaNode.name = 'anima_' + data.index;
		bg.addChild(animaNode);


		if (data.audio_url) {
			cc.assetManager.loadRemote(data.audio_url, (err, audioClip) => {
				animaNode.audioClip = audioClip;
			});
		}

		const dragonDisplay = animaNode.addComponent(dragonBones.ArmatureDisplay);
		if (!data.texPngData) {
			return
		}

		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";
		




		const loadTexture = new Promise((resolve, reject) => {
				cc.assetManager.loadRemote(image, (error, texture) => {
						if (error) {
								reject(error);
						}
						resolve(texture);
				});
		});

		const loadTexJsonData = new Promise((resolve, reject) => {
				cc.assetManager.loadAny({ url: atlas }, (error, atlasJson) => {
						if (error) {
								reject(error);
						}
						resolve(atlasJson);
				});
		});

		const loadSkeJsonData = new Promise((resolve, reject) => {
				cc.assetManager.loadAny({ url: ske }, (error, dragonBonesJson) => {
						if (error) {
								reject(error);
						}
						resolve(dragonBonesJson);
				});
		});

		Promise.all([loadTexture, loadTexJsonData, loadSkeJsonData]).then(([texture, atlasJson, dragonBonesJson]) => {
				const atlas = new dragonBones.DragonBonesAtlasAsset();
				atlas.atlasJson = JSON.stringify(atlasJson);
				atlas.texture = texture;

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

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

				let armatureNames = dragonBonesJson.armature.map(data => data.name);

				// if (armatureNames.length > 0) {
				// 		dragonDisplay.armatureName = armatureNames[0];
				// }

				console.log('aaaaa');

				let animationNames = [];

				if (armatureNames.length > 0) {
					let defaultArmatureName = armatureNames[0];
					dragonDisplay.armatureName = defaultArmatureName;

					animationNames = dragonDisplay.getAnimationNames(defaultArmatureName)

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

					console.log('bbbbb');


						if (!this.canTouch) {
							return;
						}
						if (rectNode.isClicked) {
							// return;
						}
						rectNode.isClicked = true;
						console.log('clicked');

						if (animaNode.audioClip) {
							cc.audioEngine.stopAllEffects();
							// cc.director.emit('STOP_ALL_AUDIO')
							cc.audioEngine.playEffect(animaNode.audioClip, false, 0.8);
						}

						if (animationNames.length > 0) {
							dragonDisplay.playAnimation(animationNames[0], 1);
						}
					});
				}

		});
		
		
	},
		
	

	addPicAudio(picNode) {
		const data = picNode.data;

		cc.assetManager.loadRemote(data.audio_url, (err, audioClip) => {
			picNode.audioClip = audioClip;
		});

		picNode.addComponent(cc.Button);
		picNode.on('click', () => {
			if (!this.canTouch) {
				return;
			}
			if (picNode.audioClip) {
				cc.audioEngine.stopAllEffects();
				cc.audioEngine.playEffect(picNode.audioClip, false, 0.8);
			}
		});
	},

	getLabel() {
		const resLabel = cc.find("Canvas/res/label")
		const labelNode = cc.instantiate(resLabel)
		const label = labelNode.getComponent(cc.Label);
		label.fontSize = 44;
		return label;
	},

	getRichText() {
		const resLabel = cc.find("Canvas/res/label")
		const label = resLabel.getComponent(cc.Label);
		const fontFamily = label.fontFamily;

		const node = new cc.Node();
		const richText = node.addComponent(cc.RichText);
		richText.fontFamily = fontFamily;
		return richText;

	},

	getAnim(resName) {
		const anim = cc.find("Canvas/res/anim/" + resName);
		const newAnim = cc.instantiate(anim)
		return newAnim;
	},

	isDestroy: null,
	onDestroy() {
		this.isDestroy = true;

		cc.Tween.stopAll();
		cc.game.canvas.style.backgroundColor = '#000000';
		this.pauseVideo();

	}


});
