// 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, getScaleRateBy2Node, localPosTolocalPos, randomSortByArr, loadDragonBones, playAudio, showTrebleFirework, delayCall, removeFromArr, showBtnAnima, asyncDelay, RandomInt, jellyShake, getSprNodeByUrl} from "./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);
	},

	isTeacher: null,
	serverAllUser: null,
	start() {
		let getData = this.getData.bind(this);
		if (window && window.courseware) {
			getData = window.courseware.getData;
		}
		getData((data) => {

		

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

			this.preloadItem()
		})
	},

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

	setPageData(key, value, isSend=true) {



		if (this.pageData) {

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

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

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

	sendPageData() {

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

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

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

	getDefaultData() {
		const dataJson = ' {"contentObj":{"picArr":[{"pic_url":"http://staging-teach.cdn.ireadabc.com/daceda204ca34c9d5a4a6a37b663244d.png","audio_url":"http://staging-teach.cdn.ireadabc.com/70f35e529377b982daebc23ad92fa670.mp3"},{"pic_url":"http://staging-teach.cdn.ireadabc.com/2bb703e2bbb4214e5782d29f4f183a14.png","audio_url":"http://staging-teach.cdn.ireadabc.com/0128a59057e63c4c6b4b96556d077a98.mp3"}]}}';
		const data1 = JSON.parse(dataJson);
		return data1;

	},

	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.loadEnd();
			this.addServerListener();

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

	addPreloadImage() {

		if (this.data?.contentObj?.picArr) {
			let arr = this.data.contentObj.picArr;
			for (let i = 0; i < arr.length; i++) {
				this._imageResList.push({ url: arr[i].pic_url });
			}

		}
	

	},

	addPreloadAudio() {


		if (this.data?.contentObj?.picArr) {

			let arr = this.data.contentObj.picArr;

			for (let i = 0; i < arr.length; i++) {
				this._audioResList.push({ url: arr[i].audio_url });
      }

		}
   


	},

	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() {
		this.initData();

		this.initView();
	},

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


	isDebug: null,

	treeType: null,
	treeTypeArr: null,
	typeIndex: null,

	btnArr: null,
	fruitArr: null,
	modelLevel: null,

	STATE_STOP: null,
	STATE_PLAYING: null,
	STATE_PAUSE: null,
	isSupportRecord: null,
	readyStartTime: null,
	readyEndTime: null,



	picArr: null,
	canvasWidth: null,
	canvasHeight: null,
	curPageIndex: null,
	stopPlayBgAudio: null,
	canTouch: null,
	initData() {


		this.canTouch = true;
    this.curPageIndex = 0;

		this.stopPlayBgAudio = this.data.contentObj.stopPlayBgAudio;

		this.picArr = this.data?.contentObj?.picArr || [];
		this.canvasWidth = this.canvas.width;
		this.canvasHeight = this.canvas.height;

		this.initAudioEffect();
	},



	bgClip: null,
	walkClip: null,
	appearClip: null,
	magicClip: null,
	realFruitClip: null,
	popClip: null,
	btnStarClip: null,
	stripClip: null,
	goodjobClip: null,
	tipClip: null,
	finishClip: null,

	appleClip: null,
	bananaClip: null,
	orangeClip: null,

	appleSentenceClip: null,
	bananaSentenceClip: null,
	orangeSentenceClip: null,

	appleGroupClip: null,
	bananaGroupClip: null,
	orangeGroupClip: null,


	clickClip: null,
	initAudioEffect() {

		// this.bgClip = cc.find('Canvas/res/audio/bg').getComponent(cc.AudioSource).clip;
		// this.walkClip = cc.find('Canvas/res/audio/walk').getComponent(cc.AudioSource).clip;
		// this.appearClip = cc.find('Canvas/res/audio/fruit_appear').getComponent(cc.AudioSource).clip;
		// this.magicClip = cc.find('Canvas/res/audio/magic_appear').getComponent(cc.AudioSource).clip;
		// this.realFruitClip = cc.find('Canvas/res/audio/real_fruit').getComponent(cc.AudioSource).clip;
		// this.btnStarClip = cc.find('Canvas/res/audio/btn_star').getComponent(cc.AudioSource).clip;
		// this.popClip = cc.find('Canvas/res/audio/pop').getComponent(cc.AudioSource).clip;
		// this.stripClip = cc.find('Canvas/res/audio/strip').getComponent(cc.AudioSource).clip;
		// this.goodjobClip = cc.find('Canvas/res/audio/goodjob').getComponent(cc.AudioSource).clip;
		this.clickClip = cc.find('Canvas/res/audio/click').getComponent(cc.AudioSource).clip;
		// this.tipClip = cc.find('Canvas/res/audio/tip').getComponent(cc.AudioSource).clip;
		// this.finishClip = cc.find('Canvas/res/audio/finish').getComponent(cc.AudioSource).clip;
		
	
		// this.appleClip = cc.find('Canvas/res/audio/apple').getComponent(cc.AudioSource).clip;
		// this.bananaClip = cc.find('Canvas/res/audio/banana').getComponent(cc.AudioSource).clip;
		// this.orangeClip = cc.find('Canvas/res/audio/orange').getComponent(cc.AudioSource).clip;
		
		// this.appleSentenceClip = cc.find('Canvas/res/audio/sentence_apples').getComponent(cc.AudioSource).clip;
		// this.bananaSentenceClip = cc.find('Canvas/res/audio/sentence_bananas').getComponent(cc.AudioSource).clip;
		// this.orangeSentenceClip = cc.find('Canvas/res/audio/sentence_oranges').getComponent(cc.AudioSource).clip;


		// this.appleGroupClip = [];
		// this.appleGroupClip[0] = cc.find('Canvas/res/audio/drop_group/apple1').getComponent(cc.AudioSource).clip;
		// this.appleGroupClip[1] = cc.find('Canvas/res/audio/drop_group/apple2').getComponent(cc.AudioSource).clip;
		// this.appleGroupClip[2] = cc.find('Canvas/res/audio/drop_group/apple3').getComponent(cc.AudioSource).clip;

		// this.bananaGroupClip = [];
		// this.bananaGroupClip[0] = cc.find('Canvas/res/audio/drop_group/banana1').getComponent(cc.AudioSource).clip;
		// this.bananaGroupClip[1] = cc.find('Canvas/res/audio/drop_group/banana2').getComponent(cc.AudioSource).clip;
		// this.bananaGroupClip[2] = cc.find('Canvas/res/audio/drop_group/banana3').getComponent(cc.AudioSource).clip;

		// this.orangeGroupClip = [];
		// this.orangeGroupClip[0] = cc.find('Canvas/res/audio/drop_group/orange1').getComponent(cc.AudioSource).clip;
		// this.orangeGroupClip[1] = cc.find('Canvas/res/audio/drop_group/orange2').getComponent(cc.AudioSource).clip;
		// this.orangeGroupClip[2] = cc.find('Canvas/res/audio/drop_group/orange3').getComponent(cc.AudioSource).clip;

	


	},

	playBgMusic() {
		playAudio(this.bgClip, () => {
			this.playBgMusic();
		})
	},


	sendServerEvent(key, data) {

		if (this.isDebug) {
			this.addServerListenerTest(key, data);
			return;
		}

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


	addServerListener() {

		console.log(' in addServerListener');

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

		c.onEvent('course-in-screen', (data, next) => {
			console.log('in course_in_screen : ', data);
			this.loadEnd();
			next();
		});

		
	},

	addServerListenerTest(event, data) {
		
	},




	showTemplateStartAnima() {
		const resDragonBone = cc.find("Canvas/res/anima/pageturn")
		const pageturn = cc.instantiate(resDragonBone)	
		pageturn.scale = this._mapScaleMax;
		const canvas = cc.find('Canvas');
		canvas.addChild(pageturn, 100);

		const dragonDisplay = pageturn.getComponent(dragonBones.ArmatureDisplay);
		dragonDisplay.on(dragonBones.EventObject.COMPLETE, () => {

			pageturn.removeFromParent();
		})
		dragonDisplay.playAnimation('pageturn2', 1);
	},


	isShowEndAnima: null,
	showTemplateEndAnima() {

		if (this.isShowEndAnima) {
			return;
		}
		this.isShowEndAnima = true;

		const resDragonBone = cc.find("Canvas/res/anima/pageturn")
		const pageturn = cc.instantiate(resDragonBone)
		pageturn.scale = this._mapScaleMax;	
		const canvas = cc.find('Canvas');
		canvas.addChild(pageturn, 100);

		const dragonDisplay = pageturn.getComponent(dragonBones.ArmatureDisplay);
		dragonDisplay.on(dragonBones.EventObject.COMPLETE, () => {

			cc.tween({})
				.delay(1)
				.call(() => {
					if (window && window.courseware && this.isTeacher) {
						window.courseware.nextPage();
					}
				})
				.start();
		})
		dragonDisplay.playAnimation('pageturn', 1);
	},




	initView() {

		this.initBg();
		this.initPic();
		this.initBottomRight();
		// this.initAudioBtn();
		this.refreshPageLabel();
	},


	bg: null,
	bgLayer: null,
	initBg() {
			
		const bg = cc.find("Canvas/bg");
		bg.scale = this._mapScaleMax;
		this.bg = bg;

		this.bgLayer = new cc.Node();
		this.canvas.addChild(this.bgLayer);
	},


	initPic() {

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

      const data = this.picArr[i];

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

				const picNode = pic.node;
				this.bgLayer.addChild(picNode);

				const maxW = this.canvas.width * 0.9;
				const maxH = this.canvas.height * 0.9;
				const sx = maxW / picNode.width;
				const sy = maxH / picNode.height;
				const s = Math.min(sx, sy);
				picNode.scale = s;

				picNode.x = this.canvas.width * i;


			});
		


      // const picBg = new ShapeRect();
      // picBg.setSize(pic.width * pic.scaleX, pic.height * pic.scaleY);
      // picBg.x = this.canvasWidth / 2 + this.canvasWidth * i;
      // picBg.y = this.canvasHeight / 2;
      // picBg.init();
      // picBg.fillColor = '#ffffff';
      // // picBg.setRadius(50 * this.mapScale);
      // picBg.setShadow(0, 10, 20, 'rgba(0,0,0,0.3)');
      // // picBg.alpha = 0;
      // // this.renderArr.push(picBg);
      // // this.renderArr.push(picShadow);

      // picBg.addChild(pic);

    }

	},


	leftBtn: null,
	rightBtn: null,
	pageLabel: null,
  initBottomRight() {

    const px = this.canvasWidth / 2 - 100 * this._mapScaleMin;
    const py = -this.canvasHeight / 2 + 50 * this._mapScaleMin;
    const offX = 40 * this._mapScaleMin;



    const leftBtn = getSprNode("btn_left")
		leftBtn.scale = this._mapScaleMin;
    leftBtn.x = px - offX;
    leftBtn.y = py;
		leftBtn.on(cc.Node.EventType.TOUCH_START, () => {
			if (!this.canTouch) {
				return;
			}
			showBtnAnima(leftBtn);
			this.lastPageClick();
		});


    const rightBtn = getSprNode("btn_right")
		rightBtn.scale = this._mapScaleMin;
    rightBtn.x = px + offX;
    rightBtn.y = py;
		rightBtn.on(cc.Node.EventType.TOUCH_START, () => {
			if (!this.canTouch) {
				return;
			}
			showBtnAnima(rightBtn);
			this.nextPageClick();
		});

		this.canvas.addChild(leftBtn);
		this.canvas.addChild(rightBtn);

    const textBg = getSprNode("text_bg")
		textBg.scale = this._mapScaleMin;
    textBg.x = px;
    textBg.y = py + 65 * this._mapScaleMin;
		this.canvas.addChild(textBg);


		const labelNode = new cc.Node();

    const label = labelNode.addComponent(cc.Label);
    label.string = '0 / 0';
    label.font = cc.find('Canvas/res/font/BRLNSDB').getComponent(cc.Label).font;
    label.fontSize = 24;
		label.lineHeight = 24;
    label.fontColor = '#ffffff';

		label["_forceUpdateRenderData"](true);

		if (labelNode.width > textBg.width * textBg.scaleX * 0.9) {
			labelNode.scale = textBg.width * textBg.scaleX * 0.9 / labelNode.width;
		}
    textBg.addChild(labelNode);


    this.leftBtn = leftBtn;
    this.rightBtn = rightBtn;
    this.pageLabel = labelNode;

    if (this.picArr.length <= 1) {
      this.leftBtn.active = false;
      this.rightBtn.active = false;
      textBg.active = false;
    }
  },


  audioBtn: null,
  initAudioBtn() {
    const btnPlay = getSprNode("btn_play")
    btnPlay.scale = (this._mapScaleMin * 0.75);
		this.canvas.addChild(btnPlay);

    btnPlay.x = this.pageLabel.parent.x;
    btnPlay.y = this.pageLabel.parent.y + 50 * this._mapScaleMin;

    this.audioBtn = btnPlay;
  },


  refreshPageLabel() {

    const label = this.pageLabel.getComponent(cc.Label);
    label.string = (this.curPageIndex + 1) + ' / ' + this.picArr.length;

    this.showAudio();
  },

  showAudio() {
    if (!this.stopPlayBgAudio) {
      this.playPageAudio();
    }
	},



  nextPageClick() {
    console.log(' in leftBtnClick');

    if (this.curPageIndex >= this.picArr.length - 1) {
      return;
    }

    this.curPageIndex++;

    this.changePageByIndex();
  },

  lastPageClick() {

    console.log(' in rightBtnClick');


    if (this.curPageIndex <= 0) {
      return;
    }

    this.curPageIndex--;

    this.changePageByIndex();

  },


  changePageByIndex() {

    console.log(' in changePageByIndex');
    this.canTouch = false;

    // if (this.curAudio) {
    //   this.stopPageAudio();
    // }

		cc.tween(this.bgLayer)
			.to(1, {x: -this.curPageIndex * this.canvasWidth}, {easing: "cubicOut"})
			.call(() => {
				this.canTouch = true;
				this.refreshPageLabel();
			})
			.start();

			playAudio(this.clickClip);
  },








	curAudio: null,
	playPageAudio() {
		const audioUrl = this.picArr[this.curPageIndex].audio_url;
    if (!audioUrl) {
      return;
    }

		playAudioByUrl(audioUrl);


    // if (!this.curAudio) {
    //   this.curAudio = audio;
    //   this.curAudio.addEventListener('ended', () => {
    //     console.log('ended');
    //     this.onPageAudioOver();
    //     this.curAudio = null;
    //   });
    // }
    // audio.play();

    // this.audioBtn.init(this.images.get('btn_stop'));
  },
  // pausePageAudio() {
  //   this.curAudio.pause();
  //   this.audioBtn.init(this.images.get('btn_play'));
  // }
  // stopPageAudio() {
  //   this.curAudio.pause();
  //   this.curAudio.currentTime = 0;
  //   this.curAudio = null;
  //   this.audioBtn.init(this.images.get('btn_play'));
  // }
  // onPageAudioOver() {
  //   if (this.curAudio) {
  //     this.curAudio.currentTime = 0;
  //   }
  //   this.audioBtn.init(this.images.get('btn_replay'));
  // }

  // onAudioBtnClicked() {
  //   jelly(this.audioBtn, 0.5);
  //   if (this.curAudio && !this.curAudio.paused) {
  //     this.pausePageAudio();
  //   } else {
  //     this.playPageAudio();
  //   }
  // }








	// setTransparentCanvas() {
	// 		// 在main.js 加入以下代码：
	// 		cc.macro.ENABLE_TRANSPARENT_CANVAS = true;  //加在 cc.game.run(); 前面
	// 		// cc.director.setClearColor(new cc.Color(0,0,0, 0));  //加在cc.game.run(function); 回调里面
	// 		cc.Camera.main.backgroundColor = new cc.Color(0,0,0, 0);
	
	// },

	// initVideo() {

	// 	this.initVideoPlayer();
	// 	this.initVideoView();

	// },

	// videoPlayer: null,
	// initVideoPlayer() {
	// 	const videoNode = cc.find("Canvas/video");
	// 	const vPlayer = videoNode.addComponent(cc.VideoPlayer);
	// 	vPlayer.remoteURL = this.data.video_url;
	// 	this.videoPlayer = vPlayer;
	// 	videoNode.zIndex = 0;

	// 	videoNode.width = this.canvas.width;
	// 	videoNode.height = this.canvas.height;

	// 	vPlayer.stayOnBottom = true; // 保持在最底部

	// 	videoNode.on('completed', () => {
	// 		this.videoPlayEnd();
	// 	})

	// 	// let video0 = document.getElementsByClassName('cocosVideo')[0];
	// 	// video0.style.zIndex = 5;

	// 	// // video0.setAttribute("x5-video-player-type", "h5");
	// 	// // video0.setAttribute("webkit-playsinline", true);
	// 	// // video0.setAttribute("x-webkit-airplay", true);
	// 	// // video0.setAttribute("x5-video-orientation", "h5");
	// 	// // // video0.setAttribute("x5-video-player-fullscreen",true);
	// 	// // video0.setAttribute("preload", "auto");

	// 	// let gCanvas = document.getElementsByClassName('gameCanvas')[0];
	// 	// gCanvas.style.position = 'relative';
	// 	// gCanvas.style.zIndex = 10;

	// },

	// vPlayBtn: null,
	// vPauseBtn: null,
	// stripBtn: null,
	// strip: null,
	// stripBg: null,
	// initVideoView() {

	// 	const vNode = new cc.Node();
	// 	this.canvas.addChild(vNode);


	// 	const vPlayBtn = getSprNode("video/video_play");
	// 	vNode.addChild(vPlayBtn);
	// 	vPlayBtn.scale = this._mapScaleMin;
	// 	vPlayBtn.on(cc.Node.EventType.TOUCH_START, () => {
	// 		console.log(' in vPlayBtn')
	// 		// showBtnAnima(vPlayBtn);

	// 		console.log("this.videoPlayer.currentTime: ", this.videoPlayer.currentTime);

	// 		let time = 0;
	// 		if (this.videoPlayer.isEnd) {
	// 			this.sendServerEvent("play_video", {time});
	// 		} else {
	// 			console.log("```this.videoPlayer.currentTime: ", this.videoPlayer.currentTime);
	// 			if (this.videoPlayer.curServerTime) {
	// 				time = this.videoPlayer.curServerTime;
	// 				this.videoPlayer.curServerTime = null;
	// 			} else {
	// 				time = this.videoPlayer.currentTime;
	// 			}
	// 			this.sendServerEvent("play_video", {time});
	// 		}
	// 		this.setPageData('videoState', this.STATE_PLAYING, false);
	// 		this.setPageData('videoStartTime', time, false);
	// 		this.setPageData('videoStartDate', new Date().getTime());

	// 		// this.playVideo();
	// 	})
	// 	this.vPlayBtn = vPlayBtn;

	// 	const vPauseBtn = getSprNode("video/video_pause");
	// 	vNode.addChild(vPauseBtn);
	// 	vPauseBtn.scale = this._mapScaleMin;
	// 	vPauseBtn.active = false;
	// 	vPauseBtn.on(cc.Node.EventType.TOUCH_START, () => {
	// 		// showBtnAnima(vPauseBtn);

	// 		this.sendServerEvent("pause_video", {time: this.videoPlayer.currentTime});
	// 		this.setPageData('videoState', this.STATE_PAUSE, false);
	// 		this.setPageData('videoStartTime', this.videoPlayer.currentTime);


	// 		// this.pauseVideo();
	// 	})
	// 	this.vPauseBtn = vPauseBtn;

	// 	const stripBg = getSprNode("video/video_strip_bg");
	// 	vNode.addChild(stripBg, 1);
	// 	stripBg.y = -200 * this._mapScaleMin;
	// 	this.stripBg = stripBg;

	// 	const strip = getSprNode("video/video_strip");
	// 	strip.anchorX = 0;
	// 	strip.x = -strip.width / 2;
	// 	stripBg.addChild(strip)
	// 	strip.baseW = strip.width;
	// 	this.strip = strip;

	// 	const stripBtn = getSprNode("video/video_strip_btn");
	// 	stripBg.addChild( stripBtn, 1 );
	// 	this.stripBtn = stripBtn;
	// 	// stripBtn.opacity = 30;

	// 	this.updateStrip(true);



	// 	if (!this.isTeacher) {
	// 		vNode.active = false;
	// 	}

	// },

	// updateStrip(force = false) {

	// 	if (!force && !this.videoPlayer?.isPlaying()) {
	// 		return;
	// 	}

	// 	let percent;
	// 	const duration = this.videoPlayer.getDuration();
	// 	if (!duration) {
	// 		percent = 0;
	// 	} else {
	// 		percent =  this.videoPlayer.currentTime / duration;
	// 	}
 
	// 	percent = Math.round(percent * 10000) / 10000;
	// 	this.stripBtn.x = this.stripBg.width * percent - this.stripBg.width / 2;
		
	// 	const sf = this.strip.getComponent(cc.Sprite).spriteFrame;
	// 	this.strip.width = this.strip.baseW * percent;
	// 	var tmpRect = new cc.Rect(0, 0, this.strip.baseW * percent, this.strip.height);

	// 	// console.log('tmpRect: ', tmpRect);
	// 	sf.setRect(tmpRect); 
	// },

	// initSing() {
	// 	this.initSingAudio();
	// 	this.initSingLayer();
	// 	this.initSingText();
	// 	this.initSingStrip();
	// 	this.showTi2();
	// 	this.initSingBigIcon();


	// 	this.setSingLayerOpacity();


	// 	this.singLayer.active = false;
	// },

	// singAudioClip: null,
	// accompanyClip: null,
	// initSingAudio() {
	// 	if (!this.data.lrcData || !this.data.lrcData.audio_url) {
	// 		return;
	// 	}

	// 	cc.assetManager.loadRemote(this.data.lrcData.audio_url, (err, audioClip) => {
	// 		this.singAudioClip = audioClip;
	// 	});

	// 	if (this.data.accompany_audio_url) {

	// 		cc.loader.load({url: this.data.accompany_audio_url}, (err, clip) => {
	// 			this.accompanyClip = clip;
	// 		});

	// 		// cc.assetManager.loadRemote(this.data.accompany_audio_url, (err, audioClip) => {
	// 		// 	this.accompanyClip = audioClip;
	// 		// });
	// 	}
	// },

	// singLayer: null,
	// initSingLayer() {
	// 	const layer = new cc.Node();
	// 	this.canvas.addChild(layer, 3);
	// 	layer.width = this.canvas.width;
	// 	layer.height = this.canvas.height;
	// 	this.singLayer = layer;
	// },

	// lyrics: null,
	// singLabelLayer: null,
	// singLabelArr: null,
	// initSingText() {

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

	// 	this.lyrics = lyrics;
	// 	this.singLabelArr = [];

	// 	const labelLayer = new cc.Node();
	// 	this.singLayer.addChild(labelLayer);
	// 	this.singLabelLayer = labelLayer;

	// 	const baseY = 0 // 100 * this._mapScaleMin;
	// 	const disH = 100 * this._mapScaleMin;
	// 	for (let i=0; i<lyrics.length; i++) {
	// 		lyrics[i].index = i;

	// 		const labelNode = this.getOneSingLabel(lyrics[i]);
	// 		labelLayer.addChild(labelNode);
	// 		labelNode.y = baseY - disH * i;
	// 		labelNode.index = i;
	// 		this.singLabelArr.push(labelNode);

	// 	}
	

	// },

	// addLabelReadyDot(label) {
	// 	const dotNode = new cc.Node();
	// 	label.node.addChild(dotNode);
	// 	dotNode.x = - label.textW / 2 - 20;
	// 	dotNode.color = cc.Color.fromHEX(new cc.Color, '#733e00' );
	// 	dotNode.anchorX = 1;


	// 	const dotLabel = dotNode.addComponent(cc.RichText);
	// 	// dotLabel.horizontalAlign = cc.macro.TextAlignment.RIGHT
	// 	// dotLabel.string = '● ● ●'
	// 	// dotLabel.baseString = dotLabel.string;
	// 	dotNode.active = false;
	// 	label.dotLabel = dotLabel;
	// },

	// showDotLabelAnima(label) {

	// 	label.node.active = true;
	// 	label.dotNum = 2;
	// 	label.string = this.getDotString(label.dotNum);

	// 	this.subDotNum(label);
	// },

	// subDotNum(label) {

	// 	delayCall(1, () => {
	// 		if (label.dotNum > 0) {
	// 			label.dotNum --;
	// 			label.string = this.getDotString(label.dotNum);
	// 			this.subDotNum(label);
	// 		}
	// 	})
	// },

	// getDotString(dotNum) {
	// 	let str = ''
	// 	for (let i=0; i<dotNum; i++) {
	// 		str += '● ';
	// 	}
	// 	return str;
	// },



	// isSingBarTouch: null,
	// singStripBtn: null,
	// singStripBg: null,
	// textTotalH: null,
	// initSingStrip() {
	// 	const stripBg = getSprNode("sing/sing_strip_bg");
	// 	this.singLayer.addChild(stripBg);
	// 	stripBg.x = this.singLayer.width / 2 - 20 * this._mapScaleMin;
	// 	stripBg.y =  - 20 * this._mapScaleMin;

	// 	const stripRealBg = new cc.Node();
	// 	stripRealBg.x = stripBg.x;
	// 	stripRealBg.y = stripBg.y;
	// 	stripRealBg.width = stripBg.width;
	// 	stripRealBg.height = stripBg.height;
	// 	this.singLayer.addChild(stripRealBg);
	// 	this.singStripBg = stripRealBg;

	// 	const stripBtn = getSprNode("sing/sing_strip_btn");
	// 	stripRealBg.addChild(stripBtn);

	// 	stripRealBg.height -= stripBtn.height * 0.8;

	// 	stripBtn.y = stripRealBg.height / 2;
	// 	this.singStripBtn = stripBtn;

	// 	if (this.singLabelArr && this.singLabelArr.length > 0) {
	// 		this.textTotalH = Math.abs(this.singLabelArr[this.singLabelArr.length - 1].y);
	// 	} else {
	// 		this.textTotalH = 0;
	// 	}


	// 	if (!this.isTeacher) {
	// 		stripBg.active = false;
	// 		stripRealBg.active = false;
	// 	}

	// 	stripBtn.on(cc.Node.EventType.TOUCH_START, (e) => {
	// 		this.isSingBarTouch = true;
	// 		this.stopSing();
	// 		this.stopSingLabelToCenter();
	// 	})

	// 	this.singLayer.on(cc.Node.EventType.TOUCH_MOVE, (e) => {

	// 		if (!this.isSingBarTouch) {
	// 			return;
	// 		}
	// 		this.setStripBtnPos(e);
	// 		this.setSingLayerPos();
	// 		this.setSingLayerOpacity();
	// 	})

	// 	this.singLayer.on(cc.Node.EventType.TOUCH_END, (e) => {

	// 		console.log(' touch end ');
	// 		if (!this.isSingBarTouch) {
	// 			return;
	// 		}

	// 		if (this.curCenterLabel) {
	// 			this.setSingLabelToCenter(this.curCenterLabel);
	// 		}

	// 		this.isSingBarTouch = false;
	// 	})

	// },

	// setStripBtnPos(e) {
	// 	const pos = e.getLocation();

	// 	const stripBtn = this.singStripBtn;
	// 	const stripBg = this.singStripBg;
	// 	// stripBtn.x = pos.x - e.currentTarget.width / 2;
	// 	stripBtn.y = (pos.y - e.currentTarget.height / 2 - stripBg.y) / stripBg.scaleY;
	// 	if (stripBtn.y < -stripBg.height / 2) {
	// 		stripBtn.y = -stripBg.height / 2;
	// 	}
	// 	if (stripBtn.y > stripBg.height / 2) {
	// 		stripBtn.y = stripBg.height / 2;
	// 	}
	// },

	// setSingLayerPos() {
	// 	const stripBtn = this.singStripBtn;
	// 	const stripBg = this.singStripBg;

	// 	const rate = (stripBg.height / 2 - stripBtn.y) / stripBg.height;
	// 	const layerY = this.textTotalH * rate;

	// 	// console.log("rate: ", rate);
	// 	// console.log("textTotalH: ", this.textTotalH);
	// 	this.singLabelLayer.y = layerY;

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

	// },

	// curCenterLabel: null,
	// setSingLayerOpacity() {

		
	// 	const layer = this.singLabelLayer;
	// 	const arr = this.singLabelArr;
	// 	const rate = 1.2;
	// 	for (let i=0; i<arr.length; i++) {
	// 		const label = arr[i];
	// 		let opacity = (255 - Math.abs( layer.y + label.y ) * rate)
	// 		opacity = Math.round(opacity * 1000) / 1000;
	// 		if (opacity < 0) {
	// 			opacity = 0;
	// 		}
	// 		if (opacity < 200) {
	// 			label.iconNode.active = false;
	// 		} else {
	// 			label.iconNode.active = true;
	// 			this.curCenterLabel = label;
	// 		}

	// 		if (!this.isTeacher) {
	// 			label.iconNode.active = false;
	// 		}

	// 		label.scale = 0.6 + opacity / 255 * 0.4
	// 		label.opacity = opacity;
	// 	}
	// },


	// stopSingLabelToCenter() {
	// 	if (this.toCenterLabelTween) {
	// 		this.toCenterLabelTween.stop();
	// 		clearInterval(this.toCenterLabelTweenUpdateId);
	// 	}
	// },

	// toCenterLabelTween: null,
	// toCenterLabelTweenUpdateId: null,
	// setSingLabelToCenter(singLabel) {

	// 	this.stopSingLabelToCenter();

	// 	let updateId;
	// 	const updateAction = () => {
	// 		updateId = setInterval(() => {
	// 			this.setSingBarPos();
	// 			this.setSingLayerOpacity();
	// 		}, 1000/60)
	// 		this.toCenterLabelTweenUpdateId = updateId;
	// 	}

	// 	const stopUpdate = () => {
	// 		clearInterval(updateId);
	// 		this.toCenterLabelTween = null;
	// 		this.toCenterLabelTweenUpdateId = null;

	// 		this.setSingLayerOpacity();
	// 	}

	// 	this.toCenterLabelTween = cc.tween( this.singLabelLayer )
	// 		.call(() => {
	// 			updateAction()
	// 		})
	// 		.to(0.7, {y: -singLabel.y})
	// 		.call(() => {
	// 			stopUpdate();
	// 		})
	// 		.start();
	// },

	// setSingBarPos() {
	// 	const stripBtn = this.singStripBtn;
	// 	const stripBg = this.singStripBg;

	// 	const rate = this.singLabelLayer.y / this.textTotalH;
	// 	// const rate = (stripBg.height / 2 - stripBtn.y) / stripBg.height;
	// 	// const layerY = this.textTotalH * rate;

	// 	// console.log("rate: ", rate);
	// 	// console.log("textTotalH: ", this.textTotalH);
	// 	// this.singLabelLayer.y = layerY;

	// 	stripBtn.y = stripBg.height / 2 - stripBg.height * rate

	// 	// console.log('layerY: ', layerY);
	// },

	// bigSingIcon: null,
	// bigListenIcon: null,
	// initSingBigIcon() {


	// 	if (!this.isTeacher) {

	// 		const offX = 120 * this._mapScaleMin;
	// 		const bigListenIcon = getSprNode("sing/icon_listen_big") ;
	// 		bigListenIcon.scale = this._mapScaleMin;
	// 		this.singLayer.addChild(bigListenIcon);
	// 		bigListenIcon.x = this.singLayer.width / 2 - offX;
	// 		bigListenIcon.opacity = 0;
	// 		this.bigListenIcon = bigListenIcon;
	
	// 		const bigSingIcon = getSprNode("sing/icon_sing_big") ;
	// 		bigSingIcon.scale = this._mapScaleMin;
	// 		this.singLayer.addChild(bigSingIcon);
	// 		bigSingIcon.x = this.singLayer.width / 2 - offX;
	// 		bigSingIcon.opacity = 0;
	// 		this.bigSingIcon = bigSingIcon;
	// 	}
	
	// },
	

	// curSingLabel: null,
	// getOneSingLabel(data) {

	// 	const text = data.data;

	// 	let	tmpNode = new cc.Node();
	// 	const label = tmpNode.addComponent(cc.Label);
	// 	label.fontSize = 54;
	// 	// label.lineHeight = 54;
	// 	label.string = text;
	// 	label["_forceUpdateRenderData"](true);
	// 	tmpNode.removeFromParent();
		
	// 	const textW = tmpNode.width;
	// 	let	labelNode = new cc.Node();
	// 	labelNode.color = cc.Color.fromHEX(new cc.Color, '#733e00' );
	// 	labelNode.data = data;
	// 	const richText = labelNode.addComponent(cc.RichText);
	// 	richText.string = text;
	// 	richText.fontSize = 54;
	// 	richText.lineHeight = 54;
	// 	richText.data = data;
	// 	richText.textW = textW;
		
	// 	const iconNode = new cc.Node();
	// 	iconNode.x = textW / 2 + 70;
	// 	labelNode.addChild(iconNode);
	// 	labelNode.iconNode = iconNode;

	// 	const listenBtn = getSprNode("sing/icon_listen");
	// 	iconNode.addChild(listenBtn, 1);
	// 	listenBtn.anchorY = 0.3;
	// 	listenBtn.anchorX = 0.4;
	// 	// listenBtn.x = textW / 2 + 70;
	// 	labelNode.listenBtn = listenBtn;
	// 	listenBtn.on(cc.Node.EventType.TOUCH_START, () => {

	// 		// this.iconListenClick(data.index);
	// 		this.sendServerEvent("icon_listen_click", {index: data.index});
	// 		this.setPageData('curCenterLabelIndex', data.index);
	// 	});
	// 	this.addIconBtnBg(listenBtn);

	// 	const singBtn = getSprNode("sing/icon_sing");
	// 	iconNode.addChild(singBtn, 1);
	// 	singBtn.anchorY = 0.3;
	// 	singBtn.x = listenBtn.x + 70;
	// 	labelNode.singBtn = singBtn;
	// 	singBtn.on(cc.Node.EventType.TOUCH_START, () => {

	// 		// this.iconSingClick(data.index);
	// 		this.sendServerEvent("icon_sing_click", {index: data.index});
	// 		this.setPageData('curCenterLabelIndex', data.index);
	// 	});
	// 	this.addIconBtnBg(singBtn);

	// 	const rightBtn = getSprNode("sing/icon_right");
	// 	iconNode.addChild(rightBtn);
	// 	rightBtn.x = singBtn.x + 70;
	// 	labelNode.rightBtn = rightBtn;
	// 	rightBtn.on(cc.Node.EventType.TOUCH_START, () => {

	// 		// this.iconRightClick(data.index);
	// 		this.sendServerEvent("icon_right_click", {index: data.index});
	// 		labelNode.isRight = true;
	// 		this.setPageData('curCenterLabelIndex', data.index, false);
	// 		this.setRightLabelObj();
	// 	});

	// 	this.addLabelReadyDot(richText);

	// 	return labelNode;
	// },

	// setRightLabelObj() {
	// 	const rightLabelObj = {}
	// 	const arr = this.singLabelArr;
	// 	for (let i=0; i<arr.length; i++) {
	// 		if (arr[i].isRight) {
	// 			rightLabelObj[i.toString()] = {url: arr[i].audio_url || ''};
	// 		}
	// 	}

	// 	this.setPageData('rightLabelObj', rightLabelObj);
	// },

	// loadRecord(label) {

	// 	if (label.audio_url) {

	// 		cc.loader.load({url: label.audio_url}, (err, clip) => {
	// 			label.data.clip = clip;
	// 			console.log('label audio load end ~~~ data: ', label.data)
	// 		});

	// 		// cc.assetManager.loadRemote(label.audio_url, (err, clip) => {
	// 		// 	label.data.clip = clip;
	// 		// 	console.log('label audio load end ~~~')
	// 		// });	
	// 	}
	
	// },


	// showBigListenIcon() {
	// 	cc.tween(this.bigListenIcon)
	// 	.to(0.3, {opacity: 255})
	// 	.start();
	// },
	// hideBigListenIcon() {
	// 	cc.tween(this.bigListenIcon)
	// 	.to(0.3, {opacity: 0})
	// 	.start();
	// },

	// showBigSingIcon() {
	// 	cc.tween(this.bigSingIcon)
	// 		.to(0.3, {opacity: 255})
	// 		.start();
	// },
	// hideBigSingIcon() {
	// 	cc.tween(this.bigSingIcon)
	// 		.to(0.3, {opacity: 0})
	// 		.start();
	// },
	

	// iconListenClick(index) {

	// 	const richTextNode = this.singLabelArr[index];
	// 	const richText = richTextNode.getComponent(cc.RichText);
	// 	const listenBtn = richTextNode.listenBtn;
	// 	const singBtn = richTextNode.singBtn;

	// 	showBtnAnima(listenBtn);
	// 	this.playSong(richText)
	// 	this.resetLabelColor(richText);
	// 	this.setSingLabelToCenter(richTextNode);
	// 	singBtn.light.opacity = 0;
	// 	listenBtn.light.opacity = 255;

	// 	this.curSingLabel = richText;

	// 	if (!this.isTeacher) {
	// 		this.showBigListenIcon();
	// 		this.hideBigSingIcon();
	// 	}
	// },

	// iconSingClick(index) {

	// 	const richTextNode = this.singLabelArr[index];
	// 	const richText = richTextNode.getComponent(cc.RichText);
	// 	const listenBtn = richTextNode.listenBtn;
	// 	const singBtn = richTextNode.singBtn;

	// 	showBtnAnima(singBtn);
	// 	this.playAccompany(richText)
	// 	this.resetLabelColor(richText);
	// 	this.setSingLabelToCenter(richTextNode);
	// 	this.beganRecording();
	// 	richTextNode.rightBtn.opacity = 100;

	// 	singBtn.light.opacity = 255;
	// 	listenBtn.light.opacity = 0;
		

	// 	this.curSingLabel = richText;

	// 	if (!this.isTeacher) {
	// 		this.hideBigListenIcon();
	// 		this.showBigSingIcon();
	// 	}
	// },

	// iconRightClick(index) {


	// 	const richTextNode = this.singLabelArr[index];
	// 	const richText = richTextNode.getComponent(cc.RichText);
	// 	const rightBtn = richTextNode.rightBtn;

	// 	if (!rightBtn.active) {
	// 		return;
	// 	}

	// 	showBtnAnima(rightBtn);
	// 	this.stopSing();
	// 	this.setSingLabelRight(richText)
	// 	this.jumpNextSingLabel(richText);
	// 	this.loadRecord(richText);
	// 	this.checkCanTouchNextBtn();
	// 	// rightBtn.active = false;

	// 	this.curSingLabel = null;

	// 	if (!this.isTeacher) {
	// 		this.hideBigListenIcon();
	// 		this.hideBigSingIcon();
	// 	}
	// },



	// addIconBtnBg(btn) {
	// 	const normalBg = getSprNode("sing/icon_bg_normal");
	// 	btn.parent.addChild( normalBg );
	// 	normalBg.x = btn.x;
	// 	normalBg.y = btn.y;

	// 	const lightBg = getSprNode("sing/icon_bg_light");
	// 	btn.parent.addChild( lightBg );
	// 	lightBg.x = btn.x;
	// 	lightBg.y = btn.y;
	// 	lightBg.opacity = 0;

	// 	btn.normal = normalBg;
	// 	btn.light = lightBg;
	// },


	// stopSing() {
	// 	if (this.singId != null) {
	// 		cc.audioEngine.stopEffect(this.singId);

	// 		clearInterval(this.voiceInterval);
	// 		this.voiceInterval = null;

	// 	} 
	// },
	
	// setSingLabelRight(label) {
	// 	label.string = `<color=#007317>${label.data.data}</color>` 

	// 	const smallRight = getSprNode("sing/icon_right_s");
	// 	smallRight.x = -label.textW / 2 - 50;
	// 	label.node.addChild(smallRight);

	// 	label.node.isRight = true;
	// 	// label.node.color = cc.Color.fromHEX(new cc.Color, '#007317' );

	// 	const rightBtn = label.node.rightBtn;
	// 	rightBtn.active = false;
	// },



	// jumpNextSingLabel(label) {
	// 	const nextIndex = label.node.index + 1;
	// 	if (!this.singLabelArr[nextIndex]) {
	// 		return;
	// 	}

	// 	this.setSingLabelToCenter(this.singLabelArr[nextIndex]);
	// },

	// checkCanTouchNextBtn() {
	// 	let count = 0;
	// 	const arr = this.singLabelArr;
	// 	for (let i=0; i<arr.length; i++) {
	// 		if (!arr[i].isRight) {
	// 			return;
	// 		}

	// 		if (arr[i].isRight) {
	// 			count ++;
	// 		}
	// 	}

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

	// 	if (count == 3 || count == this.singLabelArr.length) {
	// 		this.singEnd();
	// 	}
	// },

	// singEnd() {

	// 	const topBtn = this.topBtnArr[2];
	// 	if (topBtn.light.opacity > 254) {
	// 		return;
	// 	}



	// 	if (this.isTeacher && topBtn.light.opacity <= 1) {
	// 		this.showTi1();
	// 		this.showHand(topBtn);

	// 		this.setPageData("isTopLight3", true);
	// 	}

	// 	this.hideTi2();
	// 	topBtn.light.opacity = 255;
	// },


	// beganRecording() {
	// 	if (this.isTeacher) {
	// 		return;
	// 	}
	// 	console.log(" in beganRecording")
	// 	if (this.isSupportRecord && window && window.courseware) {
	// 		const beganRecording = window.courseware.beganRecording;
	// 		beganRecording() 
	// 		console.log(" 开始录音 ")

	// 	}
	// },

	// endRecording(label) {

	// 	if (this.isTeacher) {
	// 		return;
	// 	}
	// 	console.log(' in endRecording ');

	// 	if (!this.isSupportRecord) {
	// 		this.sendServerEvent('record_end', {index: label.data.index, url: ''});
	// 		return;
	// 	}

	// 	if (window && window.courseware) {
	// 		const endRecording = window.courseware.endRecording;
	// 		endRecording((audio_url) => {

	// 			// const audio_url = 'http://staging-teach.cdn.ireadabc.com/70f35e529377b982daebc23ad92fa670.mp3'
	// 			if (audio_url) {
	// 				// label.audio_url = audio_url;
	// 				this.sendServerEvent('record_end', {index: label.data.index, url: audio_url})
	// 			}

	// 			// label.node.rightBtn.opacity = 255;

	// 			console.log(" 录音结束 ")
	// 		}) 

	// 		// if (!this.isSupportRecord) {
	// 		// 	label.node.rightBtn.opacity = 255;
	// 		// }
	// 	}
	// },

	// serverRecordEnd(data) {
	// 	console.log(' in serverRecordEnd data: ', data);

	// 	const {index, url} = data;
	// 	const richTextNode = this.singLabelArr[index];
	// 	if (richTextNode) {
	// 		const richText = richTextNode.getComponent(cc.RichText);
	// 		richText.audio_url = url;
	// 		richTextNode.audio_url = url;
	// 		// this.loadRecord(richText);
	// 		richTextNode.rightBtn.opacity = 255;
	// 	}

	// },


	// resetLabelColor(label) {
	// 	if (this.curSingLabel && this.curSingLabel != label) {
	// 		const text = this.curSingLabel.data.data;
	// 		this.curSingLabel.string = text;

	// 		if (this.curSingLabel.node.isRight) {
	// 			this.setSingLabelRight(this.curSingLabel);
	// 		}
	// 		console.log("in change color ")
	// 	}
	// },

	// playAccompany(label) {
	// 	if (this.singId != null) {
	// 		cc.audioEngine.stopEffect(this.singId);
	// 	} 

	// 	const data = label.data;


	// 	this.singId = cc.audioEngine.playEffect(this.accompanyClip, false, 0.8);

	// 	let playTime = data.time - this.readyStartTime;
	// 	if (playTime < 0) {
	// 		playTime = 0;
	// 	}
	// 	cc.audioEngine.setCurrentTime(this.singId, playTime);

	// 	if (!label.node.isRight) {
	// 		this.showDotLabelAnima(label.dotLabel);
	// 	}


	// 	const text = label.data.data;
	// 	label.string = text;
	// 	this.updateOneSingLight(label, true);

	// },

	// accompanyId: null,
	// playAccompanyAndRecord(time) {

	// 	this.accompanyId = cc.audioEngine.playEffect(this.accompanyClip, false, 0.8);
	// 	cc.audioEngine.setCurrentTime(this.accompanyId, time);

	// 	console.log('accompanyId: ', this.accompanyId);
	// },

	// pauseAccompanyAndRecord(time) {

	// 	console.log(" in pauseAccompanyAndRecord ")
	// 	if (this.accompanyId == null) {
	// 		return;
	// 	}
	// 	console.log(" in pauseAccompanyAndRecord 2")

	// 	cc.audioEngine.pauseEffect(this.accompanyId, time);
	// },


	// singId: null,
	// playSong(label) {

	// 	if (this.singId != null) {
	// 		cc.audioEngine.stopEffect(this.singId);
	// 	} 

	// 	const data = label.data;

	// 	this.singId = cc.audioEngine.playEffect(this.singAudioClip, false, 0.8);
	// 	cc.audioEngine.setCurrentTime(this.singId, data.time);

	// 	this.updateOneSingLight(label, false);
	// },

	// voiceInterval: null,
	// updateOneSingLight(label, isRecord) {

	// 	let lightColor;
	// 	if (isRecord) {
	// 		lightColor = '#007317'
	// 	} else {
	// 		lightColor = '#d54419';
	// 	}
	// 	if (this.voiceInterval !== undefined) {
	// 		clearInterval(this.voiceInterval);
	// 	 }

	// 	const data = label.data;
	// 	const text = data.data;
	// 	const string = text;
	

	// 	const curLineTime = data.time;
	// 	const nextLineTime = this.getNextLineTime(data.index);

	// 	const audioId = this.singId;
	// 	this.voiceInterval = setInterval(() => {
	// 	//  const label = this.chineseLabel;

			
	// 	 const currentTime = cc.audioEngine.getCurrentTime(audioId) - curLineTime;
	// 	 const duration = Number(nextLineTime) - Number(curLineTime);
	// 	//  console.log("currentTime: ", currentTime);
	// 	//  console.log("duration: ", duration);
	// 	 let rate = currentTime / duration;
	// 	 if (rate >= 1) {
	// 		rate = 1;
	// 	 }
	// 	 const stringBeforeList = [];
	// 	 const stringAfterList = [];
	// 	 string.split(' ').forEach((letter, idx, list) => {
	// 		if ((idx / list.length) < rate) {
	// 		 stringBeforeList.push(letter);
	// 		} else {
	// 		 stringAfterList.push(letter);
	// 		}
	// 	 });
	// 	//  label.string = `<color=#d54419>${stringBeforeList.join(' ')}</c> <color=#733e00>${stringAfterList.join(' ')}</color>`;

	// 	 if (stringAfterList.length == 0) {

	// 		 label.string = `<color=${lightColor}>${stringBeforeList.join(' ')}</c>`;
	// 	 } else if (stringBeforeList.length > 0) {

	// 		 label.string = `<color=${lightColor}>${stringBeforeList.join(' ')}</c> <color=#733e00>${stringAfterList.join(' ')}</color>`;
	// 	 }


	// 	 if (rate == 1) {
	// 		clearInterval(this.voiceInterval);
	// 		this.voiceInterval = null;

	// 		// 直接结束
	// 		if (!isRecord) {
	// 			cc.audioEngine.stopEffect(audioId);
	// 			return;
	// 		}

	// 		//延迟结束
	// 		delayCall(this.readyEndTime, () => {

	// 			cc.audioEngine.stopEffect(audioId);
	// 			if (isRecord) {
	// 				this.endRecording(label);
	// 			}
	// 		})
		
	// 	 }
	// 	}, 1000 / 60);

	
	// 	// cc.audioEngine.setFinishCallback(audioId, () => {
	// 	//  clearInterval(this.voiceInterval);
	// 	//  this.voiceInterval = null;
	// 	// });

	// },

	// getNextLineTime(curLineIndex) {
	// 	if (this.lyrics[curLineIndex + 1]) {
	// 		return this.lyrics[curLineIndex + 1].time
	// 	} else {
	// 		return cc.audioEngine.getDuration(this.singId);
	// 	}
	// },


	// showVideo() {

	// 	// this.videoPlayer.remoteURL = this.data.video_url;
	// 	this.bgBlock.enabled = false;
	// 	this.videoPlayer.node.width = this.canvas.width;
	// 	this.videoPlayer.node.height = this.canvas.height;

	// 	this.videoPlayer.currentTime = 0;
	// 	this.updateStrip(true);

	// 	cc.tween(this.bg)
	// 		.to(0.3, {opacity: 0})
	// 		.start();
	// },

	// hideVideo() {
	// 	this.bgBlock.enabled = true;

	// 	cc.tween(this.bg)
	// 		.to(0.3, {opacity: 255})
	// 		.call(() => {
	// 			// this.videoPlayer.remoteURL = ''
	// 			this.videoPlayer.node.width = 0;
	// 			this.videoPlayer.node.height = 0;
	// 		})
	// 		.start();
	// },


	// playVideo(time) {
	// 	this.vPlayBtn.active = false;
	// 	this.vPauseBtn.active = true;
	// 	this.videoPlayer.currentTime = time;
	// 	this.isVideoPlayEnd = false;

		

	// 	if (this.isSupportRecord && this.curTopBtnIndex == 2) {
	// 		this.playRecordVideo();
	// 		this.playAccompanyAndRecord(time);
	// 		this.videoPlayer.volume = 0;
	// 	} else {
	// 		this.videoPlayer.volume = 1;
	// 	}

	// 	this.videoPlayer.play();
	// 	this.videoPlayer.isEnd = false;
	// 	this.hideTopAnima();
	// 	this.hideNextBtn();
	// 	this.hideTi3();
	// },

	// isPlayRecord: null,
	// playRecordVideo() {
	// 	console.log(' in playRecordVideo');
	// 	this.isPlayRecord = true;

	// 	if (this.curRecordId) {
	// 		const state = cc.audioEngine.getState(this.curRecordId);
	// 		if (state == cc.audioEngine.AudioState.PAUSED) {
	// 			cc.audioEngine.resume(this.curRecordId);
	// 		}
	// 	}
	// },

	// pauseRecordVideo() {
	// 	this.isPlayRecord = false;

	// 	if (this.curRecordId) {
	// 		const state = cc.audioEngine.getState(this.curRecordId);
	// 		if (state == cc.audioEngine.AudioState.PLAYING) {
	// 			cc.audioEngine.pause(this.curRecordId);
	// 		}
	// 	}
	// },

	// pauseVideo(time = null) {
	// 	this.videoPlayer.pause();
	// 	this.vPlayBtn.active = true;
	// 	this.vPauseBtn.active = false;

	// 	if (time) {
	// 		this.videoPlayer.currentTime = time;
	// 	}
		

	// 	console.log('this.curTopBtnIndex: ', this.curTopBtnIndex);
	// 	if (this.isSupportRecord && this.curTopBtnIndex == 2) {
	// 		this.pauseRecordVideo();
	// 		this.pauseAccompanyAndRecord(time);
	// 	}
	// },

	// isVideoPlayEnd: null,
	// videoPlayEnd() {
		
	// 	this.vPlayBtn.active = true;
	// 	this.vPauseBtn.active = false;

	// 	this.videoPlayer.isEnd = true;

	// 	const topBtn = this.topBtnArr[1];

	// 	if (this.isTeacher) {
			
		
	// 		if (topBtn.light.opacity <= 1) {
	// 			this.showTi1();
	// 			this.showHand(topBtn);

	// 			this.setPageData("isTopLight2", true, false);
	// 		}

	// 		this.setPageData("videoState", this.STATE_STOP);

	// 		this.checkShowNextBtn();
		
	// 	}

	// 	topBtn.light.opacity = 255;
	// 	this.showTopAnima();

	// 	this.isVideoPlayEnd = true;
	// 	this.isPlayedRecordObj = {};

	// },






	// initTop() {

	// 	this.initTitle();
	// 	this.initTopBtn();
	// },

	// initTitle() {
	// 	const off = 10 * this._mapScaleMin;
	// 	const title = getSprNode("title");
	// 	this.canvas.addChild(title, 10);
	// 	title.anchorX = 0;
	// 	title.anchorY = 1;
	// 	title.x = -this.canvas.width / 2 + off;
	// 	title.y = this.canvas.height / 2 - off

	// },


	// topBtnArr: null,
	// topNode: null,
	// initTopBtn() {

	// 	this.topBtnArr = [];

	// 	const textArr = [
	// 		"Look and listen.",
	// 		"Listen and sing.",
	// 		"Listen to your recording."
	// 	]

	// 	if (!this.isSupportRecord) {
	// 		textArr[1] = "Learn the lyrics.";
	// 		textArr[2] = "Listen and sing.";
	// 	}

	// 	const topNode = new cc.Node();
	// 	this.topNode = topNode;
	// 	this.canvas.addChild(topNode, 10);

	// 	const baseX = this.canvas.width / 2 - 500 * this._mapScaleMin;
	// 	const disW = 190 * this._mapScaleMin;
	// 	for (let i=0; i<3; i++) {
	// 		const btnNode = new cc.Node();
	// 		btnNode.scale = this._mapScaleMin;
	// 		btnNode.x = baseX + i * disW;
	// 		btnNode.y = this.canvas.height / 2;
	// 		btnNode.anchorY = 1;
	// 		btnNode.baseY = btnNode.y;
	// 		topNode.addChild(btnNode);

	// 		const normal = getSprNode("btn_top_normal");
	// 		btnNode.addChild(normal);
	// 		normal.anchorY = 1;

	// 		const light = getSprNode("btn_top_light");
	// 		btnNode.addChild(light);
	// 		light.anchorY = 1;
	// 		light.y = 25;
	// 		if (i != 0) {
	// 			light.opacity = 0;
	// 		}
	// 		btnNode.light = light;


	// 		const numBg = getSprNode("top_num_bg");
	// 		btnNode.addChild(numBg);
	// 		numBg.y = -20;

	// 		const numLabelNode = new cc.Node();
	// 		numBg.addChild( numLabelNode );
	// 		const numLabel = numLabelNode.addComponent(cc.Label);
	// 		numLabel.font = cc.find('Canvas/res/font/GOTHICB_1').getComponent(cc.Label).font;
	// 		numLabel.string = i + 1;
	// 		numLabel.fontSize = 24;
	// 		numLabel.lineHeight = 24;
	// 		numLabelNode.color = cc.Color.fromHEX(new cc.Color, '#9e6205' );


	// 		const btnLabelNode = new cc.Node();
	// 		btnLabelNode.x = 5;
	// 		btnLabelNode.y = -70;
	// 		btnNode.addChild(btnLabelNode);
	// 		const richText = btnLabelNode.addComponent(cc.RichText);
	// 		// richText.string = textArr[i];
	// 		richText.fontSize = 24;
	// 		richText.font = cc.find('Canvas/res/font/GOTHICB_1').getComponent(cc.Label).font;
	// 		richText.maxWidth = normal.width * 1.1;
	// 		richText.horizontalAlign = cc.macro.TextAlignment.CENTER;
	// 		richText.string = `<outline color=#844609 width=2> <color=#ffffff>${ textArr[i] }</color> </outline>`
	// 		richText.lineHeight = 30;

	
	// 		this.topBtnArr.push(btnNode);
	// 		btnLabelNode.pauseSystemEvents(true);

	// 		btnNode.width = light.width;
	// 		btnNode.height = light.height;
	// 		btnNode.addComponent(cc.Button);
	// 		btnNode.on("click", () => {
	// 			console.log("light click")

	// 			// this.topBtnClick(i);
	// 			if (!this.isTeacher) {
	// 				return;
	// 			}

	// 			this.sendServerEvent('top_btn_click', {index: i});
	// 			this.setPageData('curTopBtnIndex', i);
			
	// 		});
	// 	}
	// },


	// curTopBtnIndex: null,
	// topBtnClick(btnIndex) {

	// 	const btn = this.topBtnArr[btnIndex];
	// 	if (btn.light.opacity < 254) {
	// 		return;
	// 	}

	// 	if (this.curTopBtnIndex == btnIndex) {
	// 		return;
	// 	}

	// 	this.pauseVideo();
	
	// 	this.hideTi1();
	// 	this.hideTi3();
	// 	this.hideHand();
	// 	this.hideNextBtn();



	// 	console.log('in topBtnClick : ', btnIndex);

	// 	switch(btnIndex) {
	// 		case 0:
	// 			this.showVideo();
	// 			this.hideSingLayer();
	// 			break;
	// 		case 1:
	// 			this.hideVideo();
	// 			this.showSingLayer();
	// 			break;
	// 		case 2:
	// 			this.initRecordData();
	// 			this.showVideo();
	// 			this.hideSingLayer();
	// 			break;
	// 	}

	// 	this.showTopBtn(btn, () => {
			
	// 	});


	// 	if (!this.isTeacher) {
	// 		this.showTopAnima();
	// 	}


	// 	this.curTopBtnIndex = btnIndex;

	// },

	// showTopAnima() {
	// 	if (this.isTeacher) {
	// 		return;
	// 	}
	// 	cc.tween(this.topNode)
	// 	.to(0.3, {opacity: 255})
	// 	.start();
	// },

	// hideTopAnima() {
	// 	if (this.isTeacher) {
	// 		return;
	// 	}
	// 	cc.tween(this.topNode)
	// 		.to(0.5, {opacity: 0})
	// 		.start();
	// },


	// isPlayedRecordObj: null,
	// initRecordData() {
	// 	this.isPlayedRecordObj = {};
	// 	this.curRecordId = null;
	
	// },

	// singLayerTween: null,
	// showSingLayer() {
	// 	console.log(' in showSingLayer');

	// 	if (this.singLayerTween) {
	// 		this.singLayerTween.stop();
	// 	}
	// 	this.singLayer.active = true;
	// 	this.singLayer.opacity = 0;
	// 	this.singLayerTween = cc.tween(this.singLayer)
	// 		.to(0.3, {opacity: 255})
	// 		.start();

	
	// },

	// hideSingLayer() {


	// 	if (this.singLayerTween) {
	// 		this.singLayerTween.stop();
	// 	}

	// 	this.singLayerTween = cc.tween(this.singLayer)
	// 		.to(0.3, {opacity: 0})
	// 		.call(() => {
	// 			this.singLayer.active = false;
	// 		})
	// 		.start();
	// },


	// showTopBtn(topBtn, cb=null) {
	// 	if (topBtn.y != topBtn.baseY) {
	// 		return;
	// 	}

	// 	const moveY = topBtn.baseY - 24 * this._mapScaleMin;
	// 	cc.tween(topBtn)
	// 		.to(0.5, {y: moveY }, {easing: "cubicOut"})
	// 		.call(() => {
	// 			if (cb) {
	// 				cb();
	// 			}
	// 		})
	// 		.start();

	// 	for (let i=0; i<this.topBtnArr.length; i++) {
	// 		const tmpBtn = this.topBtnArr[i];
	// 		if (tmpBtn != topBtn) {
	// 			this.hideTopBtn(tmpBtn);
	// 		}
	// 	}
	// },

	// hideTopBtn(topBtn) {

	// 	const moveY = topBtn.baseY;
	// 	cc.tween(topBtn)
	// 		.to(0.5, {y: moveY }, {easing: "cubicOut"})
	// 		.start();
	// },
	

	// ti1: null,
	// showTi1() {
	// 	const ti = getSprNode("ti_1");
	// 	ti.scale = this._mapScaleMin;
	// 	this.canvas.addChild(ti, 9);
	// 	ti.anchorY = 1;
	// 	ti.y = -this.canvas.height / 2;
	// 	this.ti1 = ti;

	// 	const targetY = -this.canvas.height / 2 + ti.height * ti.scaleY;
	// 	cc.tween(ti)
	// 		.to(1, {y: targetY}, {easing: "cubicOut"})
	// 		.start();

	// },



	// ti2: null,
	// showTi2() {

	// 	let ti;
	// 	if (!this.ti2) {
	// 		let resName = "sing/ti_2";
	// 		if (!this.isSupportRecord) {
	// 			resName += "_2";
	// 		}
	// 		ti = getSprNode(resName);
	// 		ti.scale = this._mapScaleMin;
	// 		this.singLayer.addChild(ti, 15);
	// 		ti.anchorY = 0;
	// 		ti.y = -this.singLayer.height / 2 + 20 * this._mapScaleMin;
	// 		this.ti2 = ti;
	// 		console.log('ti2 :', ti);
	// 	}
	
	// 	ti = this.ti2;


	// 	if (!this.isTeacher) {
	// 		ti.active = false;
	// 	}

	// 	if (this.ti2) {
	// 		cc.tween(this.ti2) 
	// 			.to(0.3, {opacity: 255})
	// 			.start();
	// 	}
	// },

	// hideTi2() {
	// 	if (this.ti2) {
	// 		cc.tween(this.ti2) 
	// 			.to(0.3, {opacity: 0})
	// 			.start();
	// 	}
	// },


	// hideTi1() {
	// 	if (this.ti1) {
	// 		cc.tween(this.ti1) 
	// 		.to(0.3, {opacity: 0})
	// 		.start();
	// 	}

	// },


	// checkShowNextBtn() {
	// 	if (this.curTopBtnIndex == 2) {
	// 		this.showNextBtn();
	// 		this.showTi3();
	// 	}
	// },

	// ti3: null,
	// showTi3() {
	// 	if (!this.ti3) {
	// 		const ti = getSprNode("ti_3");
	// 		ti.scale = this._mapScaleMin;
	// 		this.canvas.addChild(ti, 15);
	// 		ti.anchorY = 1;
	// 		ti.y = -this.singLayer.height / 2 ;
	// 		ti.baseY = ti.y;
	// 		this.ti3 = ti;
			
	// 	}
	

	// 	if (!this.isTeacher) {
	// 		this.ti3.active = false;
	// 	}


	// 	const targetY = -this.canvas.height / 2 + this.ti3.height * this.ti3.scaleY;
	// 	cc.tween(this.ti3)
	// 		.to(1, {y: targetY}, {easing: "cubicOut"})
	// 		.start();

	// },

	// hideTi3() {
	// 	if (this.ti3) {

	// 		cc.tween(this.ti3)
	// 		.to(1, {y: this.ti3.baseY}, {easing: "cubicOut"})
	// 		.start();
	// 	}
	// },


	// showHand(pos) {
	// 	const offX = -50 * this._mapScaleMin;
	// 	const offY = -100 * this._mapScaleMin;
	// 	this.hand.x = pos.x + offX;
	// 	this.hand.y = pos.y + offY;

	// 	cc.tween(this.hand) 
	// 	.to(0.3, {opacity: 255})
	// 	.start();
	// },

	// hideHand() {
	// 	if (this.hand) {
	// 		cc.tween(this.hand) 
	// 		.to(0.3, {opacity: 0})
	// 		.start();
	// 	}
	// },

	// hand: null,
	// initHand() {
	// 	console.log("in showHand");

	// 	const hand = new cc.Node();
	// 	this.canvas.addChild(hand, 11);
	// 	this.hand = hand;

	// 	const hand1 = getSprNode("icon_hand1")
	// 	hand1.parent = hand
	// 	hand1.x = 100;
	// 	hand1.y = -60;

	// 	const hand2 = getSprNode("icon_hand2")
	// 	hand2.parent = hand
	// 	hand2.x = hand1.x;
	// 	hand2.y = hand1.y;
	// 	hand2.opacity = 0;
		
	// 	hand.hand1 = hand1;
	// 	hand.hand2 = hand2;
	// 	this.showHandAnima();

	// 	hand.opacity = 0;

	// 	// btn.x = 200 * this._mapScaleMin
	// 	// btn.y = -100 * this._mapScaleMin;

	// },

	// showHandAnima() {

	// 	const hand1 = this.hand.hand1;
	// 	const hand2 = this.hand.hand2;

	// 	if (hand1.opacity == 0) {
	// 		const delayTime = 0.2;
	// 		delayCall(delayTime, () => {
	// 			hand1.opacity = 255;
	// 			hand2.opacity = 0;
	// 			this.showHandAnima();
	// 		});
				
	// 	} else {
	// 		const delayTime = 0.5;
	// 		delayCall(delayTime, () => {
	// 			hand1.opacity = 0;
	// 			hand2.opacity = 255;
	// 			this.showHandAnima();
	// 		})
	// 	}
	// },


	// refreshByPageData() {
	// 	this.refreshTopByPageData()
		
	// 	if (this.curTopBtnIndex == null) {
	// 		return;
	// 	}
		
	// 	switch(this.curTopBtnIndex) {
	// 		case 0:
	// 			this.refreshGroup1();
	// 			break;
	// 		case 1:
	// 			this.refreshGroup2();
	// 			break;
	// 		case 2:
	// 			this.refreshGroup2();
	// 			this.refreshGroup1();
	// 			// this.refreshGroup3();
	// 			break;
	// 	}
	// },

	// refreshTopByPageData() {
	// 	const isTopLight2 = this.getPageData('isTopLight2');
	// 	if (isTopLight2) {
	// 		this.topBtnArr[1].light.opacity = 255;
	// 	}

	// 	const isTopLight3 = this.getPageData('isTopLight3');
	// 	if (isTopLight3) {
	// 		this.topBtnArr[2].light.opacity = 255;
	// 	}

	// 	const curTopBtnIndex = this.getPageData("curTopBtnIndex");
	// 	console.log('curTopBtnIndex: ', curTopBtnIndex);
	// 	if (curTopBtnIndex != null) {
	// 		this.topBtnClick(curTopBtnIndex);
	// 		this.curTopBtnIndex = curTopBtnIndex;
	// 	}
	
	// },

	//  refreshGroup1() {

	// 	const videoState = this.getPageData("videoState");

	// 	console.log(' in refreshGroup1 videoState: ', videoState)

		
	// 	switch(videoState) {
	// 		case this.STATE_STOP:
	// 			// this.videoPlayer.currentTime = this.videoPlayer.getDuration();
	// 			this.videoPlayEnd();
	// 			break;

	// 		case this.STATE_PAUSE:
	// 			const time = this.getPageData('videoStartTime');
	// 			if (time >= this.videoPlayer.getDuration()) {
	// 				this.videoPlayEnd();
	// 				return;
	// 			}

	// 			this.pauseVideo(time);

	// 			this.videoPlayer.curServerTime = time;
	// 			this.videoPlayer.currentTime = time;

		

	// 			break;

	// 		case this.STATE_PLAYING:
	// 			const startTime = this.getPageData('videoStartTime');
	// 			const startDate = this.getPageData('videoStartDate');
	// 			const curDate = new Date().getTime();
	// 			const subTime = (curDate - startDate) / 1000;
	// 			const curTime = startTime + subTime;

	// 			if (curTime >= this.videoPlayer.getDuration()) {
	// 				this.videoPlayEnd();
	// 				return;
	// 			}
	// 			this.videoPlayer.currentTime = this.videoPlayer.getDuration();

	// 			console.log('startTime: ', startTime);
	// 			console.log('startDate: ', startDate);
	// 			console.log('curDate: ', curDate);
	// 			console.log('subTime: ', subTime);
	// 			console.log('curTime: ', curTime);

	// 			this.playVideo(curTime);
	// 			break;
	// 	}

	
	// },
	// refreshGroup2() {
	// 	const curCenterLabelIndex = this.getPageData('curCenterLabelIndex') || 0
	// 	const label = this.singLabelArr[curCenterLabelIndex];
	// 	console.log(' in refreshGroup2: curCenterLabelIndex ', curCenterLabelIndex);
	// 	console.log(' in refreshGroup2: label: ', label);
	// 	this.setSingLabelToCenter(label);


	// 	let rightLabelObj = this.getPageData('rightLabelObj');
	// 	if (!rightLabelObj) {
	// 		rightLabelObj = {};
	// 	}

	// 	const arr = this.singLabelArr;

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

	// 	for (let i=0; i<arr.length; i++) {
	// 		if (rightLabelObj[i.toString()]) {
	// 			console.log(' enter setSingLabelRight ');
	// 			const richText = arr[i].getComponent(cc.RichText);
	// 			this.setSingLabelRight(richText);
	// 			richText.audio_url = rightLabelObj[i.toString()].url;
	// 			this.loadRecord(richText);
	// 		}
	// 	}

	// },
	// refreshGroup3() {

	// },



















	// updatePlayRecord() {

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

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

	// 	const labelArr = this.singLabelArr;

	// 	let curTime = this.videoPlayer.currentTime;
	// 	if (this.accompanyId) {
	// 		curTime = cc.audioEngine.getCurrentTime(this.accompanyId);
	// 	}

	// 	for (let i=labelArr.length-1; i>=0; i--) {
	// 		const data = labelArr[i].data;
	// 		const key = i.toString();



	// 		let playTime = data.time - this.readyStartTime;
	// 		if (playTime < 0) {
	// 			playTime = 0;
	// 		}
			
	// 		if (curTime >= playTime && data.clip && !this.isPlayedRecordObj[key]) {

	// 			console.log(' in playOneRecord')
	// 			this.playOneRecord(data);
	// 			this.isPlayedRecordObj[key] = data;	
	// 			// return;
	// 		} 
	// 	}

	// },

	// playOneRecord(data) {
	// 	this.curRecordId = cc.audioEngine.playEffect(data.clip, false, 0.8);
	// },


	// update() {

	// },






	// initListener() {

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



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

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


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

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


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

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

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

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

	// 	const touchEnd = (e) => {
		
	// 		downFlag = false;
	// 		this.canvasTouchEnd(e);

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

	// 	const mouseUp = (e) => {
	
	// 		downFlag = false;

	// 		this.canvasTouchEnd(e);

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


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

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

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

	// },

	// canvasTouchStart(e) {


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

	// },

	// canvasTouchMove(e) {

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

	// },

	// canvasTouchEnd(e) {

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

	// 	this._curShowItem = null;
	// },



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

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


	// isGameEnd: null,
	// gameEnd(isServer=false) {

	// 	if (!isServer && this.isTeacher) {
	// 		this.sendServerEvent('game_end', {});
	// 		// return;
	// 	}

	// 	this.isGameEnd = true
	// 	this.isStopUpdate = true;

	// 	playAudio(this.endClip);

	// 	const goodJob = getSprNode('text_good-job')
	// 	// goodJob.scale = this._mapScaleMin;
	// 	this.canvas.addChild(goodJob, 70);

	// 	goodJob.scale = 0;
	// 	cc.tween(goodJob)
	// 		.to(0.7, {scale: this._mapScaleMin}, {easing: "elasticOut"})
	// 		.start();

	// },


	// nextBtn: null,
	// initNextBtn() {
	// 	const nextBtn = getSprNode("next_btn");
	// 	this.canvas.addChild( nextBtn, 10 );
	// 	nextBtn.scale = this._mapScaleMin;
	// 	nextBtn.x = this.canvas.width / 2 - nextBtn.width / 2 * nextBtn.scale;
	// 	nextBtn.y = -this.canvas.height / 2 + nextBtn.height / 2 * nextBtn.scale;
	// 	// nextBtn.opacity = 0;
	// 	// nextBtn.active = false;
	// 	this.nextBtn = nextBtn;
	// 	this.nextBtn.active = false;

	// 	const nextText = getSprNode("next_text");
	// 	nextText.y = 55;
	// 	nextBtn.addChild(nextText);

	// 	// nextBtn.addComponent(cc.Button)
	// 	nextBtn.on(cc.Node.EventType.TOUCH_START, () => {
	// 		console.log(' in click');
	// 		this.sendServerEvent('show_template_end_anima');
	// 	})
	// },

	// nextBtnTween: null,
	// showNextBtn() {

	// 	if (this.nextBtnTween) {
	// 		this.nextBtnTween.stop();
	// 	}

	// 	this.nextBtn.active = true;
	// 	this.nextBtnTween = cc.tween(this.nextBtn)
	// 		.to(0.3, {opacity: 255})
	// 		.start();

	// 	const pos =	{x: this.nextBtn.x, y: this.nextBtn.y + 130 * this._mapScaleMin}
	// 	this.showHand(pos);
	// },

	// hideNextBtn() {
	// 	if (!this.nextBtn) {
	// 		return;
	// 	}

	// 	if (this.nextBtnTween) {
	// 		this.nextBtnTween.stop();
	// 	}

	// 	this.nextBtnTween = cc.tween(this.nextBtn)
	// 		.to(0.3, {opacity: 0})
	// 		.call(() => {
	// 			this.nextBtn.active = false;
	// 		})
	// 		.start();

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



























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

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

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

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

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

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

	// 		// const tmpS = 640 / 720;
	// 		// let subNum = 720 - 640;
	// 		// const frameSize = cc.view.getFrameSize();
	// 		// const winSize = cc.winSize;

	// 		// console.log('this.hotZoneBg.box: ', this.hotZoneBg.getBoundingBox());
	// 		// console.log('let visiSize=cc.director.getVisibleSize();: ', cc.view.getVisibleSize());
	// 		// console.log('lframeSize: ', frameSize);

	// 		// let sx = frameSize.width / this._designSize.width;
	// 		// let sy = frameSize.height / this._designSize.height;
	// 		// const mapS = Math.min(sx, sy);
	// 		// // const sy = canvas.height * tmpS / box.height;



	// 		//  sx = frameSize.width * this._cocosScale / img.width;
	// 		//  sy = (frameSize.height * this._cocosScale - subNum * mapS * this._cocosScale) / img.height;


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


	// 		const sx = this.canvas.width / this.hotZoneBg.width;
	// 		const sy = (this.canvas.height - titleH) / this.hotZoneBg.height;
	// 		const s = Math.min(sx, sy);
	// 		this.hotZoneBg.scale = s;
			
	// 		// this.hotZoneBg.y = -frameSize.height / 2 * this._cocosScale + this.hotZoneBg.height / 2 * this.hotZoneBg.scaleY + (subNum * mapS * this._cocosScale);
	// 		this.hotZoneBg.y = 0 - titleH / 2 ;
	// 		// console.log('this.hotZoneBg.y', this.hotZoneBg.y);




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


	
	// 	});

	// },

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

	// 	});

	// },


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

	// setOneAction(data) {



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

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

	// 	const scale = rate / this.hotZoneBg.scaleY ;

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

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



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

	// 		// label.overflow = cc.Label.Overflow.NONE;
	// 		// label.node.setContentSize(new cc.Size(0, lineHeight));
	// 		label["_forceUpdateRenderData"](true);
		
			
	// 	} else if (actionData.type == 'pic') {

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

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

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

	// setOneActionText(rectNode, actionData) {


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

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


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


	// 	const tweenArr = [];

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

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

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

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

	// 		}
	// 	}


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


	// 	label.lineHeight = label.fontSize;

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

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

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

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

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

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

	// 			// JSON.parse(tweenData.option)

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

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

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

	// 		}

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

	// 	});

	// 	// labelNode.opacity = 255;

	// 	return label;
	// },

	// setOneActionPic(rectNode, actionData) {

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

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

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

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

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

	// 		const opArr = actionData.changeOption	
	// 		const tweenArr = [];
	
	// 		for (let i = 0; i < opArr.length; i++ ) {
	
	// 			const opData = opArr[i];
	// 			console.log('opData: ~~~ ', opData);

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

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

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

	// 				if (rectNode.audioClip) {
	// 					cc.audioEngine.stopAllEffects();
	// 					cc.audioEngine.playEffect(rectNode.audioClip, false, 0.8);
	// 				}
		
	// 				if (rectNode.isClicked) {
	// 					// return;
	// 				}
	// 				rectNode.isClicked = true;

	// 				for (let i=0; i<tweenArr.length; i++) {
	// 					const tweenData = tweenArr[i];
		
	// 					if (tweenData.optionName == 'opacity') {
	// 						cc.tween(tweenData.item)
	// 							.to(actionData.changeTime,  JSON.parse(tweenData.option) )
	// 							.start();
	// 					}
	// 				}
		
	// 			});
	// 		}

	// 	});
	// },

	// setOneActionAnima(rectNode, actionData) {


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

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

	// 	const data = actionData;

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



	// 	const image = data.texPngData.url//"http://staging-teach.cdn.ireadabc.com/5a0c5af3e952acd0ac83a6e5c6f03ff1.png";
	// 	const ske = data.skeJsonData.url//"http://staging-teach.cdn.ireadabc.com/bd825dcceea298d1146be8067ae3d17f.json";
	// 	const atlas = data.texJsonData.url//"http://staging-teach.cdn.ireadabc.com/246f8991b729fa3e5a7f4802de828efa.json";
	// 	cc.loader.load(image, (error, texture) => {

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

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

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

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

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


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

	// 				let animationNames = [];

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

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

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

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


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

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


			


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

	// 				animaNode.scaleX = rectNode.width / animaNode.width;
	// 				animaNode.scaleY = rectNode.height / animaNode.height;
		
	// 				const opArr = actionData.changeOption	
	// 				const tweenArr = [];
			
	// 				for (let i = 0; i < opArr.length; i++ ) {
			
	// 					const opData = opArr[i];
	// 					console.log('opData: ~~~ ', opData);
		
	// 					if (opData[0] == 'opacity') {
	// 						animaNode.opacity = Number( opData[1] / 100 * 255 ) + 0.1;
	// 						console.log(animaNode.opacity);
	// 						tweenArr.push({item: animaNode , option: `{"${opData[0]}" : ${opData[2] / 100 * 255}}`, optionName: opData[2] == null ? '' : opData[0]},)
			
	// 					}  else {
	// 						// animaNode[opData[0]] = Number(opData[1]);
	// 						// tweenArr.push({item: animaNode, option: `{"${opData[0]}" : ${opData[2]}}`, optionName: opData[2] == null ? '' : opData[0]})
	// 					}
		
			
	// 					if (actionData.audio_url) {
	// 						cc.assetManager.loadRemote(actionData.audio_url, (err, audioClip) => {
	// 							rectNode.audioClip = audioClip;
	// 						});
	// 					}
						
		
	// 					rectNode.addComponent(cc.Button);
	// 					rectNode.on('click', () => {
		
	// 						if (rectNode.audioClip) {
	// 							cc.audioEngine.stopAllEffects();
	// 							cc.audioEngine.playEffect(rectNode.audioClip, false, 0.8);
	// 						}
				
	// 						if (rectNode.isClicked) {
	// 							// return;
	// 						}
	// 						rectNode.isClicked = true;
		
	// 						for (let j=0; j<tweenArr.length; j++) {
	// 							const tweenData = tweenArr[j];
				
	// 							console.log('tweenData: ', tweenData);

	// 							if (tweenData.optionName) {

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

	// 							}

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

	// },
	



	// setOneAnimaSmall(data) {


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

	// 					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.x = rectNode.x + rectNode.width / 2;
	// 				animaNode.y = rectNode.y + rectNode.height / 2;

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

	// },


	// setOnePic(data) {
	// 	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);

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

	// 	});

	// },

	// setOneRect(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.bgItem.isShowDebugLine) {
	// 		ctx.rect(0, 0, rectNode.width, rectNode.height);
	// 	}
	// 	ctx.stroke();
	// 	ctx.fill();

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


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

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

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


	// },

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


});
