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

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

	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.isDebug = false;
			this.preloadItem()
		})
	},

	_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, 'dfzx_cocos_dqq');
			return;
		}
		
		const middleLayer = cc.find('middleLayer');
		if (middleLayer) {
			const middleLayerComponent = middleLayer.getComponent('middleLayer');
			middleLayerComponent.getData(func);
			return;
		}
		
		func(this.getDefaultData());
	},

	getDefaultData() {
	
		return {"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/859f884997c2852f46a6a475d6d3a245.png","rect":{"x":315.63,"y":0,"width":1080.73,"height":649}},"hotZoneItemArr":[{"id":"1647223907998","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":401.9842245882545,"posY":287.4657961765845,"rect":{"x":114,"y":294.15,"width":69.8,"height":69.8},"pointItem":1,"linkItem":2},{"id":"1647223941246","index":1,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":491.73952954818037,"posY":402.53212651753756,"rect":{"x":216.73,"y":425.85,"width":69.8,"height":69.8},"pointItem":2,"linkItem":1},{"id":"1647223944393","index":2,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":590.5614616070419,"posY":435.10980867329874,"rect":{"x":329.84,"y":463.14,"width":69.8,"height":69.8},"pointItem":3,"linkItem":4},{"id":"1647223948331","index":3,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":686.2056224827473,"posY":319.9545927407677,"rect":{"x":439.32,"y":331.33,"width":69.8,"height":69.8},"pointItem":4,"linkItem":3},{"id":"1647223952914","index":4,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":774.3164698089851,"posY":312.51016478287784,"rect":{"x":540.18,"y":322.81,"width":69.8,"height":69.8},"pointItem":5,"linkItem":6},{"id":"1647223964616","index":5,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":864.3384315436449,"posY":207.24380476612652,"rect":{"x":643.21,"y":202.32,"width":69.8,"height":69.8},"pointItem":6,"linkItem":5},{"id":"1647223970377","index":6,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":964.2601380500003,"posY":253.71034283766738,"rect":{"x":757.59,"y":255.5,"width":69.8,"height":69.8},"pointItem":7,"linkItem":8},{"id":"1647223975796","index":7,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":999.1153658364111,"posY":319.04347833234567,"rect":{"x":797.49,"y":330.28,"width":69.8,"height":69.8},"pointItem":8,"linkItem":7},{"id":"1647225553481","index":8,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":503.12096876135615,"posY":252.041211483314,"rect":{"x":229.75,"y":253.59,"width":69.8,"height":69.8},"pointItem":9,"linkItem":10},{"id":"1647225562154","index":9,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":600.1190853118711,"posY":230.04095706574236,"rect":{"x":340.78,"y":228.41,"width":69.8,"height":69.8},"pointItem":10,"linkItem":9},{"id":"1647225572010","index":10,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":642.1194536477583,"posY":149.04087352564423,"rect":{"x":388.86,"y":135.7,"width":69.8,"height":69.8},"pointItem":11,"linkItem":12},{"id":"1647225578720","index":11,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":753.1196131334002,"posY":139.04056594619203,"rect":{"x":515.91,"y":124.25,"width":69.8,"height":69.8},"pointItem":12,"linkItem":11},{"id":"1647225585585","index":12,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":680.1200346311681,"posY":459.0405279734201,"rect":{"x":432.35,"y":490.53,"width":69.8,"height":69.8},"pointItem":13,"linkItem":14},{"id":"1647225591837","index":13,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":778.1197574299333,"posY":460.0417431021202,"rect":{"x":544.52,"y":491.67,"width":69.8,"height":69.8},"pointItem":14,"linkItem":13},{"id":"1647225597620","index":14,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":840.1201295630977,"posY":399.04174689939737,"rect":{"x":615.49,"y":421.85,"width":69.8,"height":69.8},"pointItem":15,"linkItem":16},{"id":"1647225604071","index":15,"pic_url":"http://staging-teach.cdn.ireadabc.com/e8e8f4bcd2e9b781156097c99d6b4728.png","itemType":"rect","fontScale":1.3375,"imgScale":0.9699248120300752,"imgSizeW":181,"imgSizeH":122,"mapScale":1.3375,"dragDot":{"x":856,"y":327.4247590808005},"gIdx":"0","posX":951.1203649942834,"posY":408.0415152654889,"rect":{"x":742.55,"y":432.15,"width":69.8,"height":69.8},"pointItem":16,"linkItem":15},{"id":"1647227158712","index":16,"pic_url":"http://staging-teach.cdn.ireadabc.com/53b3705d6edd770629a5a199a5fe0db9.png","itemType":"pic","fontScale":1.3375,"imgScale":1.4017278617710582,"imgSizeW":180,"imgSizeH":125,"mapScale":1.3375,"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/bf1eac006da9712a9c95204f6bc1ed89.json","name":"Bb_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/3dff917eb30b14d179917dd5697ac662.json","name":"Bb_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/8f8a78e9e4ae0e23d63fb2cdeaf5e86c.png","name":"Bb_tex.png"},"dragDot":{"x":856,"y":326.17741935483866},"gIdx":"1","rect":{"x":859.29,"y":69.21,"width":252.31,"height":175.22}}],"bgItem2":{"url":"http://staging-teach.cdn.ireadabc.com/adf50c2f2adf064869b4bffda6916983.png","rect":{"x":146.6,"y":0,"width":1194.8,"height":1546}},"hotZoneItemArr2":[{"id":"1647222417835","index":0,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":346.5,"posY":755,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":true}]},"rect":{"x":211.45,"y":804.89,"width":50.58,"height":50.58}},{"id":"1647222441606","index":1,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":430.5002278181205,"posY":864.9994756015824,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":true}]},"rect":{"x":303.81,"y":925.84,"width":50.58,"height":50.58}},{"id":"1647222451373","index":2,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":525.5001694744556,"posY":896.9993991991639,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":true}]},"rect":{"x":408.27,"y":961.03,"width":50.58,"height":50.58}},{"id":"1647222468636","index":3,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":621.5001034905488,"posY":785.9993769730058,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":true}]},"rect":{"x":513.83,"y":838.97,"width":50.58,"height":50.58}},{"id":"1647222475621","index":4,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":707.5000368120744,"posY":779.9994540699917,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":true}]},"rect":{"x":608.4,"y":832.38,"width":50.58,"height":50.58}},{"id":"1647222483621","index":5,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":792.4999770792745,"posY":676.9994582373963,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":true}]},"rect":{"x":701.86,"y":719.12,"width":50.58,"height":50.58}},{"id":"1647222491908","index":6,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":890.4999180410421,"posY":723.9995297778427,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":true}]},"rect":{"x":809.62,"y":770.8,"width":50.58,"height":50.58}},{"id":"1647222502056","index":7,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":924.4998499734328,"posY":787.999497133173,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":true}]},"rect":{"x":847,"y":841.17,"width":50.58,"height":50.58}},{"id":"1647222540668","index":8,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":442.4998263581399,"posY":719.9994526808568,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":false}]},"rect":{"x":317.01,"y":766.4,"width":50.58,"height":50.58}},{"id":"1647222548319","index":9,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":536.5001611396463,"posY":698.9994999114427,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":false}]},"rect":{"x":420.37,"y":743.31,"width":50.58,"height":50.58}},{"id":"1647222566623","index":10,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":576.5000958503069,"posY":619.999514497359,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":false}]},"rect":{"x":464.35,"y":656.44,"width":50.58,"height":50.58}},{"id":"1647222576552","index":11,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":685.5000680676092,"posY":608.9995693681868,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":false}]},"rect":{"x":584.21,"y":644.35,"width":50.58,"height":50.58}},{"id":"1647222587370","index":12,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":615.4999923597582,"posY":921.9995770084287,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":false}]},"rect":{"x":507.24,"y":988.52,"width":50.58,"height":50.58}},{"id":"1647222596449","index":13,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":709.5000409794791,"posY":922.9993596088198,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":false}]},"rect":{"x":610.59,"y":989.62,"width":50.58,"height":50.58}},{"id":"1647222606036","index":14,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":769.4999756901395,"posY":863.9993589142523,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight","value":false}]},"rect":{"x":676.57,"y":924.74,"width":50.58,"height":50.58}},{"id":"1647222616647","index":15,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"0","posX":876.4999340160931,"posY":871.9993998937314,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight"}]},"rect":{"x":794.22,"y":933.54,"width":50.58,"height":50.58}},{"id":"1647222628410","index":16,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"1","labelText":"Bb","posX":1043.5,"posY":610,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight"}]},"rect":{"x":894.83,"y":600.37,"width":216.62,"height":140.75}},{"id":"1647222660957","index":17,"itemType":"rect","fontScale":1.1625,"imgScale":1,"imgSizeW":0,"imgSizeH":0,"mapScale":1.1625,"dragDot":{"x":744,"y":775.43661971831},"gIdx":"2","posX":676.5,"posY":756,"checkbox":{"title":"答案","list":[{"label":"正确","key":"isRight"}]},"rect":{"x":39.37,"y":512.4,"width":1120.46,"height":637.75}}],"firstPart":"0","isDebug":false,"page_id":"7","book_id":"opw1","part_name":"d","begin_audio_url":"http://staging-teach.cdn.ireadabc.com/d14b61977094e9599ab2c910ec745950.mp3","change_stage_audio_url":"http://staging-teach.cdn.ireadabc.com/6ad827547793755fb4a0c256750e9043.mp3","stage_1_audio_url":"http://staging-teach.cdn.ireadabc.com/ddc4dc81b23fdebf8b6019f6c10b95fb.mp3","stage_2_audio_url":"http://staging-teach.cdn.ireadabc.com/3feef0000c49ff225721254dd03dca22.mp3","finish_right_audio_url":"http://staging-teach.cdn.ireadabc.com/64bc32d8e342dd3f019f3733e2b193dd.mp3","finish_wrong_audio_url":"http://staging-teach.cdn.ireadabc.com/7586220a8fe9fcf2c34bbaf3908e1fcd.mp3","isGuide":true}

	},

	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();
			// }
		});
	},

	addServerListener() {

		console.log(' in addServerListener');

		if (window && window["air"]) {
			// cc.find('Canvas').opacity = 0;
			window.air.onCourseInScreen = (next) => {
				//  cc.find('Canvas').opacity = 255;
				this.loadEnd();
				next();
			}
			window.air.hideAirClassLoading();
		} else {
			this.loadEnd();
		}


		if (window.air) {
			window.air.osmoHandwritingCallback = (data) => {

				if (!data) {
					console.log('data is not exist!!!');
					return;
				}

				console.log('osmoHandwritingCallback data: ', data);

				if (typeof (data) == 'string') {
					console.log('data is string ');
					const dataObj = JSON.parse(data);

					this.photoEnd(dataObj);
					return;
				}

				// 哲学逻辑
				this.photoEnd(data);

			}
		}

	},

	addPreloadImage() {
	
		if (this.data.pic_url) {
			this._imageResList.push({ url: this.data.pic_url || ''});
			this._imageResList.push({ url: this.data.answer_pic_url || ''});
		}

		if (this.data.bgItem) {
			this._imageResList.push({ url: this.data.bgItem.url || ''});
		}
		if (!this.data.hotZoneItemArr) {
			return;
		}
		this.data.hotZoneItemArr.forEach((item) => {
			if (item.pic_url) {
				this._imageResList.push({ url: item.pic_url || ''});
			}
		})
	},

	addPreloadAudio() {

		if (this.data.questionArr) {
			const arr = this.data.questionArr;
			for (let i=0 ;i<arr.length; i++) {
				this._audioResList.push({url: arr[i].audio_url || ''});
				this._audioResList.push({url: arr[i].video_url || ''});
			}
		}

		const arr = [
			'begin_audio_url',
			'change_stage_audio_url',
			'stage_error_audio_url',
			'finish_right_audio_url',
			'finish_wrong_audio_url',
			'stage_1_audio_url',
			'stage_2_audio_url',
		]
		for (let i=0; i<arr.length; i++) {
			this._audioResList.push({url: this.data[arr[i]] || ''});
		}



		this.audioClipObj = {};
		for (let i=0; i<arr.length; i++) {
			const audio_url = this.data[arr[i]];
			if (audio_url) {
				cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
					this.audioClipObj[audio_url] = audioClip;
				});
			}
		}
	

	},

	addPreloadAnima() {
		if (!this.data.hotZoneItemArr) {
			return;
		}
		this.data.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 || ''});
			}
		})
	},

	loadEnd() {

		console.log('in load end');
		this.initData();
		this.initView();
		// this.initMusic();
	},

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

	curGroupIndex: null,
	curQuestionIndex: null,
	curQuestionData: null,

	picNodeArr: null,
	rectNodeArr: null,
	writeNodeArr: null,
	totalLineArr: null,

	initData() {
		// this.curGroupIndex = 0;
		// this.curQuestionIndex = 0;
		// this.setCurGroupAndQuestion()

		// console.log('this.curQuestionData', this.curQuestionData)

		this.picNodeArr = [];
		this.rectNodeArr = [];
		this.writeNodeArr = [];
		this.totalLineArr = [];
		this.initAudioEffect();

		this.initQuesRegion();
		this.initTestPointArr();
	},


	ques_region: null,
	initQuesRegion() {
		const regionItem = this.data.hotZoneItemArr2.find(hzItem => {
			return hzItem.gIdx == '2'
		})

		const bgRect = this.data.bgItem2.rect;
		const regionRect = regionItem.rect;

		const left = Math.round( (regionRect.x ) / bgRect.width  * 1000 ) / 1000;
		const right =  Math.round( (regionRect.x + regionRect.width) / bgRect.width * 1000 ) / 1000;
		const top =  Math.round( (regionRect.y ) / bgRect.height * 1000 ) / 1000;
		const bottom =  Math.round( (regionRect.y + regionRect.height) / bgRect.height * 1000 ) / 1000;

		this.ques_region = [
			left, top,
			right, top,
			right, bottom,
			left, bottom
		]

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

		// "ques_region": [
		// 	0.0, 0.33195020746887965,
		// 	1.0, 0.33195020746887965,
		// 	1.0, 0.7468879668049793,
		// 	0.0, 0.7468879668049793
		// ]


		console.log('regionItem: ', regionItem);
	},

	initTestPointArr() {
		
		const linkeItemArr = this.data.hotZoneItemArr.filter(hzItem => {
			return hzItem.gIdx == '0';
		})

		const bgRect = this.data.bgItem2.rect;

		const setDebugCenterPos = (hzItem) => {

			const debugItemIndex = (Number(hzItem.pointItem) - 1) 
			const debugItem = this.data.hotZoneItemArr2[debugItemIndex];
			const {rect} = debugItem

			const left = Math.round( (rect.x ) / bgRect.width  * 1000 ) / 1000;
			const right =  Math.round( (rect.x + rect.width) / bgRect.width * 1000 ) / 1000;
			const top =  Math.round( (rect.y ) / bgRect.height * 1000 ) / 1000;
			const bottom =  Math.round( (rect.y + rect.height) / bgRect.height * 1000 ) / 1000;
	
			
			const x = left + (right - left) / 2;
			const y = bottom - (bottom - top) / 2;

			// console.log('~~x: ', x);
			// console.log('~~y: ', y);
			hzItem.debugCenterPos = [x, y];
		}

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

		linkeItemArr.forEach(hzItem => {
			return setDebugCenterPos(hzItem);
		})

		const startPosObj = {};
		const endPosObj = {};

		for (let i=0; i<linkeItemArr.length; i++) {
			const index = this.data.hotZoneItemArr.indexOf(linkeItemArr[i]);
			const key = (index + 1).toString();
			if (!startPosObj[key] && !endPosObj[key]) {
				startPosObj[key] = linkeItemArr[i];


				const endKey = linkeItemArr[i].linkItem.toString();
				const endIndex = Number(endKey) - 1;
				const endItem = this.data.hotZoneItemArr[endIndex];
				endPosObj[endKey] = endItem;
			}
		}

		console.log('startPosObj: ', startPosObj);
		console.log('endPosObj: ', endPosObj);

		this.start_points = [];
		for (let key in startPosObj) {
			const item = startPosObj[key];
			this.start_points = this.start_points.concat(item.debugCenterPos);
		}

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

		this.end_points = [];
		for (let key in endPosObj) {
			const item = endPosObj[key];
			this.end_points = this.end_points.concat(item.debugCenterPos);
		}
		
		console.log('this.end_points: ', this.end_points);

		// " start _ points ":[
		// 	0.2761394101876676, 0.44190871369294604, 
		// 	0.2761394101876676, 0.5591286307053942,
		// 	0.2761394101876676, 0.6773858921161826, 
		// 	0.760053619302949, 0.44190871369294604,
		// 	0.760053619302949, 0.5591286307053942, 
		// 	0.760053619302949, 0.6773858921161826
		// ],

		// " end _ points ":[
		// 	0.514745308310992, 0.49066390041493774, 
		// 	0.38337801608579086, 0.49066390041493774,
		// 	0.38337801608579086, 0.6265560165975104, 
		// 	0.646112600536193, 0.49066390041493774,
		// 	0.514745308310992, 0.6265560165975104, 
		// 	0.646112600536193, 0.6265560165975104
		// ]
	
	},


	curGroup: null,
	setCurGroupAndQuestion() {
		this.curGroup = this.data.groupArr[this.curGroupIndex];

		if (!this.curGroup) {
			this.gameEnd();
		} else {
			this.curQuestionIndex = 0;
			this.setCurQuestionData();
		}
	},

	setCurQuestionData() {
		this.curQuestionData = this.curGroup.questionArr[this.curQuestionIndex];

		if (!this.curQuestionData) {

			this.hideVideo();
			this.showBigStar();
		}
	},

	hideVideo() {
		this.videoNode.active = false;

		this.videoNode.player.pause();
		this.videoNode.pauseBtn.active = false;
		this.videoNode.playBtn.active = true;
	},


	rightClip: null,
	wrongClip: null,
	bigStarClip: null,
	btnClip: null,
	finishClip: null,
	selectClip: null,
	starCountClip: null,
	initAudioEffect() {
		this.rightClip = cc.find('Canvas/res/audio/right').getComponent(cc.AudioSource).clip;
		this.wrongClip = cc.find('Canvas/res/audio/wrong').getComponent(cc.AudioSource).clip;
		this.bigStarClip = cc.find('Canvas/res/audio/big_star').getComponent(cc.AudioSource).clip;
		this.btnClip = cc.find('Canvas/res/audio/btn').getComponent(cc.AudioSource).clip;
		this.finishClip = cc.find('Canvas/res/audio/finish').getComponent(cc.AudioSource).clip;
		this.selectClip = cc.find('Canvas/res/audio/select').getComponent(cc.AudioSource).clip;
		this.starCountClip = cc.find('Canvas/res/audio/star_count').getComponent(cc.AudioSource).clip;
	},



	initView() {

		this.initBg();
		this.initHotZone();
		this.initDebugLayer();

		this.initCat();

		const node = cc.find('middleLayer/ConsoleNode/BtnOpen');
		node.opacity = 0;
	},

	showGuide() {
		if (!this.data.isGuide) {
			return;
		}

		if (this.data.firstPart == '0') {

			const debugFirstItem = this.linkRectGroup.find(item => {
				return item.isRightPoint;
			})
			if (debugFirstItem.isRightPoint) {
				
				const {hzItemId, linkHzItemId} = debugFirstItem.linkData
				this.showSuccess(hzItemId, linkHzItemId);
			} 

		} else {
			this.showLetter(0);
		}
	},

	

	initCat() {

		const cat = cc.find("Canvas/catNode/cat")
		cat.parent.zIndex = 10;
		this.cat = cat;


		this.canTouch = false;
		this.playCatAudio(this.data.begin_audio_url, () => {
			this.canTouch = true;
			this.isPanelMoveEnd = true;
			this.startTesting();
		});

		this.curCatAudioUrl = this.data.stage_1_audio_url;

		const clickBox = cc.find("Canvas/catNode/clickBox")
		clickBox.on('touchstart', () => {

			console.log(' in cat touchstart')

			// if (this.isPlayTip) {
			// 	return;
			// }

			// if (!this.canTouch) {
			// 	return;
			// }


			let url = this.curCatAudioUrl;
			if (!url) {
				return;
			}

			this.isPlayTip = true;

			// if (!this.isLinkEnd) {
			// 	url = this.data.stage_1_audio_url;
			// } else {
			// 	url = this.data.stage_2_audio_url;
			// }
			this.playCatAudio(url, () => {
				this.isPlayTip = false;
			})

			// this.playAni('begin', 0)
			// //播放引导音频1
	
			// playAudioByUrl(this.data.tip_audio_url, () => {
	
			// 	this.isPlayTip = false;
			// 	this.playAni('normal', 0);
	
			// })

		})
	},

	playCatAnim(name, times = 0) {
		const cat = cc.find("Canvas/catNode/cat")		
		var dragonDisplay = cat.getComponent(dragonBones.ArmatureDisplay);
		const state = dragonDisplay.playAnimation(name, times);
	},
	

	//调起检测
	startTesting() {

		if (!this.hotZone1LoadEnd || !this.hotZone2LoadEnd || !this.isPanelMoveEnd) {
			return;
		}
		
		this.showGuide();

		// this.showRectWrong(this.writeNodeArr[0]);

		// this.getPhotoData((data) => {
		// 	this.photoEnd(data);
    // });
    // return;
		

    const cw = window["courseware"];
    if (!cw || !cw.openOsmoHandwriting) {
      console.log("cw.openOsmoHandwriting not exist");
      return;
    }

    const para =
		{
			"library_id": "iplayabc",
			"page_id": this.data.page_id, //27,
			"book_id": this.data.book_id,//"opw1",
			"part_name": this.data.part_name, //"d",
			"is_hand_writing": true,
			"is_line_link": true,
			"ques_region": this.ques_region,
			"start_points":this.start_points,
			"end_points":this.end_points
		}
		
    
		console.log('para: ', para);

    cw.openOsmoHandwriting(para);

		this.isStartTesting = true;
	},

	//结束检测
	endTesting() {

		if (!this.isStartTesting) {
			return;
		}

		const cw = window.courseware;
		if (!cw || !cw.closeOsmoHandwriting) {

			return;
		}
		cw.closeOsmoHandwriting();
		// this.isTesting = false;
	},




	debugLayer: null,
	initDebugLayer() {

		console.log(' in initDebugLayer');
		const layer = new cc.Node();
		layer.parent = cc.find('Canvas');
		layer.zIndex = 100;
		layer.anchorX = 0;
		layer.anchorY = 1;

		if (!this.data.bgItem2) {
			return;
		}


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

			layer.width = img.width;
			layer.height = img.height;


			const sprNode = layer//new cc.Node();
	
			// sprNode.name = 'bgItemSpr'
			var sf = new cc.SpriteFrame(img);

			const spr = sprNode.addComponent(cc.Sprite);
			spr.spriteFrame = sf
			// sprNode.width = layer.width;
			// sprNode.height = layer.height;
			// sprNode.parent = layer;


			
			const tmpRate = 2;
			const sx = this.canvas.width / tmpRate / layer.width;
			const sy = (this.canvas.height) / tmpRate / layer.height;
			const s = Math.min(sx, sy);
			layer.scale = s;

			this.initDebugRect();
			this.initDebugDrawLayer();

			this.hotZone2LoadEnd = true;
			this.startTesting();
			
		});



		// const layer = new cc.Node();
		layer.x = -this.canvas.width / 2 + 10;
		layer.y = this.canvas.height / 2 - 10;
		layer.opacity = 180;

		if (!this.data.isDebug) {
			layer.active = false;
		}


		// this.canvas.addChild(layer, 20)
		this.debugLayer = layer;
	},

	initDebugDrawLayer() {

		console.log(' in initDebugDrawLayer')

		const drawLayer = new cc.Node();
    this.debugDrawLayer = drawLayer;
    this.debugLayer.addChild(drawLayer, 2);

  
    
    this.addOsmoListener();
    this.addDebugLayerListener();

		// this.showSuccess(1, 12);

	},


  addDebugLayerListener() {

		if (!this.data.isDebug) {
			return;
		}

		this.debugLayer.on('touchstart', (e) => {

			const worldPos = e.getLocation();

			const localPos = this.debugLayer.convertToNodeSpaceAR(worldPos)

			this.addDebugLayerDot(localPos.x, localPos.y);
			// this.debugLayer

		})
	},

	addOsmoListener() {
    if (window['air']) {
			
			window['air'].osmoHandwritingCallback = (data) => {

				if (!data) {
					console.log('data is not exist!!!');
					return;
				}

				console.log('osmoHandwritingCallback data: ', data);

				if (typeof (data) == 'string') {
					console.log('data is string ');
					const dataObj = JSON.parse(data);

					this.photoEnd(dataObj);
					return;
				}

				// 哲学逻辑
				this.photoEnd(data);
			}
		}
  },

	photoEnd(data) {
 
		const text = data?.result?.text;
		const paths = data?.result?.paths;
    if (!paths && !text) {
			console.log('no data ...');
      return;
    }

    this.debugDrawLayer.removeAllChildren();

		if (this.isLinkEnd) {
			this.setWritePhotoEndData(data);
		} else {
			this.setLinkPhotoEndData(data);
		}
    

		if (this.data.firstPart == '0') {
			this.checkGameEndLinkFirst();
		} else {
			this.checkGameEndWriteFirst();
		}


    // if (this.gameData.length >= Game.getIns().nowList.length) {
    //   this.gameOver(this.isWin);
    //   this.endTesting();
    // }
  },

	isCurWrited: null,
	setWritePhotoEndData(data) {

		const text = data.result.text;
    if (!text || Object.keys(text).length == 0) {
			console.log('in setWritePhotoEndData  !text ')
      return;
    }

		this.isCurWrited = false;
		console.log(' in setWritePhotoEndData 1')
		const answerData = this.getWriteAnswerData(data);
		this.showUserRight(answerData);

	},

	isCurLinked: null,
	setLinkPhotoEndData(data) {

		const paths = data.result.paths;
    if (!paths || Object.keys(paths).length == 0) {
      return;
    }

		this.isCurLinked = false;

		this.initCurLinkItem();

		this.drawUserLine(paths);

    const answerData = this.getLinkAnswerData(paths);

    this.showLinkAnswer(answerData);

		this.checkDeleteLink();
    // console.log('answerData: ',  JSON.stringify( answerData ));
	},

	initCurLinkItem() {

		this.rectNodeArr.forEach(item => {
			item.curLinkItemArr = [];
		})

		this.curFailLineArr = [];
	},

	addCurLinkItemArr(startItem, endItem) {
		startItem.curLinkItemArr.push(endItem);
		endItem.curLinkItemArr.push(startItem);

	

	},

	checkDeleteLink() {


		this.getCurFailLineArr();


		let totalFailLineArr = [];
		this.rectNodeArr.forEach(item => {
			if (!item.lineArr) {
				return;
			}
			const subFailLineArr = item.lineArr.filter(line => {
				if (line.isRight) {
					return false;
				}
				if (totalFailLineArr.indexOf(line) != -1) {
					return false;
				}
				return true;
			})

			totalFailLineArr = totalFailLineArr.concat(subFailLineArr);
		})

		const deleteFailLineArr = totalFailLineArr.filter(line => {
			return this.curFailLineArr.indexOf(line) == -1;
		})
	
		deleteFailLineArr.forEach(line => {
			this.deleteLine(line)
		})
	},

	deleteLine(line) {
		const item1 = line.itemArr[0];
		const item2 = line.itemArr[1];
		removeFromArr(item1.linkItemArr, item2);
		removeFromArr(item2.linkItemArr, item1);
		removeFromArr(item1.lineArr, line)
		removeFromArr(item2.lineArr, line)
		removeFromArr(this.totalLineArr, line);
		line.removeFromParent();
	},

	getWriteAnswerData(data) {

		console.log( ' in getWriteAnswerData ', data);
		// let letter = this.data.letter || 'a';

		// let checkLetter, dotArr;
		// if (isSmall) {
		// 	checkLetter = letter.toLowerCase();
		// 	dotArr = this.dotArr2;
		// } else {
		// 	checkLetter = letter.toUpperCase();
		// 	dotArr = this.dotArr1;
		// }

		// const checkLetter = 'a';
	

		const answerData = {};

		const answerContentObj = {};
		for (let i=0; i<this.writeRectGroup.length; i++) {
			const writeAnswerObj = this.writeRectGroup[i].writeAnswerObj;
			for (let key in writeAnswerObj) {
				answerContentObj[key] = true; // 记录要检测的字母

				writeAnswerObj[key] = false; // 清空字母检测成功记录
			}
		}


		const resultTextArr = data.result.text;

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

			const wordData = resultTextArr[i];

		
			// if (!answerContentObj[wordData.content]) {
			// 	continue;
			// }

			const colorRect =	this.getColorRectByPos(wordData.bbox)
			colorRect.data = wordData;

			this.debugDrawLayer.addChild(colorRect);


			this.setOneWriteAnswerData(colorRect, this.writeRectGroup, answerData);
		}


		return answerData;
	},


	setTestRectDot(topLabelData, bottomLabelData, topLeftLetter, wordDataArr) {


		const topLeftPosX = topLeftLetter.left;
		const topLeftPosY = topLeftLetter.top;

		const totalH = -topLabelData.top + bottomLabelData.top;
	
		const unitH = -topLabelData.top + bottomLabelData.bottom;
		const rate = 0.26;

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


		let rectH;
		let rectW;
		let disW;

		let unit;
		if (-topLeftPosY > -topLabelData.top - totalH / 3) {

			unit = topLeftLetter.bottom - topLabelData.bottom;
			console.log('unit: ', unit);

			// 50

			rectH = 0.88 *rate * unitH; //44  
			rectW = 0.5 *rate * unitH; //27;
			disW = 0.66 *rate * unitH; //55;
		
		} else {

			unit = bottomLabelData.top - topLeftLetter.top;
			// 50

			rectH = 0.5 *rate * unitH; //25  
			rectW = 0.54 *rate * unitH; //27;
			disW = 0.6 *rate * unitH; //46;

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


		}



		const baseX = topLeftPosX + rectW / 2;
		let baseY = -(topLeftPosY - rectH / 2);


		let col = 0;

		const dotArr = [];
		for (let i = 0; i < 9; i++) {
			const x = baseX + col * disW;
			const y = baseY;
			const dot = this.getColorDot(x, y, rectW * 0.1);
			this.debugLayer.addChild(dot,5);
			dotArr.push(dot);
			col++;


		}

		return dotArr;


	},



	setOneWriteAnswerData(colorRect, writeRectGroup, answerData) {


		const wordData = colorRect.data;

		console.log(' in setOneAnswerDataNew')
		const rect = colorRect.getBoundingBox();
		const x = rect.x + rect.width / 2;
		const y = rect.y + rect.height / 2;
		// const checkPoint = cc.v2(x, y);
		const checkDot = this.getColorDot(x, y, 5);


		console.log(' writeRectGroup:' , writeRectGroup)

		this.debugDrawLayer.addChild(checkDot);

		const wordRect = checkDot.getBoundingBoxToWorld();
		const checkPoint = new cc.Vec2(wordRect.x + wordRect.width / 2, wordRect.y + wordRect.height/2);

		console.log(' checkPoint x:' , checkPoint.x)
		console.log(' checkPoint y:' , checkPoint.y)


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

			const debugRect = writeRectGroup[i];
			console.log(' debugRect: ', debugRect);
			const writeAnswerObj = debugRect.writeAnswerObj;
			const checkRect = debugRect.ccRect;

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

			if (checkRect.contains(checkPoint)) {

				console.log('writeAnswerObj:  ', writeAnswerObj);
				console.log('wordData.content:  ', wordData.content);

				if (writeAnswerObj[wordData.content] != null) {
					writeAnswerObj[wordData.content] = true;

					console.log(' ~~~ 1');
					for (let key in writeAnswerObj) {
						if (!writeAnswerObj[key]) {
							console.log(' ~~~ 2');
							return;
						}
					}

					console.log(' ~~~ 3');

					answerData[i.toString()] = colorRect;
				} else {
				
					console.log(' show wrong 1');

					const writeNode = this.writeNodeArr[i];

					if (!writeNode.wrongLetterArr) {
						writeNode.wrongLetterArr = [];
					}
					if (	writeNode.wrongLetterArr.indexOf(wordData.content) == -1 ) {
						console.log(' show wrong 2 ');
						writeNode.wrongLetterArr.push(wordData.content);
						this.showRectWrong(writeNode);
					}
					// if (writeAnswerObj.wrongLetter != wordData.content) {
					// 	writeAnswerObj.wrongLetter = wordData.content;
					// }
				}
				return;
			}

		}

	},


	getColorDot(x, y, r = 10) {
		const node = new cc.Node();

		if (this.debugLayer.parent && this.debugLayer.active) {

			const rect = {
				x:- r/2,
				y: - r/ 2, 
				width:r, 
				height:r
			}

			const colorDot = getSprNode('red');

			
			colorDot.anchorX = 0;
			colorDot.anchorY = 0;
			colorDot.x = rect.x;
			colorDot.y = rect.y;
			colorDot.scaleX = rect.width / colorDot.width;
			colorDot.scaleY = rect.height / colorDot.height;
			node.addChild(colorDot);

		}

		node.x = x;
		node.y = y;

		const rect = new cc.Rect(node.x - r / 2, node.y - r / 2, r, r);
		node.dotRect = rect;
		return node;
	},





	getColorRectByPos(posArr, color='green') {
		const topLeft = posArr[0];
		const bottomRight = posArr[2];

		const sample = this.debugLayer;
		const x = topLeft.x1 * sample.width;
		const y = topLeft.y1 * sample.height;
		const width = (bottomRight.x3 - topLeft.x1) * sample.width;
		const height = (bottomRight.y3 - topLeft.y1) * sample.height;
		const rect = {x, y: -y - height, width, height};

		// console.log('rect ', rect);
		const colorRect = this.getColorRect(rect, color);
		colorRect.opacity = 100;
		return colorRect;
	},


	getColorRect(rect, color='red') {

		const node = getSprNode(color);
		node.anchorX = 0;
		node.anchorY = 0;
		node.x = rect.x;
		node.y = rect.y;
		node.scaleX = rect.width / node.width;
		node.scaleY = rect.height / node.height;


		return node;
	},


  showLinkAnswer(answerData) {

    for (let key in answerData) {

      const tempArr = answerData[key];

      const firstItemIndex = tempArr[0];
      const lastItemIndex = tempArr[1];

			const debugFirstItem = this.linkRectGroup[firstItemIndex];
			const debugLastItem = this.linkRectGroup[lastItemIndex];

			console.log('linkdebugId: ', debugFirstItem.linkData.linkDebugItemId);
			console.log('debugLastItem.linkData.debugItemId: ', debugLastItem.linkData.debugItemId)
			console.log('debugFirstItem.isRightPoint: ', debugFirstItem.isRightPoint)

			
			if (debugFirstItem.isRightPoint && debugFirstItem.linkData.linkDebugItemId == debugLastItem.linkData.debugItemId) {
				
				const {hzItemId, linkHzItemId} = debugFirstItem.linkData
				this.showSuccess(hzItemId, linkHzItemId);

		

			} else {

				const hzItemIdFirst = debugFirstItem.linkData.hzItemId
				const hzItemIdLast = debugLastItem.linkData.hzItemId

				
				this.showFail(hzItemIdFirst, hzItemIdLast);
			}

    }
  },

	showSuccess(startItemId, endItemId) {

		console.log( ' in showSuccess');

		const startItem = this.getItemById(startItemId);
		const endItem = this.getItemById(endItemId);

		if (startItem.isShowEnd || endItem.isShowEnd) {
			return;
		}
		startItem.isShowEnd = true;
		endItem.isShowEnd = true;

		const isLinked = this.checkIsLinked(startItem, endItem);
		if (isLinked) {
			return;
		}

		this.addLinkItem(startItem, endItem);
		this.addLinkItem(endItem, startItem);




		const pos1 = startItem.getPosition();
		pos1.x += startItem.width / 2;
		pos1.y += startItem.height / 2;
		const pos2 = endItem.getPosition();
		pos2.x += endItem.width / 2;
		pos2.y += endItem.height / 2;

		const greenColor = new cc.Color();
		greenColor.fromHEX("#519F00"); 
		const line = this.getLine(pos1, pos2, greenColor);
		this.addLinkLine(startItem, endItem, line);
		line.isRight = true;

		const maskNode = new cc.Node();
		maskNode.width = 0;
		maskNode.height = 0;
		maskNode.x = pos1.x;
		maskNode.y = pos1.y;
		this.hotZoneBg.addChild(maskNode);


		const mask = maskNode.addComponent(cc.Mask);
		mask.type = cc.Mask.Type.ELLIPSE;
		mask.segments = 32;

		maskNode.addChild(line);
		// line.mask = mask;

		this.isCurLinked = true;

		cc.tween(maskNode)
			.to(1.5, {width: this.canvas.width * 2, height: this.canvas.height * 2}, {easing: 'sineOut'})
			.call(() => {
				maskNode.removeComponent(cc.Mask);
			})
			.start();
		

			playAudio(this.rightClip, () => {
			})

	},

	addLinkItem(item, linkItem) {
		if (!item.linkItemArr) {
			item.linkItemArr = [];
		}

		if (item.linkItemArr.indexOf(linkItem) == -1) {
			item.linkItemArr.push(linkItem);
		}
	},

	addLinkLine(item1, item2, line) {
		if ( !item1.lineArr ) {
			item1.lineArr = [];
		}

		if (!item2.lineArr) {
			item2.lineArr = [];
		}
		
		item1.lineArr.push(line);
		item2.lineArr.push(line);
		line.itemArr = [item1, item2];
		this.totalLineArr.push(line);
	},

	checkIsLinked(startItem, endItem) {
		const linkItemArr1 = startItem.linkItemArr || [];
		const linkItemArr2 = endItem.linkItemArr || [];

		return (linkItemArr1.indexOf(endItem) != -1 && linkItemArr2.indexOf(startItem) != -1);
	},


	getItemById(id) {
		const targetItem = this.rectNodeArr.find( item => {
			const data = item.data;

			// console.log('data.index: ', data.index);

			if (data.index + 1 == id) {
				return true;
			}
		})
		return targetItem;
	},

	getLine(item1, item2, color=cc.Color.BLACK) {
		const lineNode = new cc.Node();
		// lineNode.x = item1.x;
		// lineNode.y = item1.y;
		// this.hotZoneBg.addChild(lineNode);

		const ctx = lineNode.addComponent(cc.Graphics);
		ctx.lineWidth = 5;
    ctx.strokeColor = color;
    ctx.fillColor = color;

    ctx.moveTo(0, 0);
		ctx.lineTo(item2.x - item1.x, item2.y - item1.y);
		ctx.stroke();

		const dot1 = this.getDot(0, 0, ctx.lineWidth/2, ctx.strokeColor);
		dot1.parent = lineNode;

		const dot2 = this.getDot(item2.x - item1.x, item2.y - item1.y, ctx.lineWidth/2, ctx.strokeColor);
		dot2.parent = lineNode;

		return lineNode;
	},

	getDot(x, y, r, color) {

		const dotNode = new cc.Node();

    const ctx = dotNode.addComponent(cc.Graphics);
    ctx.fillColor = color || cc.Color.BLUE;
    ctx.circle(x, y, r);
    ctx.fill();

		return dotNode;
	},

	showFail(startItemId, endItemId) {

		console.log( ' in showFail');

		const startItem = this.getItemById(startItemId);
		const endItem = this.getItemById(endItemId);

		this.addCurLinkItemArr(startItem, endItem);

		// if (startItem.isShowEnd || endItem.isShowEnd) {
		// 	return;
		// }

		// startItem.isShowEnd = true;
		// endItem.isShowEnd = true;

		const isLinked = this.checkIsLinked(startItem, endItem);



		if (isLinked) {
			return;
		}

		this.addLinkItem(startItem, endItem);
		this.addLinkItem(endItem, startItem);


		const pos1 = startItem.getPosition();
		pos1.x += startItem.width / 2;
		pos1.y += startItem.height / 2;
		const pos2 = endItem.getPosition();
		pos2.x += endItem.width / 2;
		pos2.y += endItem.height / 2;


		const redColor = new cc.Color();
		redColor.fromHEX("#D80008"); 
		const line = this.getLine(pos1, pos2, redColor);
		this.addLinkLine(startItem, endItem, line);
		line.isRight = false;

		const maskNode = new cc.Node();
		maskNode.width = 0;
		maskNode.height = 0;
		maskNode.x = pos1.x;
		maskNode.y = pos1.y;
		this.hotZoneBg.addChild(maskNode);


		const mask = maskNode.addComponent(cc.Mask);
		mask.type = cc.Mask.Type.ELLIPSE;
		mask.segments = 32;

		maskNode.addChild(line);
		// line.mask = mask;


		cc.tween(maskNode)
			.to(1.5, {width: this.canvas.width * 2, height: this.canvas.height * 2}, {easing: 'sineOut'})
			.call(() => {
				maskNode.removeComponent(cc.Mask);
			})
			.start();
		
	},

	getCurFailLineArr() {
		this.rectNodeArr.forEach(item => {
			const curLinkItemArr = item.curLinkItemArr;
			// const lineArr = item.lineArr;
			curLinkItemArr.forEach(linkItem => {
				let line = this.getLineByItems(item, linkItem);
				if (this.curFailLineArr.indexOf(line) == -1) {
					this.curFailLineArr.push(line)
				}
			})
		})

	},

	getLineByItems(item1, item2) {
		const lineArr = item1.lineArr;
		const line = lineArr.find( line => {
			return item1.lineArr.indexOf(line) != -1 && item2.lineArr.indexOf(line) != -1;
		})

		return line;
	},


	drawUserLine(paths) {
    console.log(" in drawUserLine: ", paths);
    for (let i = 0; i < paths.length; i++) {
      const path = paths[i].path;
      if (path.length > 0) {
        this.drawOnePath(path);
      }
    }
  },

	drawOnePath(path) {
    const lineNode = new cc.Node();
    this.debugDrawLayer.addChild(lineNode);

    const w = this.debugLayer.width;
    const h = this.debugLayer.height;

		// console.log('w: ', w);
		// console.log('h: ', h);


    const subY = 0; //-canvas.height / 2;
    const ctx = lineNode.addComponent(cc.Graphics);
    ctx.lineWidth = 10;
    ctx.strokeColor = cc.Color.RED;
    ctx.fillColor = cc.Color.BLACK;
    

    ctx.moveTo(path[0].x * w, -path[0].y * h + subY);

    for (let i = 1; i < path.length; i++) {
      const x = path[i].x * w;
      const y = -path[i].y * h + subY;

			// console.log('px: ', x);
			// console.log('px: ', x);

      ctx.lineTo(x, y);

    }
    ctx.stroke();
    // ctx.fill();
  },

	getLinkAnswerData(paths) {

    const answerData = {};

    for (let i=0; i<paths.length; i++) {
      const path = paths[i].path;
      if (!path || path.length < 2) {
        continue;
      }
      const firstPos = path[0];
      const lastPos = path[path.length - 1];
      this.setOneLinkAnswerData(firstPos, lastPos, answerData);
    }

    return answerData;

  },

  setOneLinkAnswerData(firstPos, lastPos, answerData) {


    const w = this.debugLayer.width;
    const h = this.debugLayer.height;
    const checkP1 = cc.v2(firstPos.x * w, -firstPos.y * h);
    const checkP2 = cc.v2(lastPos.x * w, -lastPos.y * h);



		let firstPosRectId = -1;
		let lastPosRectId = -1;

		const worldPos1 = this.debugLayer.convertToWorldSpaceAR(cc.v2(checkP1.x, checkP1.y));
		const worldPos2 = this.debugLayer.convertToWorldSpaceAR(cc.v2(checkP2.x, checkP2.y));


		// console.log('worldPos1: ', JSON.stringify(worldPos1));
		// console.log('worldPos2: ', JSON.stringify(worldPos2));

		for (let i=0; i<this.linkRectGroup.length; i++) {
			const rect = this.linkRectGroup[i].ccRect;

			// console.log('rect: ', JSON.stringify(rect));


      if (rect.contains(worldPos1)) {
        firstPosRectId = i;
        // break;
			} 
      if (rect.contains(worldPos2)) {
        lastPosRectId = i;
        // break;
			} 
		}

		// console.log('firstPosRectId: ', firstPosRectId);
		// console.log('lastPosRectId: ', lastPosRectId);

		if (firstPosRectId != -1 && lastPosRectId != -1 && firstPosRectId != lastPosRectId) {

      answerData[firstPosRectId.toString()] = [firstPosRectId, lastPosRectId];
      this.addDebugLayerDot(checkP1.x, checkP1.y, 10, cc.Color.GREEN);
      this.addDebugLayerDot(checkP2.x, checkP2.y, 10, cc.Color.GREEN);
    }



  },

	addDebugLayerDot(x, y, r=10, color = null) {
    const dotNode = new cc.Node();

    const ctx = dotNode.addComponent(cc.Graphics);
    ctx.fillColor = color || cc.Color.BLUE;
    ctx.circle(x, y, r);
    ctx.fill();

    this.debugDrawLayer.addChild(dotNode);

    const w = this.debugLayer.width;
    const h = this.debugLayer.height;
    const rateX = x / w;
    const rateY = y / h;
    
    console.log('ratePos: {x: ' + rateX + ', y: ' + rateY + '}')
  },

	

	linkRectGroup: null,
	writeRectGroup: null,
	initDebugRect() {

		console.log(' in initDebugRect');

		
		this.linkRectGroup = [];
		this.writeRectGroup = [];
		this.data.hotZoneItemArr2.forEach((item) => {
			switch (item.gIdx) {
				case "0":
					this.setOneDebugLinkRect(item);
					break;

				case "1":
					this.setOneDebugWriteRect(item);
					break;

				// case "2":
				// 	this.setOneDebugRegionRect(item);
				// 	break;

				default:
					break;
			}

		});
	

	},


	setOneDebugWriteRect(data) {
		const rate = (this.debugLayer.scale * this.debugLayer.width) / this.data.bgItem2.rect.width;
	
		const rectNode = new cc.Node();
		rectNode.name = 'rect' + data.index;
		this.debugLayer.addChild(rectNode);


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

		const scale = rate / this.debugLayer.scaleY;

		rectNode.width = data.rect.width * scale;
		rectNode.height = data.rect.height * scale;
		rectNode.x = data.rect.x * scale;
		rectNode.y =  - data.rect.height * scale - data.rect.y * scale;
	

		rectNode.anchorX = 0;
		rectNode.anchorY = 0;

		ctx.rect(0, 0, rectNode.width, rectNode.height);
		ctx.stroke();
		ctx.fill();

		rectNode['data'] = data;
		rectNode.opacity = 100;

		rectNode['ccRect'] = rectNode.getBoundingBoxToWorld()


		const letterArr = data.labelText.trim().split('');
		const writeAnswerObj = {}
		for(let i=0; i<letterArr.length; i++) {
			writeAnswerObj[letterArr[i]] = false;
		}
		rectNode.writeAnswerObj = writeAnswerObj;

		this.writeRectGroup.push(rectNode);

		// this.setLinkDataByDebugItem(rectNode, data.index);
	},


	setOneDebugLinkRect(data) {
		const rate = (this.debugLayer.scale * this.debugLayer.width) / this.data.bgItem2.rect.width;
	
		const rectNode = new cc.Node();
		rectNode.name = 'rect' + data.index;
		this.debugLayer.addChild(rectNode);


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

		const scale = rate / this.debugLayer.scaleY;

		rectNode.width = data.rect.width * scale;
		rectNode.height = data.rect.height * scale;
		rectNode.x = data.rect.x * scale;
		rectNode.y =  - data.rect.height * scale - data.rect.y * scale;
	

		rectNode.anchorX = 0;
		rectNode.anchorY = 0;

		ctx.rect(0, 0, rectNode.width, rectNode.height);
		ctx.stroke();
		ctx.fill();


		rectNode['data'] = data;
		rectNode.opacity = 100;

		rectNode['ccRect'] = rectNode.getBoundingBoxToWorld()


		// const tmpRectNode = new cc.Node();
		// ctx = tmpRectNode.addComponent(cc.Graphics);
		// ctx.rect(rectNode.ccRect.x - this.canvas.width / 2, rectNode.ccRect.y - this.canvas.height / 2, rectNode.ccRect.width, rectNode.ccRect.height);
		// ctx.fillColor = cc.Color.BLUE;
		// ctx.fill();
		// this.canvas.addChild(tmpRectNode, 200);


		rectNode.isRightPoint = data.checkbox.list[0].value == true;

		this.linkRectGroup.push(rectNode);

		this.setLinkDataByDebugItem(rectNode, data.index);

	},

	setLinkDataByDebugItem(item, index) {

		let hzItemId;
		let debugItemId;
		let linkHzItemId;
		let linkDebugItemId;


		debugItemId = index + 1;

		const hzItem = this.getHzItem(debugItemId)

		hzItemId = this.data.hotZoneItemArr.indexOf(hzItem) + 1;

		console.log(' hzItem: ', hzItem);
		console.log(' debugItemId: ', debugItemId);

		linkHzItemId = hzItem.linkItem;

		const linkHzItem = this.data.hotZoneItemArr[linkHzItemId-1]

		linkDebugItemId = linkHzItem.pointItem;


		const linkData = {hzItemId, debugItemId, linkHzItemId, linkDebugItemId};
		item.linkData = linkData;

	},


	setOneDebugRegionRect(data) {
		const rate = (this.debugLayer.scale * this.debugLayer.width) / this.data.bgItem2.rect.width;
	
		const rectNode = new cc.Node();
		rectNode.name = 'rect' + data.index;
		this.debugLayer.addChild(rectNode);


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

		const scale = rate / this.debugLayer.scaleY;

		rectNode.width = data.rect.width * scale;
		rectNode.height = data.rect.height * scale;
		rectNode.x = data.rect.x * scale;
		rectNode.y =  - data.rect.height * scale - data.rect.y * scale;
	

		rectNode.anchorX = 0;
		rectNode.anchorY = 0;

		ctx.rect(0, 0, rectNode.width, rectNode.height);
		ctx.stroke();
		ctx.fill();


		rectNode['data'] = data;
		rectNode.opacity = 100;

		rectNode['ccRect'] = rectNode.getBoundingBoxToWorld()


		// this.linkRectGroup.push(rectNode);

		// this.setLinkDataByDebugItem(rectNode, data.index);

	},

	getHzItem(pointId) {
		
		const hzItem = this.data.hotZoneItemArr.find((item) => {

			if (item.gIdx == '0') {
				return item.pointItem == pointId
			}
		});

		return hzItem;
	},



	getPhotoWordArr(identifier, data, topLabelData, bottomLabelData) {

		return [];

		const identifierArr = this.getIdentifierArr(data, identifier)

		const wordArr = [];
		const topY = -topLabelData.top
		const bottomY = -bottomLabelData.bottom;
		for (let i = 0; i < identifierArr.length; i++) {

			const curTop = -identifierArr[i].top;
			if (curTop >= topY || curTop <= bottomY) {
				continue;
			}

			wordArr.push(identifierArr[i]);
		}

		return wordArr;




		// const wordArr = [];
		// const maxLen = 10;

		// text = text.trim();

		// const topY = -topLabelData.word[0].location.top;
		// const bottomY = -bottomLabelData.word[0].location.top;

		// for(let j=0; j<block.length; j++) {

		// 	const line = block[j].line;
		// 	if (!line) {
		// 		continue;
		// 	}


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


		// 		const location = line[i].word[0].location;

		// 		const curTop = -location.top;
		// 		if (curTop >= topY || curTop <= bottomY) {
		// 			continue;
		// 		}


		// 		let word = line[i].word;
		// 		let sentence = ''

		// 		if (word.length > maxLen) {
		// 			console.log('continue ', word.length);
		// 			continue;
		// 		}

		// 		line[i].word = word = this.checkCutWordData(word);
		// 		// console.log('word1~ ', word);


		// 		word.forEach(item => {
		// 			sentence += item.content + ' ';
		// 		});

		// 		sentence.trim();

		// 		line[i].sentence = sentence;
		// 		console.log('sentence: ', sentence);
		// 		console.log('text: ', text);

		// 		console.log('index: ', sentence.indexOf(text));
		// 		if (sentence.indexOf(text) != -1 ) {
		// 			wordArr.push( line[i] );
		// 		}
		// 	}
		// }

		// return wordArr;
	},

	getPhotoData(cb) {

	
		const photoData = {"code":200000,"message":"success","result":{"homography":{"matrix":[[1.4464750858919828,0.6385405629372998,103.65542240237613],[-0.15267703372363628,1.5513261092682291,148.6276984961287],[-0.00016885655121037427,0.0011985516685213255,1.0]],"query_size":[640,832],"support_size":[640,480]},"paths":[{"path":[]},{"path":[{"x":0.275,"y":0.554},{"x":0.281,"y":0.554},{"x":0.288,"y":0.554},{"x":0.294,"y":0.557},{"x":0.3,"y":0.557},{"x":0.306,"y":0.559},{"x":0.312,"y":0.559},{"x":0.318,"y":0.559},{"x":0.324,"y":0.562},{"x":0.33,"y":0.562},{"x":0.336,"y":0.565},{"x":0.342,"y":0.565},{"x":0.348,"y":0.567},{"x":0.355,"y":0.567},{"x":0.361,"y":0.57},{"x":0.367,"y":0.572},{"x":0.373,"y":0.575},{"x":0.379,"y":0.575},{"x":0.385,"y":0.577},{"x":0.391,"y":0.58},{"x":0.397,"y":0.583},{"x":0.403,"y":0.585},{"x":0.409,"y":0.588},{"x":0.416,"y":0.59},{"x":0.422,"y":0.593},{"x":0.428,"y":0.595},{"x":0.434,"y":0.595},{"x":0.44,"y":0.598},{"x":0.446,"y":0.601},{"x":0.452,"y":0.601},{"x":0.458,"y":0.603},{"x":0.464,"y":0.606},{"x":0.47,"y":0.606},{"x":0.477,"y":0.608},{"x":0.483,"y":0.608},{"x":0.489,"y":0.611},{"x":0.495,"y":0.613},{"x":0.501,"y":0.613},{"x":0.507,"y":0.616},{"x":0.513,"y":0.619},{"x":0.519,"y":0.621}]},{"path":[{"x":0.275,"y":0.67},{"x":0.281,"y":0.667},{"x":0.281,"y":0.665},{"x":0.281,"y":0.662},{"x":0.288,"y":0.66},{"x":0.288,"y":0.657},{"x":0.294,"y":0.655},{"x":0.294,"y":0.652},{"x":0.3,"y":0.649},{"x":0.3,"y":0.647},{"x":0.3,"y":0.644},{"x":0.306,"y":0.642},{"x":0.306,"y":0.639},{"x":0.312,"y":0.637},{"x":0.312,"y":0.634},{"x":0.312,"y":0.631},{"x":0.318,"y":0.629},{"x":0.318,"y":0.626},{"x":0.324,"y":0.624},{"x":0.324,"y":0.621},{"x":0.324,"y":0.619},{"x":0.33,"y":0.616},{"x":0.33,"y":0.613},{"x":0.336,"y":0.611},{"x":0.336,"y":0.608},{"x":0.342,"y":0.606},{"x":0.348,"y":0.603},{"x":0.348,"y":0.601},{"x":0.355,"y":0.598},{"x":0.361,"y":0.595},{"x":0.367,"y":0.593},{"x":0.373,"y":0.59},{"x":0.373,"y":0.588},{"x":0.379,"y":0.585},{"x":0.385,"y":0.583},{"x":0.391,"y":0.58},{"x":0.397,"y":0.58},{"x":0.403,"y":0.577},{"x":0.409,"y":0.575},{"x":0.416,"y":0.572},{"x":0.422,"y":0.572},{"x":0.428,"y":0.57},{"x":0.434,"y":0.57},{"x":0.44,"y":0.57},{"x":0.446,"y":0.567},{"x":0.452,"y":0.567},{"x":0.458,"y":0.567},{"x":0.464,"y":0.565},{"x":0.47,"y":0.565},{"x":0.477,"y":0.565},{"x":0.483,"y":0.565},{"x":0.489,"y":0.565},{"x":0.495,"y":0.565},{"x":0.501,"y":0.565},{"x":0.507,"y":0.565},{"x":0.513,"y":0.565},{"x":0.519,"y":0.565},{"x":0.525,"y":0.565},{"x":0.531,"y":0.565},{"x":0.538,"y":0.565},{"x":0.544,"y":0.565},{"x":0.55,"y":0.565},{"x":0.556,"y":0.567},{"x":0.562,"y":0.567},{"x":0.568,"y":0.567},{"x":0.574,"y":0.57},{"x":0.58,"y":0.57},{"x":0.586,"y":0.572},{"x":0.592,"y":0.575},{"x":0.599,"y":0.577},{"x":0.605,"y":0.58},{"x":0.611,"y":0.583},{"x":0.617,"y":0.585},{"x":0.623,"y":0.588},{"x":0.623,"y":0.59},{"x":0.623,"y":0.593},{"x":0.623,"y":0.595},{"x":0.629,"y":0.598},{"x":0.629,"y":0.601},{"x":0.629,"y":0.603},{"x":0.635,"y":0.606},{"x":0.635,"y":0.608},{"x":0.635,"y":0.611},{"x":0.641,"y":0.613},{"x":0.641,"y":0.616},{"x":0.641,"y":0.619}]},{"path":[{"x":0.757,"y":0.441},{"x":0.751,"y":0.444},{"x":0.751,"y":0.446},{"x":0.745,"y":0.449},{"x":0.745,"y":0.452},{"x":0.739,"y":0.454},{"x":0.739,"y":0.457},{"x":0.733,"y":0.459},{"x":0.733,"y":0.462},{"x":0.727,"y":0.464},{"x":0.727,"y":0.467},{"x":0.727,"y":0.47},{"x":0.721,"y":0.472},{"x":0.715,"y":0.475},{"x":0.708,"y":0.477},{"x":0.708,"y":0.48},{"x":0.702,"y":0.482},{"x":0.696,"y":0.482},{"x":0.69,"y":0.485},{"x":0.684,"y":0.485},{"x":0.678,"y":0.485},{"x":0.672,"y":0.485},{"x":0.666,"y":0.485},{"x":0.66,"y":0.485},{"x":0.653,"y":0.485}]},{"path":[{"x":0.751,"y":0.549},{"x":0.745,"y":0.549},{"x":0.739,"y":0.549},{"x":0.733,"y":0.549},{"x":0.727,"y":0.549},{"x":0.721,"y":0.549},{"x":0.715,"y":0.547},{"x":0.708,"y":0.547},{"x":0.702,"y":0.547},{"x":0.696,"y":0.547},{"x":0.69,"y":0.547},{"x":0.684,"y":0.547},{"x":0.678,"y":0.547},{"x":0.672,"y":0.547},{"x":0.666,"y":0.547},{"x":0.66,"y":0.549},{"x":0.653,"y":0.549},{"x":0.647,"y":0.549},{"x":0.641,"y":0.549},{"x":0.635,"y":0.549},{"x":0.629,"y":0.549},{"x":0.623,"y":0.549},{"x":0.617,"y":0.549},{"x":0.611,"y":0.549},{"x":0.605,"y":0.547},{"x":0.599,"y":0.547},{"x":0.592,"y":0.547},{"x":0.586,"y":0.544},{"x":0.58,"y":0.544},{"x":0.574,"y":0.544},{"x":0.568,"y":0.542},{"x":0.562,"y":0.542},{"x":0.556,"y":0.542},{"x":0.55,"y":0.539},{"x":0.544,"y":0.539},{"x":0.538,"y":0.539},{"x":0.531,"y":0.536},{"x":0.525,"y":0.536},{"x":0.519,"y":0.534},{"x":0.513,"y":0.534},{"x":0.507,"y":0.531},{"x":0.501,"y":0.531},{"x":0.495,"y":0.529},{"x":0.489,"y":0.529},{"x":0.483,"y":0.526},{"x":0.477,"y":0.526},{"x":0.47,"y":0.524},{"x":0.464,"y":0.521},{"x":0.458,"y":0.518},{"x":0.452,"y":0.518},{"x":0.446,"y":0.516},{"x":0.44,"y":0.513},{"x":0.434,"y":0.511},{"x":0.428,"y":0.511},{"x":0.422,"y":0.508},{"x":0.416,"y":0.506},{"x":0.409,"y":0.503},{"x":0.403,"y":0.5},{"x":0.397,"y":0.498},{"x":0.391,"y":0.495},{"x":0.391,"y":0.493},{"x":0.385,"y":0.49},{"x":0.385,"y":0.488}]},{"path":[]}],"support_results":[[[0.1803,0.5383,0.2346,0.6028,"g",0.9819245338439941],[0.1271,0.5184,0.1916,0.577,"G",0.9761376976966858],[0.7781,0.5153,0.843,0.5779,"H",0.9961503148078918],[0.839,0.5164,0.8863,0.5838,"h",0.9832443594932556]]],"text":[{"bbox":[{"x1":0.1803,"y1":0.5383},{"x2":0.2346,"y2":0.5383},{"x3":0.2346,"y3":0.6028},{"x4":0.1803,"y4":0.6028}],"content":"g","score":0.9819245338439941},{"bbox":[{"x1":0.1271,"y1":0.5184},{"x2":0.1916,"y2":0.5184},{"x3":0.1916,"y3":0.577},{"x4":0.1271,"y4":0.577}],"content":"G","score":0.9761376976966858},{"bbox":[{"x1":0.7781,"y1":0.5153},{"x2":0.843,"y2":0.5153},{"x3":0.843,"y3":0.5779},{"x4":0.7781,"y4":0.5779}],"content":"H","score":0.9961503148078918},{"bbox":[{"x1":0.839,"y1":0.5164},{"x2":0.8863,"y2":0.5164},{"x3":0.8863,"y3":0.5838},{"x4":0.839,"y4":0.5838}],"content":"h","score":0.9832443594932556}]}}

    cb(photoData);
	},


	checkGameEndLinkFirst() {

		console.log( ' in checkGameEndLinkFirst')

		if (!this.isLinkEnd) {

			const isLinkEnd = this.rectNodeArr.every(node => {

				console.log('node.isRightPoint: ', node.isRightPoint);

				if (!node.isRightPoint) {
					return true;
				} else {
					return node.isShowEnd
				}
			})

			if (isLinkEnd) {

				if (this.curFailLineArr.length > 0) {
					if (this.curCatAudioUrl != this.data.finish_wrong_audio_url) {
						this.playCatAudio(this.data.finish_wrong_audio_url);
						this.curCatAudioUrl = this.data.finish_wrong_audio_url;
					}
					return;
				}

				this.isLinkEnd = true;
				this.playCatAudio(this.data.change_stage_audio_url);

				this.curCatAudioUrl = this.data.stage_2_audio_url;

				this.showWriteBg();

				
			} else {
				return;
			}
		}




		// const arr = this.rectNodeArr.concat(this.writeNodeArr);

		const isEnd = this.writeNodeArr.every(node => {
			return node.isShowEnd;
		})

		if (isEnd) {
			this.gameEnd();
		} else {


		}
	},


	showWriteBg() {
		for (let i=0; i<this.writeNodeArr.length; i++) {

			const pic = this.writeNodeArr[i].pic;

			pic.active = true;
			pic.opacity = 0;
			cc.tween(pic)
				.to(1, {opacity: 255}, {easing: "sineOut"})
				.start();
		}
	},

	checkGameEndWriteFirst() {
		console.log( ' in checkGameEndWriteFirst')

		if (!this.isWriteEnd) {

			console.log( ' in !this.isWriteEnd')
			
			let needWriteNode;
			const isWriteEnd = this.writeNodeArr.every(node => {
				if (!needWriteNode && !node.isShowEnd) {
					needWriteNode = node;
				}
				return node.isShowEnd;
			})

			if (isWriteEnd) {

				console.log( ' in isWriteEnd')

				this.isWriteEnd = true;
				this.playCatAudio(this.data.change_stage_audio_url);
				this.curCatAudioUrl = this.data.stage_2_audio_url;
			} else {

				console.log( 'this.isCurWrited: ', this.isCurWrited)
				console.log( 'this.isCurLinked: ', this.isCurLinked)

				if (!this.isCurWrited && this.isCurLinked) {
					this.showRectWarning(needWriteNode);
				}

				return;
			}
	

		}

	
		// const isLinkEnd = this.rectNodeArr.every(node => {
		// 	return node.isShowEnd;
		// })

		// if (isLinkEnd) {
		// 	this.gameEnd();
		// } 

		if (!this.isLinkEnd) {

			console.log( ' !this.isLinkEnd ')

			const isLinkEnd = this.rectNodeArr.every(node => {
				console.log('node.isRightPoint: ', node.isRightPoint);

				if (!node.isRightPoint) {
					return true;
				} else {
					return node.isShowEnd
				}
			})

			if (isLinkEnd) {
				console.log( ' !this.isLinkEnd 1')
        
				if (this.curFailLineArr.length > 0) {

					console.log( ' !this.isLinkEnd 2')

					if (this.curCatAudioUrl != this.data.finish_wrong_audio_url) {

						console.log( ' !this.isLinkEnd 3')

						this.playCatAudio(this.data.finish_wrong_audio_url);
						this.curCatAudioUrl = this.data.finish_wrong_audio_url;
					}
					return;
				}

				this.isLinkEnd = true;
				// this.playCatAudio(this.data.change_stage_audio_url);
				// this.curCatAudioUrl = this.data.stage_2_audio_url;
				
			} else {

				console.log( ' !this.isLinkEnd 4')

				return;
			}
		}


		if (this.isWriteEnd && this.isLinkEnd) {
			this.gameEnd();
		}

		// if (!this.isLinkEnd) {

		// 	const isLinkEnd = this.rectNodeArr.every(node => {
		// 		return node.isShowEnd;
		// 	})

		// 	if (isLinkEnd) {

		// 		if (this.curFailLineArr.length > 0) {
		// 			if (this.curCatAudioUrl != this.data.finish_wrong_audio_url) {
		// 				this.playCatAudio(this.data.finish_wrong_audio_url);
		// 				this.curCatAudioUrl = this.data.finish_wrong_audio_url;
		// 			}
		// 			return;
		// 		}

		// 		this.isLinkEnd = true;
		// 		this.playCatAudio(this.data.change_stage_audio_url);

		// 		this.curCatAudioUrl = this.data.stage_2_audio_url;
				
		// 	} else {
		// 		return;
		// 	}
		// }



		// const isEnd = this.writeNodeArr.every(node => {
		// 	return node.isShowEnd;
		// })

		// if (isEnd) {
		// 	this.gameEnd();
		// } else {


		// }
	},



	playCatAudio(audioUrl, cb=null) {

		console.log('_ playCatAudio:  ', audioUrl);

		if (this.curCatAudioId) {
			cc.audioEngine.pauseEffect(this.curCatAudioId);
		}
			
		const audioClip = this.audioClipObj[audioUrl]
		if (audioClip) {

			this.playCatAnim('begin');
			this.curCatAudioId = playAudio(audioClip, () => {

				this.playCatAnim('normal');
				// this.curCatAudioId = null;
				cb && cb();
			})
		} else {
			cb && cb();
		}
		

		

		// playAudioByUrl(audioUrl, () => {

		// 	this.playCatAnim('normal');
		// 	cb && cb();
		// })
	},














	bigStarArr: null,
	initStar() {
		const gArr = this.data.groupArr;
		if (gArr.length <= 1) {
			return;
		}

		this.cleanStar();

		this.bigStarArr = [];

		let baseX = this.canvas.width / 2 - 80 * this._mapScaleMin;
		let baseY = this.canvas.height / 2 - 80 * this._mapScaleMin;
		let disH = 80 * this._mapScaleMin;
		let disScale = 1;
		if (gArr.length > 5) {
			disH = (400 / gArr.length) * this._mapScaleMin;
			disScale = 5 / gArr.length;
		}
		for (let i = 0; i < gArr.length; i++) {
			const starBg = getSprNode('star_bg');
			this.canvas.addChild(starBg, 10);
			starBg.x = baseX;
			starBg.y = baseY - i * disH;
			starBg.scale = disScale;

			const starTop = getSprNode('star');
			starBg.addChild(starTop);
			starTop.active = false;
			starBg.star = starTop;

			const starBig = getSprNode('icon_bigstar');
			starTop.addChild(starBig);
			starBig.angle = -90;
			starBg.starBig = starBig;

			this.bigStarArr.push(starBg);
		}

		console.log("bigStarArr: ", this.bigStarArr);
	},

	cleanStar() {
		if (this.bigStarArr && this.bigStarArr.length > 0) {
			for (let i=0; i<this.bigStarArr.length; i++) {
				this.bigStarArr[i].removeFromParent();
			}
		}
	},


	showBigStar() {
		if (!this.bigStarArr || this.bigStarArr.length <= 0) {
			this.checkGameEnd();
			return;
		}
		const bigStarBg = this.bigStarArr[this.curGroupIndex];

		const starBig = bigStarBg.starBig;
		starBig.scale = 1;
		const star = bigStarBg.star;
		star.active = true;
		star.scaleX = 0.7 / bigStarBg.scale;
		star.scaleY = 1 / bigStarBg.scale;
		star.angle = 90;
		const canvas = cc.find('Canvas');
		const startPos = exchangeNodePos(star.parent, canvas, cc.v2(0, -canvas.height / 2));
		const middlePos = exchangeNodePos(star.parent, canvas, cc.v2(0, -canvas.height / 4));
		star.x = startPos.x;
		star.y = startPos.y - starBig.height;

		console.log('middlePos = ' + JSON.stringify(middlePos));
		const time = 1;
		cc.tween(star)
			.to(0.3, { y: middlePos.y + 80 }, { easing: 'quadOut' })
			.to(0.1, { y: middlePos.y + 40, scaleX: 1.2 / bigStarBg.scale, scaleY: 0.8 / bigStarBg.scale }, { easing: 'quadOut' })
			.to(0.1, { y: middlePos.y, scaleX: 1 / bigStarBg.scale, scaleY: 1 / bigStarBg.scale }, { easing: 'quadOut' })
			.delay(0.1)
			.to(0.8, { angle: -720, scale: 1 })
			.start();

		cc.tween(star)
			.delay(0.6)
			.to(0.8, { x: 0 }, { easing: 'quadIn' })
			.start();
		cc.tween(star)
			.delay(0.6)
			.to(0.8, { y: 0 }, { easing: 'quadOut' })
			.start();

		cc.tween(starBig)
			.delay(0.6)
			.to(0.8, { scale: 0 }, { easing: 'quadOut' })
			.call(() => {
				this.checkGameEnd();
				playAudio(this.starCountClip);
			})
			.start();

		playAudio(this.bigStarClip);
	},

	// checkGameEnd() {
	
	// 	this.curGroupIndex ++;
	// 	this.setCurGroupAndQuestion();



	// 	if (!this.curQuestionData) {
	// 		// this.gameEnd();
	// 		return;
	// 	}

	// 	this.showChangeQuesAnim();
	// },

	


	checkBtn: null,
	initBtn() {
		const checkBtn = getSprNode("btn_check");
		checkBtn.scale = this._mapScaleMin;
		this.canvas.addChild(checkBtn);
		checkBtn.x = -500 * this._mapScaleMin;
		checkBtn.y = -35 * this._mapScaleMin;
		checkBtn.baseX = checkBtn.x;
		checkBtn.baseY = checkBtn.y;
		checkBtn.opacity = 0;
		this.checkBtn = checkBtn;

		checkBtn.on(cc.Node.EventType.TOUCH_START, () => {
			if (checkBtn.opacity == 0) {
				return;
			}
			showBtnAnima(checkBtn);
			this.checkBtnClick();
		})

	},

	refreshCheckBtn() {

		this.checkBtn.opacity = 0;

		const arr = this.curOptionArr;
		for (let i=0; i<arr.length; i++) {
			if (arr[i].light.opacity > 254) {
				this.checkBtn.opacity = 255;
				return;
			}
		}
	},

	tryagain: null,
	initIcon() {
		const icon = getSprNode("try_again");
		icon.opacity = 0;
		icon.scale = this._mapScaleMin;
		this.canvas.addChild(icon);

		this.tryagain = icon;
	},

	showTryAgain() {
		const time = 0.3;
		cc.tween(this.tryagain)
			.to(time, {opacity: 255}, {easing: "cubicOut"})
			.delay(0.3)
			.to(time, {opacity: 0}, {easing: "cubicIn"})
			.start();
	},


	initQuestion() {
		this.initPicQuestion();
		this.initTextQuestion();
		this.initVideoQuestion();
		this.initAudioQuestion();
	},

	quesPicBg: null,
	initPicQuestion() {
		const picBg = getSprNode("ques_pic_bg");
		this.canvas.addChild(picBg);
		picBg.scale = this._mapScaleMin;
		picBg.y = 130 * this._mapScaleMin
		this.quesPicBg = picBg;
		picBg.active = false;

		this.addQuesAudio(picBg)
	},

	quesTextBg: null,
	initTextQuestion() {
		const picBg = getSprNode("ques_pic_bg");
		this.canvas.addChild(picBg);
		picBg.scale = this._mapScaleMin;
		picBg.y = 130 * this._mapScaleMin
		this.quesTextBg = picBg;


		const labelNode = new cc.Node();
		labelNode.parent = picBg;
		const label = labelNode.addComponent(cc.RichText);
		const size = 80
		label.font = cc.find('Canvas/res/font/Berlin-Sans-FB').getComponent(cc.Label).font;
		// label.string = `<outline color=#a83c13 width=2><size=${size}><color=#ffffff>${this.data.title || " " }</color></size></outline>`
		// label.string = `<size=${size}><color=#751e00>${this.curGroup.title }</color></size>`
		label.lineHeight = size;
		label.horizontalAlign = cc.macro.TextAlignment.CENTER

		label.maxWidth = 648;
	
		picBg.label = label;

		picBg.active = false;
		this.addQuesAudio(picBg)
	},

	quesVideoBg: null,
	videoNode: null,
	initVideoQuestion() {
		const picBg = getSprNode("ques_pic_bg");
		this.canvas.addChild(picBg);
		picBg.scale = this._mapScaleMin;
		picBg.y = 130 * this._mapScaleMin
		this.quesVideoBg = picBg;

		const videoNode = new cc.Node();
		const vPlayer = videoNode.addComponent(cc.VideoPlayer);
		picBg.addChild(videoNode);

		videoNode.width = 678;
		videoNode.height = 396;
		this.videoNode = videoNode;

		picBg.video = vPlayer;


		const btnNode = new cc.Node();
		picBg.addChild(btnNode);
		btnNode.x = picBg.width / 2 + 50;

		const playBtn = getSprNode("video_play");
		btnNode.addChild(playBtn);

		const pauseBtn = getSprNode("video_pause");
		btnNode.addChild(pauseBtn);
		pauseBtn.active = false;


		videoNode.player = vPlayer;
		videoNode.playBtn = playBtn;
		videoNode.pauseBtn = pauseBtn;

		playBtn.on(cc.Node.EventType.TOUCH_START, () => {
			vPlayer.play();
			playBtn.active = false;
			pauseBtn.active = true;
		})

		pauseBtn.on(cc.Node.EventType.TOUCH_START, () => {
			vPlayer.pause();
			pauseBtn.active = false;
			playBtn.active = true;
		})

		videoNode.on('completed', () => {
			pauseBtn.active = false;
			playBtn.active = true;
		})


		picBg.active = false;
	},

	quesAudioBg: null,
	initAudioQuestion() {

		
		
		const audioNode = new cc.Node();
		audioNode.active = false;

		this.canvas.addChild(audioNode);
		audioNode.x = 440 * this._mapScaleMin;
		audioNode.y = -60 * this._mapScaleMin;
		this.quesAudioBg = audioNode;
		
		const audioAnimNode = cc.instantiate(cc.find("Canvas/res/anim/audio_big"));
		audioNode.addChild(audioAnimNode);

		const iconTop = getSprNode('audio_big')
		audioNode.addChild(iconTop);
		iconTop.opacity = 255;

		iconTop.addComponent(cc.BlockInputEvents);
		iconTop.on(cc.Node.EventType.TOUCH_START, () => {

			if (iconTop.opacity == 0) {
				return;
			}

			if (!audioNode.audioClip) {
				return;
			}
			const anim = audioAnimNode.getComponent(cc.Animation);
			anim.play('audio_big');
			iconTop.opacity = 0;
			audioAnimNode.opacity = 255;

			if (audioNode.audioClip) {
				playAudio(audioNode.audioClip, () => {
					iconTop.opacity = 255;
					audioAnimNode.opacity = 0;
					anim.stop();
				});
			}
		})

	},


	addQuesAudio(bg) {
		const audioNode = new cc.Node();
		bg.addChild(audioNode);
		audioNode.x = bg.width / 2 + 50;


		const audioAnimNode = cc.instantiate(cc.find("Canvas/res/anim/ques_audio"));
		audioNode.addChild(audioAnimNode);

		const iconTop = getSprNode('ques_audio')
		audioNode.addChild(iconTop);
		iconTop.opacity = 255;

		iconTop.addComponent(cc.BlockInputEvents);
		iconTop.on(cc.Node.EventType.TOUCH_START, () => {

			if (iconTop.opacity == 0) {
				return;
			}
			const anim = audioAnimNode.getComponent(cc.Animation);
			anim.play('ques_audio');
			iconTop.opacity = 0;
			audioAnimNode.opacity = 255;

			if (audioNode.audioClip) {
				playAudio(audioNode.audioClip, () => {
					iconTop.opacity = 255;
					audioAnimNode.opacity = 0;
					anim.stop();
				});
			}
		})

		bg.audioNode = audioNode;
	},

	initOption() {
		this.initPicOption();
		this.initAudioOption();
		this.initTextOption();

		this.initPicOptionBig();
		this.initAudioOptionBig();
		this.initTextOptionBig();
	},

	optionPicBgArr: null,
	initPicOption() {
		// console.log('this.data: ', this.data);
		this.optionPicBgArr = [];
		for (let i=0; i<4; i++) {
		
			const pic = this.getOnePicOption();
			this.canvas.addChild(pic);
			pic.scale = this._mapScaleMin;
			pic.y = -235 * this._mapScaleMin;
			this.optionPicBgArr.push(pic);

		} 
	},

	optionPicBgBigArr: null,
	initPicOptionBig() {
		this.optionPicBgBigArr = [];

		const baseX = -380 * this._mapScaleMin;
		const disW = 440 * this._mapScaleMin;
		let baseY = 170 * this._mapScaleMin;
		const disH = 350 * this._mapScaleMin;
		let count = 0;


		for (let i=0; i<4; i++) {
		
			if (i==2) {
				count = 0;
				baseY -= disH;
			}
			const pic = this.getOnePicOption(true);
			this.canvas.addChild(pic);
			pic.scale = this._mapScaleMin;
			pic.x = baseX + count * disW;
			pic.y = baseY;
			this.optionPicBgBigArr.push(pic);

			count ++;
		} 
	},

	getOnePicOption(isBig = false) {
		const picBgParent = new cc.Node();

		let lightResName = "option_pic_bg_l";
		let bgResName = "option_pic_bg";
		if (isBig) {
			lightResName = "op_pic_bg_big_l";
			bgResName = "op_pic_bg_big";
		}

		const light = getSprNode(lightResName);
		picBgParent.addChild(light);
		light.opacity = 0;
		picBgParent.light = light;

		const picBg = getSprNode(bgResName);
		picBgParent.addChild(picBg);
		picBgParent.picBg = picBg;

		picBgParent.width = picBg.width;
		picBgParent.height = picBg.height;


		const soundNode = new cc.Node();
		picBgParent.addChild(soundNode);
		picBgParent.soundIcon = soundNode;

		const soundIconAnim = cc.instantiate(cc.find("Canvas/res/anim/laba"))
		soundNode.addChild(soundIconAnim);
		soundIconAnim.opacity = 0;

		const soundIconTop = getSprNode('btn_laba')
		soundNode.addChild(soundIconTop);
		soundIconTop.opacity = 255;

		soundNode.x = picBgParent.width / 2 - soundIconTop.width / 2;
		soundNode.y = picBgParent.height / 2 //- soundIconTop.height / 2;
		soundNode.active = false;


		picBgParent.active = false;


		picBgParent.on(cc.Node.EventType.TOUCH_START, () => {
			if( light.opacity == 0 ) {
				light.opacity = 255;
				playAudio(this.selectClip);
			} else {
				light.opacity = 0;
			}

			this.refreshCheckBtn();
		})


		soundIconTop.addComponent(cc.BlockInputEvents);
		soundIconTop.on(cc.Node.EventType.TOUCH_START, () => {
			const anim = soundIconAnim.getComponent(cc.Animation);
			anim.play('laba');
			soundIconTop.opacity = 0;
			soundIconAnim.opacity = 255;

			if (soundNode.audioClip) {
				playAudio(soundNode.audioClip, () => {
					soundIconTop.opacity = 255;
					soundIconAnim.opacity = 0;
					anim.stop();
				});
			}
		})

		return picBgParent;
	},

	addIconRight(bg) {

		const px = bg.width / 2;
		const py = -bg.height / 2 ;
		const worldPos = bg.convertToWorldSpaceAR(cc.v2(px, py));
		const localPos = this.canvas.convertToNodeSpaceAR(worldPos);


		const iconRight = getSprNode('icon_right');
		iconRight.scale = this._mapScaleMin;
		this.canvas.addChild(iconRight, 1);
		iconRight.x = localPos.x;
		iconRight.y = localPos.y + 50 * this._mapScaleMin;

		bg.iconRight = iconRight;


		this.showOneFirework(cc.v2(0, -bg.height / 3), bg, cc.find('paperBase').children, 200, 300, 20, 1);
	},


	optionAudioBgArr: null,
	initAudioOption() {
		this.optionAudioBgArr = [];
		for (let i=0; i<4; i++) {
		
			const audio = this.getOneAudioOption();
			this.canvas.addChild(audio);
			audio.scale = this._mapScaleMin;
			audio.y = -235 * this._mapScaleMin;
			this.optionAudioBgArr.push(audio);
		} 
	},

	optionAudioBgBigArr: null,
	initAudioOptionBig() {

		this.optionAudioBgBigArr = [];

		const baseX = -380 * this._mapScaleMin;
		const disW = 440 * this._mapScaleMin;
		let baseY = 170 * this._mapScaleMin;
		const disH = 350 * this._mapScaleMin;
		let count = 0;

		for (let i=0; i<4; i++) {
		
			if (i==2) {
				count = 0;
				baseY -= disH;
			}

			const audio = this.getOneAudioOption(true);
			this.canvas.addChild(audio);
			audio.scale = this._mapScaleMin;
			audio.x = baseX + count * disW;
			audio.y = baseY;
			this.optionAudioBgBigArr.push(audio);

			count ++;
		} 
	},


	optionTextBgArr: null,
	initTextOption() {
		this.optionTextBgArr = [];
		for (let i=0; i<4; i++) {
		
			const textOption = this.getOneTextOption();
			this.canvas.addChild(textOption);
			textOption.scale = this._mapScaleMin;
			// textOption.y = -235 * this._mapScaleMin;
			this.optionTextBgArr.push(textOption);
		} 
	},

	optionTextBgBigArr: null,
	initTextOptionBig() {

		const baseX = -180 * this._mapScaleMin;
		const disW = 100 * this._mapScaleMin;
		let baseY = 220 * this._mapScaleMin;
		const disH = 150 * this._mapScaleMin;

		this.optionTextBgBigArr = [];
		for (let i=0; i<4; i++) {
		
			const textOption = this.getOneTextOption(true);
			this.canvas.addChild(textOption);
			textOption.scale = this._mapScaleMin;
			textOption.x = baseX;
			textOption.y = baseY - i * disH;
			this.optionTextBgBigArr.push(textOption);
		}
	},

	getOneAudioOption(isBig=false) {

		let lightResName = "option_pic_bg_l";
		let bgResName = "option_pic_bg";
		if (isBig) {
			lightResName = "op_pic_bg_big_l";
			bgResName = "op_pic_bg_big";
		}

		const audioBgNode = new cc.Node();

		const light = getSprNode(lightResName);
		audioBgNode.addChild(light);
		light.opacity = 0;
		audioBgNode.light = light;

		const picBg = getSprNode(bgResName);
		audioBgNode.addChild(picBg);
		audioBgNode.picBg = picBg;

		audioBgNode.width = picBg.width;
		audioBgNode.height = picBg.height;

		const animNode = cc.instantiate(cc.find("Canvas/res/anim/op_audio"))
		audioBgNode.addChild(animNode);
		animNode.anchorX = 0.6;


		const animTop = getSprNode('op_audio');
		audioBgNode.addChild(animTop);
		animTop.anchorX = 0.6;

		const anim = animNode.getComponent(cc.Animation);
		animNode.opacity = 0;

		audioBgNode.anim = anim;
		audioBgNode.animNode = animNode;
		audioBgNode.animTop = animTop;
		
		audioBgNode.showAnim = () => {
			this.playItemAnim(audioBgNode);
			cc.audioEngine.stop(audioBgNode.audioId);
		}
		audioBgNode.stopAnim = () => {
			cc.audioEngine.stop(audioBgNode.audioId);
			this.stopItemAnim(audioBgNode);
		}

		audioBgNode.on(cc.Node.EventType.TOUCH_START, () => {
			if( light.opacity == 0 ) {
				light.opacity = 255;
				playAudio(this.selectClip);
				
				audioBgNode.showAnim();
				if (audioBgNode.audioClip) {
					audioBgNode.audioId = playAudio(audioBgNode.audioClip, () => {
						this.stopItemAnim(audioBgNode);
					});
				}

			} else {
				light.opacity = 0;
				audioBgNode.stopAnim();
			}

			this.refreshCheckBtn();

		});

		audioBgNode.active = false;

		return audioBgNode;
	},

	getOneTextOption(isBig=false) {

		let lightResName = "option_text_bg_l";
		let bgResName = "option_text_bg";
		if (isBig) {
			lightResName = "op_text_bg_big_l";
			bgResName = "op_text_bg_big";
		}

		const textBgParent = new cc.Node();
		textBgParent.active = false;

		const light = getSprNode(lightResName);
		textBgParent.addChild(light);
		light.opacity = 0;
		textBgParent.light = light;

		const textBg = getSprNode(bgResName);
		textBgParent.addChild(textBg);
		textBgParent.textBg = textBg;

		textBgParent.width = textBg.width;
		textBgParent.height = textBg.height;

		const labelNode = new cc.Node();
		labelNode.parent = textBgParent;
		const label = labelNode.addComponent(cc.Label);

		label.fontSize = 56;
		label.lineHeight = 56;
		if (isBig) {
			label.fontSize = 64;
			label.lineHeight = 64;
		}

		label.font = cc.find('Canvas/res/font/Berlin-Sans-FB').getComponent(cc.Label).font;
		textBgParent.label = label;

		const color = new cc.Color();
		cc.Color.fromHEX(color, '#023659' );
		labelNode.color = color;


		const soundNode = new cc.Node();
		textBgParent.addChild(soundNode);
		textBgParent.soundIcon = soundNode;

		const soundIconAnim = cc.instantiate(cc.find("Canvas/res/anim/laba"))
		soundNode.addChild(soundIconAnim);
		soundIconAnim.opacity = 0;

		const soundIconTop = getSprNode('btn_laba')
		soundNode.addChild(soundIconTop);
		soundIconTop.opacity = 255;

		soundNode.x = textBgParent.width / 2 - 15; // - soundIconTop.width / 2;
		soundNode.y = textBgParent.height / 2 - 15; //- soundIconTop.height / 2;
		soundNode.active = false;


		textBgParent.on(cc.Node.EventType.TOUCH_START, () => {
			if( light.opacity == 0 ) {
				light.opacity = 255;
				playAudio(this.selectClip);
			} else {
				light.opacity = 0;
			}
			this.refreshCheckBtn();
		})


		soundIconTop.addComponent(cc.BlockInputEvents);
		soundIconTop.on(cc.Node.EventType.TOUCH_START, () => {
			const anim = soundIconAnim.getComponent(cc.Animation);
			anim.play('laba');
			soundIconTop.opacity = 0;
			soundIconAnim.opacity = 255;

			if (soundNode.audioClip) {
				playAudio(soundNode.audioClip, () => {
					soundIconTop.opacity = 255;
					soundIconAnim.opacity = 0;
					anim.stop();
				});
			}
		})

		return textBgParent;
	},

	playItemAnim(item) {
		item.anim.play();
		item.animNode.opacity = 255;
		item.animTop.opacity = 0;
	},

	stopItemAnim(item) {
		item.animNode.opacity = 0;
		item.animTop.opacity = 255;
	},

	setCurQuestion() {
		
		switch(this.curQuestionData.questionType) {
			case "pic":
				this.setQuestionPic();
				break;
			case "text":
				this.setQuestionText();
				break;
			case "video":
				this.setQuestionVideo();
				break;
			case "audio":
				this.setQuestionAudio();
				break;
		}

		this.refreshCheckBtnPos();
	},

	refreshCheckBtnPos() {
		if (this.curQuestionData.questionType == 'audio') {
			this.checkBtn.x = 440 * this._mapScaleMin;
			this.checkBtn.y = -240 * this._mapScaleMin;
		} else {
			this.checkBtn.x = this.checkBtn.baseX;
			this.checkBtn.y = this.checkBtn.baseY;
		}
	},

	curQuesBg: null,
	setQuestionPic() {

		this.curQuesBg = this.quesPicBg;
		this.curQuesBg.active = true;


		if (this.quesPicBg.pic) {
			this.quesPicBg.pic.removeFromParent();
			this.quesPicBg.pic = null;
		}
		if (this.curQuestionData.pic_url) {
			getSprNodeByUrl(this.curQuestionData.pic_url, (spr) => {
				const sprNode = spr.node;
				setSprNodeMaxLen(sprNode, 678, 396);
				this.quesPicBg.addChild(sprNode)
				this.quesPicBg.pic = sprNode;
			})
		}
	
		const audioNode = this.quesPicBg.audioNode;
		audioNode.active = false;
		audioNode.audioClip = null;
		if (this.curQuestionData.audio_url) {
			cc.assetManager.loadRemote(this.curQuestionData.audio_url, (err, audioClip) => {
				audioNode.audioClip = audioClip;
			});	
			audioNode.active = true;
		}
	},

	setQuestionText() {
		this.curQuesBg = this.quesTextBg;
		this.curQuesBg.active = true;

		
		const label = this.curQuesBg.label;
		const size = 80; 
		label.string = `<size=${size}><color=#fff4b6>${this.curQuestionData.text}</color></size>`

		const maxH = this.curQuesBg.height * 0.98;

		if (label.node.height > maxH) {
			label.node.scale = maxH / label.node.height
		} else {
			label.node.scale = 1;
		}


		const audioNode = this.curQuesBg.audioNode;
		audioNode.active = false;
		audioNode.audioClip = null;
		if (this.curQuestionData.audio_url) {
			cc.assetManager.loadRemote(this.curQuestionData.audio_url, (err, audioClip) => {
				audioNode.audioClip = audioClip;
			});	
			audioNode.active = true;
		}
	},

	setQuestionVideo() {
		this.curQuesBg = this.quesVideoBg;
		this.curQuesBg.active = true;
		this.videoNode.active = true;

		if (this.curQuestionData.video_url) {
			this.curQuesBg.video.remoteURL = this.curQuestionData.video_url;
		}
	},

	setQuestionAudio() {
		this.curQuesBg = this.quesAudioBg;
		this.curQuesBg.active = true;


		this.curQuesBg.audioClip = null;
		if (this.curQuestionData.audio_url) {
			cc.assetManager.loadRemote(this.curQuestionData.audio_url, (err, audioClip) => {
				this.curQuesBg.audioClip = audioClip;
			});
		}
	},



	setCurOption() {
		const arr = this.curQuestionData.answerArr;

		const isBig = this.curQuestionData.questionType == 'audio';

		switch(this.curQuestionData.answerType) {
			case "pic":
				this.setOptionPic(arr, isBig);
				break;
			case "audio":
				this.setOptionAudio(arr, isBig);
				break;
			case "text":
				this.setOptionText(arr, isBig);
				break;
		}
		
	},



	curOptionArr: null,
	setOptionPic(arr, isBig=false) {

		let opItemArr = this.optionPicBgArr;
		if (isBig) {
			opItemArr = this.optionPicBgBigArr;
		}
		this.curOptionArr = [];
		const disW = 158 * this._mapScaleMin;
		const baseX = -(arr.length - 1) * disW;
		for (let i=0; i<arr.length; i++) {
			
			opItemArr[i].active = true;
			if (!isBig) {
				opItemArr[i].x = baseX + i * disW * 2;
			}

			const picBg = opItemArr[i].picBg;
			picBg.removeAllChildren();
			
			const data = arr[i];
			if (data.pic_url) {
				getSprNodeByUrl, getSprNodeByUrl(data.pic_url, (spr) => {
					let maxW = 280;
					let maxH = 190;
					if (isBig) {
						maxW = 366;
						maxH = 248;
					}

					setSprNodeMaxLen(spr.node, maxW, maxH);
					console.log('spr: ', spr);
					picBg.addChild(spr.node);
				})
			}

			const soundIcon = opItemArr[i].soundIcon;
			soundIcon.active = false;
			soundIcon.audioClip = null;
			opItemArr[i].audioClip = null;
			if (data.audio_url) {
				cc.assetManager.loadRemote(data.audio_url, (err, audioClip) => {
					soundIcon.audioClip = audioClip;
					opItemArr[i].audioClip = audioClip;
				});
				
				soundIcon.active = true;
			}

			opItemArr[i].data = data;
			this.curOptionArr.push(opItemArr[i]);
		}
	},


	setOptionAudio(arr, isBig=false) {

		let opItemArr = this.optionAudioBgArr;
		if (isBig) {
			opItemArr = this.optionAudioBgBigArr;
		}

		this.curOptionArr = [];
		const disW = 158 * this._mapScaleMin;
		const baseX = -(arr.length - 1) * disW;
		for (let i=0; i<arr.length; i++) {
			
			opItemArr[i].active = true;
			if(!isBig) {
				opItemArr[i].x = baseX + i * disW * 2;
			}

			const data = arr[i];

			opItemArr[i].audioClip = null;
			if (data.audio_url) {
				cc.assetManager.loadRemote(data.audio_url, (err, audioClip) => {
					opItemArr[i].audioClip = audioClip;
				});
			}

			opItemArr[i].data = data;
			this.curOptionArr.push(opItemArr[i]);
		}
	},

	setOptionAudioBig(arr) {
		this.curOptionArr = [];
		for (let i=0; i<arr.length; i++) {
			
			this.optionAudioBgArr[i].active = true;

			const data = arr[i];

			this.optionAudioBgArr[i].audioClip = null;
			if (data.audio_url) {
				cc.assetManager.loadRemote(data.audio_url, (err, audioClip) => {
					this.optionAudioBgArr[i].audioClip = audioClip;
				});
			}

			this.optionAudioBgArr[i].data = data;
			this.curOptionArr.push(this.optionAudioBgArr[i]);
		}
	},


	setOptionText(options, isBig=false) {

		console.log(' in setOptionText, isBig: ', isBig);

		let opItemArr = this.optionTextBgArr;
		if (isBig) {
			opItemArr = this.optionTextBgBigArr
		}

		this.curOptionArr = [];
		const disW = 315 * this._mapScaleMin;
		const disH = 120 * this._mapScaleMin;
		const baseX = - disW ;
		let baseY = -235 * this._mapScaleMin;
		if (options.length > 2) {
			baseY = -170 * this._mapScaleMin;
		}
		let count = 0;
		for (let i=0; i<options.length; i++) {

			if ( i == 2 ) {
				baseY -= disH;
				count = 0;
			}
			
			opItemArr[i].active = true;
			if (!isBig) {
				opItemArr[i].x = baseX + count * disW * 2;
				opItemArr[i].y = baseY;
			}
		
			const data = options[i];

			opItemArr[i].label.string = data.text;
			opItemArr[i].label["_forceUpdateRenderData"](true);
			if (opItemArr[i].label.node.width > opItemArr[i].width * 0.9) {
				opItemArr[i].label.node.scale = opItemArr[i].width * 0.9 / opItemArr[i].label.node.width;
			} else {
				opItemArr[i].label.node.scale = 1;
			}
			

			const soundIcon = opItemArr[i].soundIcon;
			soundIcon.active = false;
			soundIcon.audioClip = null;
			opItemArr[i].audioClip = null;
			if (data.audio_url) {
				cc.assetManager.loadRemote(data.audio_url, (err, audioClip) => {
					soundIcon.audioClip = audioClip;
					opItemArr[i].audioClip = audioClip;
				});
				
				soundIcon.active = true;
			}

			opItemArr[i].data = data;
			this.curOptionArr.push(opItemArr[i]);

			count++;
		}
	},



	shakeArr: null,
	wrongArr: null,
	checkBtnClick() {

		this.shakeArr = [];
		this.wrongArr = [];
		this.checkItemWrong();

		if (this.wrongArr.length > 0) {
			//有选错的
			this.itemShake();
			this.hideLight();
			playAudio(this.wrongClip);
			return;
		}

		const isRightAll = this.checkItemRightCount();
		if (!isRightAll) {
			// 有漏选的
			this.itemShake();
			this.hideLight();
			playAudio(this.wrongClip);
			return;
		}

		this.showAllRight();
		this.showMask();

		playAudio(this.rightClip, () => {
			this.playAnswerAudio(0);
		})
		
	},

	playAnswerAudio(index) {
		const arr = this.curOptionArr;
		if (!arr[index]) {

			// delayCall(0.5, () => {
				this.changeNextQuestion();
			// })

		} else {
			if ( arr[index].light.opacity > 254 && arr[index].audioClip ) {
				playAudio(arr[index].audioClip, () => {
					this.playAnswerAudio(index + 1);
				})
			} else {
				this.playAnswerAudio(index + 1);
			}
		}
	},


	checkItemWrong() {
		const arr = this.curOptionArr;
		console.log('arr: ', arr);
		for (let i=0; i<arr.length; i++) {
			const itemBg = arr[i];
			if (itemBg.light.opacity >= 254) {
				this.shakeArr.push(itemBg);
				console.log('aaa', itemBg.data);;
				if (itemBg.data.answerRight == '0') {
					this.wrongArr.push(itemBg);
				}
			}
		}
	},

	checkItemRightCount() {
		let rightTotalCount = 0;
		const answerArr = this.curQuestionData.answerArr;
		for (let i=0; i<answerArr.length; i++) {
			if (answerArr[i].answerRight == '1') {
				rightTotalCount ++;
			}
		}

		let curRightCount = 0;
		const curOptionArr = this.curOptionArr;
		for (let i=0; i<curOptionArr.length; i++) {
			if (curOptionArr[i].light.opacity > 254) {
				curRightCount ++;
			}
		}

		return rightTotalCount == curRightCount;
	},

	itemShake() {
		let rate = 1;
		if (this.curQuestionData.answerType == 'text') {
			rate = 0.5;
		}

		const arr = this.shakeArr;
		for (let i=0; i<arr.length; i++) {
			this.rotateShake(arr[i], rate);
			if (arr[i].stopAnim) {
				arr[i].stopAnim();
			}
		}

		this.showTryAgain();
	},

	hideLight() {
		const arr = this.curOptionArr;
		for (let i=0; i<arr.length; i++) {
			arr[i].light.opacity = 0;
		}
		this.checkBtn.opacity = 0;
	},

	rotateShake(item, rate = 1) {

		const time = 0.9;
		cc.tween(item)
			.to(time / 6 / 2, {angle: -20 * rate}, {easing: 'sineInOut'})
			.to(time / 6, {angle: 12 * rate}, {easing: 'sineInOut'})
			.to(time / 6, {angle: -7 * rate}, {easing: 'sineInOut'})
			.to(time / 6, {angle: 4 * rate}, {easing: 'sineInOut'})
			.to(time / 6, {angle: -2 * rate}, {easing: 'sineInOut'})
			.to(time / 6, {angle: 1 * rate}, {easing: 'sineInOut'})
			.to(time / 6, {angle: 0 * rate}, {easing: 'sineInOut'})
			.start();

	},

	showAllRight() {
		const curOptionArr = this.curOptionArr;
		for (let i=0; i<curOptionArr.length; i++) {
			if (curOptionArr[i].light.opacity > 254) {
				this.addIconRight(curOptionArr[i]);
			}
		}
	},

	changeNextQuestion() {
		console.log(' in changeNextQuestion')

		this.curQuestionIndex ++ ;
		this.setCurQuestionData();

		if (!this.curQuestionData) {
			// this.gameEnd();
			return;
		}

		this.showChangeQuesAnim();
	
	},

	showChangeQuesAnim() {
		this.hideLight();

		this.hideCurOptionAnim(() => {
			this.setCurOption();
			this.showCurOptionAnim();
			this.hideMask();
		});

		this.hideCurQuestion(() => {
			this.setCurQuestion();
			this.showCurQuestionAnim();
		});
	},


	maskLayer: null,
	initMask() {
		const maskLayer = new cc.Node();
		maskLayer.width = this.canvas.width;
		maskLayer.height = this.canvas.height;
		this.canvas.addChild(maskLayer, 20);

		maskLayer.addComponent(cc.BlockInputEvents);
		this.maskLayer = maskLayer;
		this.maskLayer.active = false;
	},

	showMask() {
		this.maskLayer.active = true;
	},

	hideMask() {
		this.maskLayer.active = false;
	},

	hideCurOptionAnim(cb) {
		const arr = this.curOptionArr;
		const time = 0.5;
		for (let i=0; i<arr.length; i++) {
			if (arr[i].iconRight) {
				arr[i].iconRight.removeFromParent();
				arr[i].iconRight = null;
			}
			cc.tween(arr[i])
				.to(time, {opacity: 0}, {easing: "cubicOut"})
				.call(() => {
					arr[i].active = false;
				})
				.start();
		}
		delayCall(time, () => {
			cb();
		})
	},

	showCurOptionAnim(cb=null) {
		const arr = this.curOptionArr;
		const time = 0.5;
		for (let i=0; i<arr.length; i++) {
			arr[i].opacity = 0;
			cc.tween(arr[i])
				.to(time, {opacity: 255}, {easing: "cubicIn"})
				.start();
		}

		if (cb) {
			delayCall(time, () => {
				cb();
			})
		}
	
	},

	hideCurQuestion(cb) {
		const time = 0.5;
		cc.tween(this.curQuesBg)
			.to(time, {opacity: 0}, {easing: "cubicOut"})
			.call(() => {
				this.curQuesBg.active = false;
				cb();
			})
			.start();
	},

	showCurQuestionAnim() {

		this.curQuesBg.active = true;
		this.curQuesBg.opacity = 0;

		const time = 0.5;
		cc.tween(this.curQuesBg)
			.to(time, {opacity: 255}, {easing: "cubicIn"})
			.start();
	},



	gameEnd() {
		console.log('game end !')

		this.isGameEnd = true;


		// this.showRestart();
		// this.showGoodjob();
		// this.showOneFirework(cc.v2(0, -this.canvas.height / 2), this.canvas, cc.find('paperBase').children, this.canvas.width / 2.5, this.canvas.height * 2, 100, 1);
		// playAudio(this.finishClip);


		this.playCatAudio(this.data.finish_right_audio_url)
		this.curCatAudioUrl = null;


		const camera = cc.find('Canvas/Main Camera');
		camera.zIndex = 100;

		// showTrebleFirework(camera, cc.find('RibbonNodeBase').children);

		onHomeworkFinish();

		this.endTesting();
	},

	showGoodjob() {

		const icon = getSprNode("goodjob");
		icon.scale = this._mapScaleMin;
		icon.baseS = icon.scale;
		this.canvas.addChild(icon, 20);


		const time = 1;
		icon.scale = 0;
		cc.tween(icon)
			.to(0.8,  {scale: icon.baseS}, {easing: "elasticOut"})
			.delay(1)
			.to(0.5, {scale: 0} , {easing: "cubicIn"})

			.start();



	},

	showRestart() {

		const btn = getSprNode("btn_restart");
		btn.scale = this._mapScaleMin;
		btn.baseS = btn.scale;
		this.canvas.addChild(btn, 21);

		btn.on(cc.Node.EventType.TOUCH_START, () => {
			// btn.removeFromParent();
			// this.initData();
			// this.initStar();
			// this.showChangeQuesAnim();
			// playAudio(this.btnClip);

			const middleLayer = cc.find('middleLayer');
			if (middleLayer) {
				middleLayer.getComponent('middleLayer').reloadBundle();
			}
		})

		const time = 0.9;
		btn.scale = 0;
		cc.tween(btn)
			.delay(2.5)
			.to(time,  {scale: btn.baseS}, {easing: "elasticOut"})
			.start();

	},



	async showOneFirework(pos, parentNode, nodeList, w, h, n, timeRate=1) {

		for (let i = 0; i < 3; i++) {
				this.showFirework(pos, parentNode, nodeList, w, h, n, timeRate);
				await asyncDelay(0.1);
		}
	},

	showFirework(pos, parentNode, nodeList, width = 200, height = 500, number = 30, timeRate=1) {
			const subTime = 1;
			for (let i = 0; i < number; i++) {
					const quad = this.createQuads(pos, parentNode, nodeList);
					const targetX = RandomInt(width / 2, -width / 2);
					const targetY = RandomInt(height);

					cc.tween(quad)
							.by(0.5 * timeRate, { x: targetX })
							.by((2 + subTime *  Math.random()) * timeRate, { x: targetX * 2 })
							.start();

					cc.tween(quad)
							.by(0.5 * timeRate, { y: targetY }, { easing: 'quadOut' })
							.to((3 + subTime * Math.random()) * timeRate, { y: -parentNode.height * 2 }, { easing: 'quadIn' })
							.removeSelf()
							.start();

					cc.tween(quad)
							.delay(1  * timeRate)
							.to((0.5 + subTime * Math.random()) * timeRate , { opacity: 0 })
							.start();
			}
	},

	createQuads(pos, parentNode, nodeList) {
			const quadBase = cc.instantiate(nodeList[RandomInt(nodeList.length)]);

			quadBase.x = pos.x;
			quadBase.y = pos.y;
			quadBase.z = pos.z;
			quadBase.angle = RandomInt(180);
			quadBase.parent = parentNode;

			const quad = quadBase.getChildByName('quad');
			quad.x = 0;
			quad.y = 0;
			quad.angle = RandomInt(180);

			const paper = quad.getChildByName('paper');
			paper.scaleX = Math.random() * 0.8 + 0.2;
			paper.scaleY = Math.random() * 0.8 + 0.2;

			quadBase.scaleX = Math.random();
			cc.tween(quadBase)
					.to((1 - quadBase.scaleX) * 0.3, { scaleX: 1 })
					.call(() => {
							const time = Math.random() * 0.2;
							cc.tween(quadBase)
									.to(0.1 + time, { scaleX: -1 })
									.to(0.1 + time, { scaleX: 1 })
									.union()
									.repeatForever()
									.start();
					})
					.start();


			return quadBase;
	},





	showUserRight(answerData) {

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

		if (!answerData || Object.keys(answerData).length == 0) {

			console.log( '!answerData  ,,,, ')


			return;
		}

		let writeNodeArr = this.writeNodeArr;

		console.log( ' in writeNodeArr: ', writeNodeArr)

		for (let i=0; i<writeNodeArr.length; i++) {
			const key = i.toString();
			if (answerData[key]) {
				this.showLetter(i);

			} else {
				// let writeRect = writeNodeArr[i];
				// writeRect.hitCount = 0;
			}
		}

	},

	showLetter(index) {

		console.log(' in showLetter')
	

		const writeRect = this.writeNodeArr[index];

		if (writeRect.isShowEnd) {
			return;
		}
		writeRect.isShowEnd = true;

		console.log('show Letter small 2 :' , index)


		this.showRectAnima(writeRect);
		this.isCurWrited = true;

		playAudio(this.rightClip, () => {
		})
	},

	showRectAnima(writeRect) {

		console.log(' in showRectAnima')

		const animaNode = writeRect.animaNode;
		if (animaNode) {
			animaNode.active = true;
			const dragonDisplay = animaNode.getComponent(dragonBones.ArmatureDisplay);
			dragonDisplay.playAnimation(animaNode.animationNames[0], 1);

			console.log('`````animationNames: ', animaNode.animationNames);
		}

		writeRect.isShowAnima = true;
	},


	getLetterAnim(isSmall) {

		let resName;
		if (isSmall) {
			resName = this.data.letter.toLowerCase();
		} else {
			resName = this.data.letter.toUpperCase();
		}
		const anim = cc.find("Canvas/res/anim/" + resName)
		const letter = cc.instantiate(anim);
		letter.scale *= 0.588;
		letter.name = resName;

		if (!isSmall) {
			letter.anchorY = 0.28
		}

		return letter;
	},













	restart() {
		
	},


	initTitle() {

		const offX = 96;
		const offY = 11;
		const title = getSprNode('title_bg');
		title.parent = this.canvas;
		title.scale = this._mapScaleMin;
		title.zIndex = 10;

		title.x = -this.canvas.width / 2 + title.width / 2 * title.scale + offX;
		title.y = this.canvas.height / 2 - title.height / 2 * title.scale - offY;

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

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

		const labelNode = new cc.Node();
		labelNode.parent = title;
		const label = labelNode.addComponent(cc.RichText);
		const size = 42
		label.font = cc.find('Canvas/res/font/aharoni').getComponent(cc.Label).font;
		label.string = `<outline color=#a83c13 width=2><size=${size}><color=#ffffff>${this.data.title || " " }</color></size></outline>`
		// 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.x = -title.width / 2 + 90;

		const maxLen = 305;
		if (labelNode.width > maxLen) {
			labelNode.scale = maxLen / labelNode.width;
		}

		labelNode.y = labelNode.height / 2 * labelNode.scale + 15;

	},


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

		// getSprNodeByUrl, setSprNodeMaxLen(this.data.pic_url, (spr) => {
		// 	this.canvas.addChild(spr.node);
		// 	spr.node.scale = this._mapScaleMax;
		// });

		const bg = getSprNode('bg');
		const scaleX =  this.canvas.width / bg.width
		const scaleY = this.canvas.height / bg.height 
		const scale = Math.max(scaleX, scaleY);
		bg.scale = scale;
		this.canvas.addChild(bg);

	},
	


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


	hotZoneBg: null,
	initHotZoneBg() {
		this.hotZoneBg = new cc.Node();
		this.hotZoneBg.name = 'hotZoneBg';
		this.hotZoneBg.parent = cc.find('Canvas');
		this.hotZoneBg.zIndex = 4;

		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) / this.hotZoneBg.height;
			// const s = Math.min(sx, sy);
			// this.hotZoneBg.scale = s;


			const panel = getSprNode('panel');
			panel.scale = this._mapScaleMin;
			this.canvas.addChild(panel);
			panel.x = -this.canvas.width;



			const parent = panel;
			const sx = parent.width / this.hotZoneBg.width;
			const sy = parent.height / this.hotZoneBg.height;
			const s = Math.min(sx, sy);

			this.hotZoneBg.scale = s * 0.9;
			this.hotZoneBg.parent = panel;

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



			cc.tween(panel)
			.to(1, {x: -this.canvas.width * 0.05}, {easing: 'cubicOut'})
			.call(() => {
				this.hotZone1LoadEnd = true;
				this.startTesting();
			})
			.start();
			
		});

	},

	initHotZoneItem() {

		this.picNodeArr = [];
		this.rectNodeArr = [];

		this.data.hotZoneItemArr.forEach((item) => {
			// console.log('item.gIdx: ', item.gIdx);
			switch (item.gIdx) {
				case "0":
					this.setOneLinkRect(item);
					break;

				case "1":
					this.setOneWriteRect(item);
					break;

				// case "2":
				// 	this.setOneHotZonePic(item);

				default:
					break;
			}

		});

	},


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


	setOneDragAction(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(-rectNode.width / 2, -rectNode.height / 2, rectNode.width, rectNode.height);
		}
		ctx.stroke();
		ctx.fill();
		rectNode.x += rectNode.width / 2;
		rectNode.y += rectNode.height / 2;

		rectNode.baseX = rectNode.x;
		rectNode.baseY = rectNode.y;
		rectNode.targetOff();

		rectNode.on(cc.Node.EventType.TOUCH_START, () => {

			if (rectNode.isDragEnd) {
				if (rectNode.audioClip) {
					cc.audioEngine.stopAllEffects();
					cc.audioEngine.playEffect(rectNode.audioClip, false, 0.8);
				}
				return;
			}
			this._curShowItem = rectNode;
		})
		

		const realRate = this.hotZoneBg.width / this.data.bgItem.rect.width;
		rectNode.targetPx = -this.hotZoneBg.width / 2 + ( data.dragDot.x - this.data.bgItem.rect.x ) * realRate;
		rectNode.targetPy = this.hotZoneBg.height / 2 - (data.dragDot.y - this.data.bgItem.rect.y) * realRate;


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



		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.node.targetOff();
		
	

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



	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 = labelNode.addComponent(cc.Label);

		label.font = cc.find('Canvas/res/font/ahronbd-1').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;

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

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

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

		// 	}

		// });


		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', () => {
		
							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);
							}
				
						});
					}
		
					
				});
			});
		});

	},
	



	setOneAnima(data ,cb) {

		// console.log( ' in setOneAnima')

		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;

		rectNode.anchorX = rectNode.anchorY = 0;


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




		const animaNode = new cc.Node();
		animaNode.name = 'anima_' + data.index;
		this.hotZoneBg.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, (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);
						}

						// console.log('animationNames: ', animationNames);


						// rectNode.addComponent(cc.Button);
						// rectNode.on('click', () => {
						// 	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.animationNames = animationNames;

					}

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



					// if (rectNode.width) {

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

				});
			});
		});

	},

	setOneHotZonePic(data) {
		const rate = (this.hotZoneBg.scale * this.hotZoneBg.width) / this.data.bgItem.rect.width;

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

		this.picNodeArr.push(picNode);
		picNode.hitCount = 0;

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

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

			const scale = rate / this.hotZoneBg.scaleY;

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

			picNode.x += picNode.width / 2 * picNode.scaleX;
			picNode.y += picNode.height / 2 * picNode.scaleX;


			getSprNodeByUrl(data.answer_pic_url, (spr) => {

				const sprNode = spr.node;
				sprNode.active = false;
				picNode.addChild(sprNode);
				picNode.answerPic = sprNode;

				picNode.isLoadEnd = true;
				// this.checkStart();
			})

		});

	},

	addDragPoint(picNode, data) {


		picNode.baseX = picNode.x;
		picNode.baseY = picNode.y;

		const realRate = this.hotZoneBg.width / this.data.bgItem.rect.width;
		picNode.targetPx = -this.hotZoneBg.width / 2 + ( data.dragDot.x - this.data.bgItem.rect.x ) * realRate;
		picNode.targetPy = this.hotZoneBg.height / 2 - (data.dragDot.y - this.data.bgItem.rect.y) * realRate;


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


		picNode.on(cc.Node.EventType.TOUCH_START, () => {
			if (picNode.isDragEnd) {
				if (picNode.audioClip) {
					cc.audioEngine.stopAllEffects();
					cc.audioEngine.playEffect(picNode.audioClip, false, 0.8);
				}
				return;
			}
			this._curShowItem = picNode;

			// picNode.x = -this.hotZoneBg.width / 2 + ( data.dragDot.x - this.data.bgItem.rect.x ) * realRate;
			// picNode.y = this.hotZoneBg.height / 2 - (data.dragDot.y - this.data.bgItem.rect.y) * realRate;

		})
	},


	setOnePic(data) {
		const rate = (this.hotZoneBg.scale * this.hotZoneBg.width) / this.data.bgItem.rect.width;

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

		getSprNodeByUrl(data.pic_url, (spr) => {

			const sprNode = spr.node;
			picNode.addChild(sprNode);

			const scale = rate / this.hotZoneBg.scaleY;

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

			sprNode.anchorX = sprNode.anchorY = 0;

			sprNode.scaleX = picNode.width / sprNode.width;
			sprNode.scaleY = picNode.height / sprNode.height;
		})

		return 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 / this.hotZoneBg.scaleY;

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

		// 	picNode.anchorX = picNode.anchorY = 0;

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

		// });

		// picNode.on('touchstart', () => {
		// 	this.show
		// })

	},



	setOneWriteRect(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, 2);



		rectNode.pic = this.setOnePic(data);
		rectNode.pic.active = false;

		
		const ctx = rectNode.addComponent(cc.Graphics);
		// 红色矩形
		ctx.lineWidth = 4;
		ctx.strokeColor = cc.Color.RED;
		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;
		// rectNode.scale = 1 / data.mapScale;

		rectNode.anchorX = rectNode.anchorY = 0;


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

		rectNode.data = data;

		rectNode.ccRect = rectNode.getBoundingBoxToWorld();
		
		this.writeNodeArr.push(rectNode)

		this.setOneAnima(data, (animaNode) => {
			rectNode.animaNode = animaNode;
			animaNode.active = false;

			if (rectNode.isShowAnima) {
				this.showRectAnima(rectNode);
			}
		})
		

		
		this.addRectErrorSpr(rectNode);



		// console.log('this.writeNodeArr: ', this.writeNodeArr);

	},

	addRectErrorSpr(rectNode) {
		const warningSpr = getSprNode('rect_yellow');
		warningSpr.x = rectNode.width / 2;
		warningSpr.y = rectNode.height / 2;
		warningSpr.scaleX = rectNode.width / warningSpr.width;
		warningSpr.scaleY = rectNode.height / warningSpr.height;
		warningSpr.active = false;
		rectNode.addChild(warningSpr);
		
		const errorSpr = getSprNode('rect_red');
		errorSpr.x = rectNode.width / 2;
		errorSpr.y = rectNode.height / 2;
		errorSpr.scaleX = rectNode.width / errorSpr.width;
		errorSpr.scaleY = rectNode.height / errorSpr.height;
		errorSpr.active = false;
		rectNode.addChild(errorSpr);

		rectNode.warningSpr = warningSpr;
		rectNode.errorSpr = errorSpr;
	},

	showRectWarning(rectNode) {
		const warningSpr = rectNode.warningSpr;
		warningSpr.active = true;
		this.fadeAnim(warningSpr);

		this.playCatAudio(this.data.stage_error_audio_url);
	},

	showRectWrong(rectNode) {

		console.log(' in showRectWrong');

		const errorSpr = rectNode.errorSpr;
		errorSpr.active = true;
		this.fadeAnim(errorSpr);
	},

	fadeAnim(spr) {
		if (spr.fadeTween) {
			spr.fadeTween.stop();
		}

		// setTimeout(() => {
			spr.opacity = 0;
			spr.fadeTween = cc.tween(spr)
				.to(0.2, {opacity: 255}, {easing: 'sineInOut'})
				.to(0.2, {opacity: 0}, {easing: 'sineInOut'})
				.to(0.2, {opacity: 255}, {easing: 'sineInOut'})
				.to(0.2, {opacity: 0}, {easing: 'sineInOut'})
				.to(0.2, {opacity: 255}, {easing: 'sineInOut'})
				.to(0.2, {opacity: 0}, {easing: 'sineInOut'})
				.call(() => {
					spr.active = false;
				})
				.start();
		// }, 1);

	},

	setOneLinkRect(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;
		// console.log('scale: ', scale);
		// console.log('scale2: ', scale / data.mapScale);


		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;
		// rectNode.scale = 1 / data.mapScale;

		rectNode.anchorX = rectNode.anchorY = 0;


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

		rectNode.data = data;
		this.rectNodeArr.push(rectNode)


		const debugItemId = data.pointItem;
		const debugItemData = this.data.hotZoneItemArr2[Number(debugItemId) - 1];
		rectNode.isRightPoint = debugItemData.checkbox.list[0].value == true;

	},

	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 (picNode.audioClip) {
					cc.audioEngine.stopAllEffects();
					cc.audioEngine.playEffect(picNode.audioClip, false, 0.8);
				}
		});
	},


	initListener() {

		const canvas = cc.find('Canvas');
		
		let downFlag = false;

		const touchMove = (e) => {
			this.canvasTouchMove(e);
			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);
			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_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)

	},

	removeHtmlCanvasListener(type) {
		const canvasHtml = document.querySelector('canvas');
		canvasHtml.addEventListener(type, (e) => {})
	},	
	removeHtmlTouchEnd() {
		const canvasHtml = document.querySelector('canvas');
		canvasHtml.removeEventListener('touchend', this.htmlCanvasTouchendFunc, this);
	},

	canvasTouchMove(e) {

		if (!this._curShowItem) {
			return;
		}
		const pos = e.getLocation();
		this._curShowItem.x = pos.x - e.currentTarget.width / 2;
		this._curShowItem.y = pos.y - e.currentTarget.height / 2;

		// console.log('pos: ', pos.x);
	},

	canvasTouchEnd(e) {

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



	checkOnDragEndRect() {

		console.log('emptyGroupArr: ',  this.emptyGroupArr);
		for (let i = 0; i < this.dragEndRectArr.length; i++) {

			const rect = this.dragEndRectArr[i];

			const worldPos = this._curShowItem.parent.convertToWorldSpaceAR(cc.v2(this._curShowItem.x, this._curShowItem.y));
			const worldRect = rect.getBoundingBoxToWorld();
			if (worldRect.contains(worldPos)) {
			
				console.log('rect in ')
				this.checkIsDragEndTarget(rect);
				// removeItemFromArr(this.emptyGroupArr, letterGroup);
				// this.showLetterSuccess(letterGroup);
				// this.checkGroupEnd();
				return;
			}
			
		}

		this.itemBack();
	},

	itemBack() {

		cc.audioEngine.playEffect(this.wrongClip, false, 0.8);

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

	checkIsDragEndTarget(rect) {

		const worldPos = this._curShowItem.parent.convertToWorldSpaceAR(cc.v2(this._curShowItem.targetPx, this._curShowItem.targetPy));
		const worldRect = rect.getBoundingBoxToWorld();
		if (worldRect.contains(worldPos)) {
			this._curShowItem.x = this._curShowItem.targetPx;
			this._curShowItem.y = this._curShowItem.targetPy;
			this._curShowItem.isDragEnd = true;


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

		} else {
			this.itemBack();
		}
	},


	onDestroy() {
		this.isDestroy = true;
		// this.endTesting();
	}

});
