// Learn cc.Class:
//  - https://docs.cocos.com/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

// import { getSprNode } from "./util";
import { onHomeworkFinish, getSprNode, playAudioByUrl, getScaleRateBy2Node, localPosTolocalPos, randomSortByArr, loadDragonBones, playAudio, showTrebleFirework, delayCall, removeFromArr, showBtnAnima, asyncDelay, jellyShake, showLog, formatTime, getSpriteFrimeByUrl, RandomInt, exchangeNodePos } from "../script/kyxq_qpy_util";

cc.Class({
	extends: cc.Component,

	properties: {
		baseWidth: {
			default: 1280,
			type: cc.Integer
		},
		baseHeight: {
			default: 940,
			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, aspect) => {

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

			// this.initPageData({});


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

			this.preloadItem()
		})
	},

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

	setPageData(key, value, isSend = true) {



		if (this.pageData) {

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

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

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

	sendPageData() {

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

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

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

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

		func(this.getDefaultData());
	},

	getDefaultData() {
		// const dataJson = '{"video_url":"http://staging-teach.cdn.ireadabc.com/537aa38d43627c3997b28da1f1cc43da.mp4","lrcData":{"audio_url":"http://staging-teach.cdn.ireadabc.com/c5bc3378e4e0be11b67fc6cf625dfdf7.mp3","fontSize":24,"lineHeight":32,"lyrics":[{"time":0,"data":"","newLine":false},{"time":4.105990000000002,"data":"Apple, apple. I like apples.","newLine":false},{"time":7.992413,"data":"I like apples.","newLine":false},{"time":10.024486,"data":"What about you?","newLine":false},{"time":11.416603999999996,"data":"","newLine":false},{"time":15.850838,"data":"Banana, banana. I like bananas.","newLine":false},{"time":20.004074,"data":"I like bananas.","newLine":false},{"time":21.992325,"data":"What about you?","newLine":false},{"time":23.668069,"data":"","newLine":false},{"time":25.011329000000003,"data":"Ah, banana, my favorite!","newLine":false},{"time":27.440496,"data":"","newLine":false},{"time":28.103187000000002,"data":"Orange, orange. I like oranges.","newLine":false},{"time":31.986444,"data":"I like oranges.","newLine":false},{"time":34.104426999999994,"data":"What about you?","newLine":false},{"time":35.740390999999995,"data":"","newLine":false}]},"accompany_audio_url":"http://staging-teach.cdn.ireadabc.com/6d59bf82e77182bcb6520e3a3593b579.mp3"}';
		// const data1 = JSON.parse(dataJson);
		// return data1;
	
		return {
			"begin_audio_url": "http://teach.cdn.ireadabc.com/67d7eb31f275b3666283393f4301cee8.mp3",
			"record_audio_url": "http://teach.cdn.ireadabc.com/dfafd99e79b900270edba49edc9b1d5f.mp3",
			"fight_audio_url": "http://teach.cdn.ireadabc.com/f36a36504f9ec72344853269f69dd6c0.mp3",
			"compose_audio_url": "http://teach.cdn.ireadabc.com/b3bf3d59c33b0cd52b29cb4ed49598fd.mp3",
			"finish_audio_url": "http://teach.cdn.ireadabc.com/9ef0e9861b135e388069cfeaa3e28189.mp3",
			"lrcData": {
				"video_url": "http://teach.cdn.ireadabc.com/7b2fa2fb9540ff67181ffd9076487a2e.mov",
				"lyrics": [
					{
						"time": 2.73843,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"isHidden": true,
								"data": "snake"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/b0f32e9e717e4570a6f034691aa63ba8.png"
							},
							{
								"data": ","
							},
							{
								"isHidden": true,
								"data": "smile"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/052d6e076f7dfdd95212607191467e98.png"
							},
							{
								"data": ","
							},
							{
								"isHidden": true,
								"data": "snow"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/5c0fddb78a04289b7e02329a6665ec24.png"
							}
						]
					},
					{
						"time": 4.716297,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"data": "snake, smile, snow"
							}
						]
					},
					{
						"time": 7.166147,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"isHidden": true,
								"data": "snake"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/b0f32e9e717e4570a6f034691aa63ba8.png"
							},
							{
								"data": ","
							},
							{
								"isHidden": true,
								"data": "smile"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/052d6e076f7dfdd95212607191467e98.png"
							}
						]
					},
					{
						"time": 9.621286,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"data": "snake, smile"
							}
						]
					},
					{
						"time": 12.01481,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"isHidden": true,
								"data": "smile"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/052d6e076f7dfdd95212607191467e98.png"
							},
							{
								"data": ","
							},
							{
								"isHidden": true,
								"data": "snow"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/5c0fddb78a04289b7e02329a6665ec24.png"
							}
						]
					},
					{
						"time": 14.391683,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"data": "smile, snow"
							}
						]
					},
					{
						"time": 16.779323,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"isHidden": true,
								"data": "snake"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/b0f32e9e717e4570a6f034691aa63ba8.png"
							},
							{
								"data": ","
							},
							{
								"isHidden": true,
								"data": "smile"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/052d6e076f7dfdd95212607191467e98.png"
							},
							{
								"data": ","
							},
							{
								"isHidden": true,
								"data": "snow"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/5c0fddb78a04289b7e02329a6665ec24.png"
							}
						]
					},
					{
						"time": 19.157942,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"data": "snake, smile, snow"
							}
						]
					},
					{
						"time": 21.48816,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"isHidden": true,
								"data": "snow"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/5c0fddb78a04289b7e02329a6665ec24.png"
							},
							{
								"data": ","
							},
							{
								"isHidden": true,
								"data": "smile"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/052d6e076f7dfdd95212607191467e98.png"
							},
							{
								"data": ","
							},
							{
								"isHidden": true,
								"data": "snake"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/b0f32e9e717e4570a6f034691aa63ba8.png"
							}
						]
					},
					{
						"time": 24.170196,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"data": "snow, smile, snake"
							}
						]
					},
					{
						"time": 26.498032,
						"data": "",
						"newLine": false,
						"textArr": []
					},
					{
						"time": 31.372738,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"data": "The black and yellow"
							},
							{
								"isHidden": true,
								"data": "snakes "
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/b0f32e9e717e4570a6f034691aa63ba8.png"
							}
						]
					},
					{
						"time": 33.67698699999999,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"data": "The black and yellow snakes "
							}
						]
					},
					{
						"time": 35.842183,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"isHidden": true,
								"data": "smile "
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/052d6e076f7dfdd95212607191467e98.png"
							},
							{
								"data": "in the "
							},
							{
								"isHidden": true,
								"data": "snow"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/5c0fddb78a04289b7e02329a6665ec24.png"
							},
							{
								"data": " ."
							}
						]
					},
					{
						"time": 38.338032,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"data": "smile in the snow."
							}
						]
					},
					{
						"time": 40.70392,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"data": "The black and yellow"
							},
							{
								"isHidden": true,
								"data": "snakes "
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/b0f32e9e717e4570a6f034691aa63ba8.png"
							},
							{
								"isHidden": true,
								"data": "smile "
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/052d6e076f7dfdd95212607191467e98.png"
							},
							{
								"data": "in the "
							},
							{
								"isHidden": true,
								"data": "snow"
							},
							{
								"isIcon": true,
								"url": "http://teach.cdn.ireadabc.com/5c0fddb78a04289b7e02329a6665ec24.png"
							},
							{
								"data": "."
							}
						]
					},
					{
						"time": 45.522199,
						"data": "",
						"newLine": false,
						"textArr": [
							{
								"data": "The black and yellow snakes smile in the snow."
							}
						]
					},
					{
						"time": 50.653639,
						"data": "",
						"newLine": false,
						"textArr": []
					}
				]
			},
			"mute_video_url": "http://teach.cdn.ireadabc.com/023bd49ad7e3304adf871c0e4a0e7b28.mp4",
			"song_video_url": "http://teach.cdn.ireadabc.com/a3e79a58062f6b4d33a160bc071bd01a.mov"
		}
	},

	preload() {
		const preloadArr = this._imageResList.concat(this._audioResList).concat(this._animaResList);
		cc.assetManager.preloadAny(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.lrcData && this.data.lrcData.lyrics) {
			this.data.lrcData.lyrics.forEach(items=>{
				if(items && items.textArr) {
					items.textArr.forEach(item=>{
						if(item && item.isIcon && item.url) {
							this._imageResList.push({ url: item.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.mute_video_url.indexOf("_l")<=0) {
			this.data.mute_video_url = this.data.mute_video_url.replace(/.mp4$/g, "_l.mp4");
		}
		if (this.data.song_video_url.indexOf("_l")<=0) {
			this.data.song_video_url = this.data.song_video_url.replace(/.mp4$/g, "_l.mp4");
		}
		if (this.data.lrcData && this.data.lrcData.video_url.indexOf("_l")<=0) {
			this.data.lrcData.video_url = this.data.lrcData.video_url.replace(/.mp4$/g, "_l.mp4");
		}

		this._audioResList.push({ url: this.data.audio_url });
		this._audioResList.push({ url: this.data.lrcData?.video_url });
		this._audioResList.push({ url: this.data.mute_video_url });
		this._audioResList.push({ url: this.data.song_video_url });
		// this._audioResList.push({url: this.data?.lrcData?.audio_url});


		this._audioResList.push({ url: this.data.begin_audio_url });
		this._audioResList.push({ url: this.data.record_audio_url });
		this._audioResList.push({ url: this.data.fight_audio_url });
		this._audioResList.push({ url: this.data.compose_audio_url });
		this._audioResList.push({ url: this.data.finish_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(cb) {


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

		this.initData();

		console.log(' in loadEnd 2')

		this.initView();

		console.log(' in loadEnd 3')

		this.initListener();

		console.log(' in loadEnd 4')

		cb();

	},

	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,

	audioObj: null,

	isFirstVideoPlayEnd: null,

	needEnableTouchOnStopAudio: null, // 当音频停止时，需要启用点击的标志位
	initData() {

		// this.isDebug = true;
		// this.isTeacher = true;


		this.audioObj = {};
		this.canTouch = false;
		console.log("禁止点击 - 1")
		this.isFirstVideoPlayEnd = true;
		this.isFirstMuteVideoPlayEnd = true;
		this.recordItemArr = [];

		this.STATE_STOP = 0;
		this.STATE_PLAYING = 1;
		this.STATE_PAUSE = 2;

		this.isSupportRecord = window.air?.airClassInfo?.supportRecord
		// this.isSupportRecord = true;

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

		this.readyStartTime = 3;
		this.readyEndTime = 1;

		// this.treeTypeArr = ['apple', 'banana', 'orange'];
		// this.typeIndex = 0;

		// this.treeType = this.treeTypeArr[0];


		// this.btnArr = [];
		// this.fruitArr = [];

		// this.modelLevel = 1;

		this.lastPercent = 0;
		this.lastTime = -1;
		this.fakePrecent = 0;

		this.initAudioEffect();
	},



	audioGoodjob: null,
	audioTryagain: null,
	initAudioEffect() {

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

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

		this.audioGoodjob = getAudioByResName('goodjob');
		this.audioTryagain = getAudioByResName('tryagain');
	},



	sendServerEvent(key, data) {


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


	addServerListener() {

		console.log(' in addServerListener');

		this.loadEnd(()=>{});
		return;

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


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

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



	},




	initView() {

		this.initBg();
		this.initCatListener();

		this.initVideo();

		// setTimeout(() => {
		// this.showComposeBtn();
			
		// }, 5000);

	},

	setCurTipAudioUrl(url) {

		this.curTipAudioUrl = url;
	},


	gameStart() {

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

		this.setCurTipAudioUrl(this.data.begin_audio_url)

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

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

			if (this.isDestroy) {
				return;
			}

			this.playAni('normal', 0);
			this.showOneRecordItem(this.recordItemArr[0]);
			this.showPlayBtn();
			this.canTouch = true;
			console.log("启用点击 - 1")
		})



		// this.showStar(this.recordItemArr[0], 2);
		// setTimeout(() => {

		// 	this.showComposeBtn();
		// }, 3000);
	},

	stopCatTip() {
		this.playAni('normal', -1);
		cc.audioEngine.stopAll();

		// 有的音频停止后需要处理是否启动点击
		if(this.needEnableTouchOnStopAudio) {
			this.needEnableTouchOnStopAudio = false;
			this.canTouch = true;
		}
	},

	showPlayBtn() {
		const arr = this.recordItemArr;
		for (let i = 0; i < arr.length; i++) {
			this.addBtnAppearAnim(arr[i].playBtnNode);
		}
	},

	showRecordBtn() {
		const arr = this.recordItemArr;
		for (let i = 0; i < arr.length; i++) {
			this.addBtnAppearAnim(arr[i].recordBtnNode);
		}
	},

	showListenBtn(item) {
		this.addBtnAppearAnim(item.listenBtn);
	},


	addBtnAppearAnim(btn) {
		btn.active = true;
		btn.scale = 0;
		cc.tween(btn)
			.to(1, { scale: 1 }, { easing: 'elasticOut' })
			.start();
	},


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

		const house = cc.find("Canvas/house");
		// house.x = -this.canvas.width / 8 + 10 * this._mapScaleMin;

		
		this.addBgMask(house);
	},

	addBgMask(house) {

		const bgNode = cc.find("Canvas/bgNode");

		const pos = exchangeNodePos(bgNode, house);
		const maskNode = new cc.Node();
		maskNode.x = pos.x;
		maskNode.y = pos.y;
		bgNode.addChild(maskNode);

		const maskSprNode = cc.find("Canvas/house/video_mask");
		const maskSpr = maskSprNode.getComponent(cc.Sprite);
		maskNode.width = maskSprNode.width;
		maskNode.height = maskSprNode.height;


		const bgSpr = cc.find("Canvas/bg");
		const pos2 = exchangeNodePos(maskNode, bgSpr);
		bgSpr.x = pos2.x;
		bgSpr.y = pos2.y;
		bgSpr.parent = maskNode;

		const mask = maskNode.addComponent(cc.Mask);
		mask.type = cc.Mask.Type.IMAGE_STENCIL;
		mask.spriteFrame = maskSpr.spriteFrame;
		mask.alphaThreshold = 0.1;
		mask.inverted = true;

		// maskNode.active = false;

	},

	initCatListener() {

		const cat = cc.find('Canvas/catFrame/cat');
		const dragonDisplay = cat.getComponent(dragonBones.ArmatureDisplay);
		this.playAni('normal', -1);

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

			if (dragonDisplay.animationName != 'normal') {
				return;
			}

			if (this.curVideoPlayer?.isPlaying()) {
				return;
			}

			dragonDisplay.playAnimation('begin', -1);
			playAudioByUrl(this.curTipAudioUrl, () => {

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

		})
	},

	playAni(name, times = 1) {

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


	recordItemArr: null,
	initRecordItemList() {

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

		const listArr = this.data.lrcData?.lyrics;
		if (!listArr) {
			return;
		}

		this.listData = [];
		for (let i = 0; i < listArr.length; i++) {
			if (listArr[i].textArr?.length) {
				this.listData.push(listArr[i]);
			}
		}


		const item = getSprNode('bg_di');

		const topH = this.canvas.height * 0.01;

		const svNode = cc.find('Canvas/recordItemList');
		svNode.width = item.width;
		svNode.height = this.canvas.height - topH
		svNode.y = -topH / 2 // 100 * this._mapScaleMin;


		svNode.x = this.canvas.width / 4 + 10 * this._mapScaleMin;// - (item.width / 2 + 10) * this._mapScaleMin;
		svNode.scale = this._mapScaleMin;


		const maskView = cc.find('Canvas/recordItemList/view');
		maskView.width = svNode.width;
		maskView.height = svNode.height;

		const sv = svNode.getComponent(cc.ScrollView);

		this.recordItemArr = [];

		const baseX = 0 //this.canvas.width/2 - 300 * this._mapScaleMin;
		const baseY = -item.height / 2; // item.height / 2 // this.canvas.height / 2 - 200 * this._mapScaleMin;
		const disH = item.height + 20;

		let h = 0;
		let count = 0;
		for (let i = 0; i < listArr.length; i++) {

			if (!listArr[i].textArr?.length) {
				continue;
			}
			const recordItem = this.getRecordItem(listArr[i], count, i);
			recordItem.x = baseX;
			recordItem.y = baseY - count * disH;
			sv.content.addChild(recordItem);

			this.recordItemArr.push(recordItem);

			if (i == 0) {
				this.svTopOff = recordItem.y;
			}
			if (i == 1) {
				this.svCenterOff = recordItem.y;
			}

			count++;
			h += disH;


		}

		// return;

		sv.content.height = h + disH;
		this.sv = sv;
		this.hideAllRecordItem();
		this.hideAllRecordBtn();
		
	},

	getRecordItem(data, count, index) {
		const item = getSprNode('bg_di');

		this.setRecordTimeData(item, data, index);
		this.setRecordNumLabel(item, count);
		this.setRecordTextLabel(item, data);
		this.setRecordProgress(item)
		this.setRecordBtn(item);
		this.setRecordIcon(item);
		this.setRecordListener(item);

		item.data = data;
		item.text = data.data;
		item.index = index;

		return item;
	},

	setRecordListener(item) {

		const maskSpr = getSprNode('bg_di_mask');
		maskSpr.addComponent(cc.BlockInputEvents);
		maskSpr.opacity = 50;
		// maskSpr.y = 2.8;
		item.addChild(maskSpr, 5);
		maskSpr.active = false;

		const chooseSpr = getSprNode('record_item_choose');
		chooseSpr.y = -17;
		// item.addChild(chooseSpr);
		chooseSpr.active = false;

		item.maskSpr = maskSpr;
		item.chooseSpr = chooseSpr;


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

			if (!this.canTouch) {
				console.log("点击已经禁止 - 1")
				return;
			}

			this.hideAllRecordItem();
			this.showOneRecordItem(item);

			let targetY = this.svCenterOff //0;
			// if (item.index != 0) {
			// 	targetY = this.svCenterOff;
			// }
			console.log('targetY : ', targetY);
			this.sv.scrollToOffset(cc.v2(0, - item.y - item.height / 2 * 3), 0.5);
		})
	},

	hideAllRecordItem() {
		const arr = this.recordItemArr;
		for (let i = 0; i < arr.length; i++) {
			arr[i].maskSpr.active = true;
			arr[i].chooseSpr.active = false;

		}
	},

	showOneRecordItem(item) {
		item.maskSpr.active = false;
		item.chooseSpr.active = true;
	},


	setRecordNumLabel(item, index) {
		const numLabel = this.getLabel()
		numLabel.string = (index + 1) + '/' + this.listData.length;
		numLabel.fontSize = 44;
		const numLabelNode = numLabel.node;
		// numLabelNode.color = cc.Color.WHITE;
		numLabelNode.color = cc.Color.fromHEX(new cc.Color(), "#a8acaf");
		numLabelNode.x = -item.width / 2 + 97;
		numLabelNode.y = item.height / 2 - 32;
		item.addChild(numLabelNode);
	},

	setRecordTextLabel(item, data) {
		// 使用富文本
		// const textLabel = this.getRichText();
		// textLabel.string = "";
		
		// this.getRichTextString(data, textLabel, (str) => {
		// 	textLabel.string = str
		// });

		// // data.data //+ data.data + data.data + data.data + data.data + data.data;
		// textLabel.fontSize = 40;
		// textLabel.maxWidth = item.width * 0.9;
		// const textLabelNode = textLabel.node;
		// textLabelNode.anchorY = 1;
		// textLabelNode.color = cc.Color.BLACK;
		// textLabelNode.y = item.height / 2 - 48;
		// item.addChild(textLabelNode);

		// 使用Label和图片代替富文本
		const tempContentNode = cc.find("Canvas/res/img/record_content");
		const node = new cc.instantiate(tempContentNode);
		node.x = -item.width / 2;
		node.y = item.height / 2 - 56
		item.addChild(node);
		this.getItemContent(data, node);
	},

	async getItemContent(data, parentNode) {
		const loadSprFrame = (url, node, height=40) => {
			return new Promise((resovle, reject) => {
				getSpriteFrimeByUrl(url, (sprFrame) => {
					if (this.isDestroy) {
						return;
					}
					let relWidth = sprFrame.getRect().width;
					let relHeight = sprFrame.getRect().height;
					
					// 默认图片高度40
					let sy = height / relHeight;
					node.width = sy * relWidth;
					node.height = sy * relHeight;
					node.getComponent(cc.Sprite).spriteFrame = sprFrame;
					resovle({width: relWidth * sy, height: relHeight * sy})
				})
			})
		}

		// 检查字符串所有分割可能性
		const checkSplit = (text) => {
			let result = [];
			let reg = /\s/g;
			let max = 30;
			while(reg.test(text) && max>0) {
				result.push({
					pre: text.substr(0, reg.lastIndex),
					last: text.substr(reg.lastIndex)
				});
				max--;
			}
			result.push({pre: text, last: ""});
			result.reverse();
			return result
		}

		// 找到基准文字和图片的模板
		const templateIcon = cc.find("Canvas/res/recIcon");
		const templateText = cc.find("Canvas/res/recText");
		// 左右两边的边距
		const paddingLeft = 50;
		const paddingRight = 50;
		const paddingTop = 20;

		const textArr = data.textArr;
		let x = 0 + paddingLeft;
		let y = 0 - paddingTop;
		const st = Math.random();
		const smallFont = data.smallFont?true:false;
		// const smallFont = true;

		for (let i = 0; i < textArr.length; i++) {
			let node = null;
			if (textArr[i].isIcon) {
				// 如果是图标
				node = cc.instantiate(templateIcon);
				node.x = x;
				node.y = y;
				const size = await loadSprFrame(textArr[i].url, node, smallFont?32:40)				
				x += size.width; // 看一下结束x坐标进行累加

				// 如果x坐标超出范围则进行换行操作
				if(x >= (582 - paddingLeft - paddingRight)) {
					x = 0 + paddingLeft;
					// y -= smallFont?32:40;
					y -= smallFont?50:60;

					node.x = x;
					node.y = y;
					x += size.width;
				}
				parentNode.addChild(node);
			} else if (!textArr[i].isHidden) {
				// 如果是文字
				// 将文字按照空格进行拆分
				const texts = checkSplit(textArr[i].data);
				let breakLine = false;
				let letterTest = /[A-Za-z]+/;
				let smallLetterTest = /[A-Zbdfhijklt]+/;
				let maxLen = texts.length-1;

				texts.some((textObj, index)=>{					
					node = cc.instantiate(templateText);
					node.x = x;
					node.y = y;
					node.getComponent(cc.Label).string = textObj.pre;
					node.getComponent(cc.Label).fontSize = smallFont?36:44;
					// 如果是非字母字符，比如符号，更改字符模式，否则对齐方式会有问题
					if(!letterTest.test(textObj.pre)) {
						node.getComponent(cc.Label).cacheMode = 0;
						node.y += smallFont?18:10;
					}

					// 强制更新文字渲染，获取字符宽度
					node.getComponent(cc.Label)._forceUpdateRenderData();
					x += node.width;

					// 如果是以空格结尾 需要补充空格距离，因为在计算宽度时，结尾空格会被忽略
					if(textObj.pre.endsWith(" ")) {
						x += smallFont?10:15;
					}

					// 如果是字母，并且是mnopq这种段字母，则修正y坐标使之与其他label对齐
					if(letterTest.test(textObj.pre) && !smallLetterTest.test(textObj.pre)) {
						node.y -= smallFont?5.6:7;
					}

					// 判断x坐标是否超出显示区域，超出了就尝试下一种换行组合
					if(x >= (582 - paddingLeft - paddingRight)) {
						x -= node.width;
						if(textObj.pre.endsWith(" ")) {
							x -= smallFont?10:15;
						}
						breakLine = true;

						if(maxLen == index) {
							// 如果是最后一种可能性，则直接换行显示
							x = 0 + paddingLeft;
							y -= smallFont?36:44;
							// 添加第二行文字，逻辑和第一行文字类似，默认第二段文字不存在换行逻辑，所以直接显示。
							node = cc.instantiate(templateText);
							node.x = x;
							node.y = y;
							const textAll = textObj.pre + textObj.last;
							node.getComponent(cc.Label).string = textAll;
							node.getComponent(cc.Label).fontSize = smallFont?36:44;
							if(!letterTest.test(textAll)) {
								node.getComponent(cc.Label).cacheMode = 0;
								node.y += smallFont?18:10
							}
							node.getComponent(cc.Label)._forceUpdateRenderData()
							x += node.width;

							// 如果是以空格结尾 需要补充空格距离，因为在计算宽度时，结尾空格会被忽略
							if(textAll.endsWith(" ")) {
								x += smallFont?10:15;
							}

							// 如果是字母，并且是mnopq这种段字母，则修正y坐标使之与其他label对齐
							if(letterTest.test(textAll) && !smallLetterTest.test(textAll)) {
								node.y -= smallFont?5.6:7;
							}
							parentNode.addChild(node);
						}

						return false;
					}

					// 如果没有超出，则保留当前字符，添加父节点
					parentNode.addChild(node);
					
					// 如果是需要换行，则第二段文字进行换行操作
					if(breakLine) {
						x = 0 + paddingLeft;
						y -= smallFont?32:40;
					}
					
					// 如果第二行文字为空，则不执行任何操作
					if(textObj.last == "") {
						return true;
					}

					// 添加第二行文字，逻辑和第一行文字类似，默认第二段文字不存在换行逻辑，所以直接显示。
					node = cc.instantiate(templateText);
					node.x = x;
					node.y = y;
					node.getComponent(cc.Label).string = textObj.last;
					node.getComponent(cc.Label).fontSize = smallFont?32:40;
					if(!letterTest.test(textObj.last)) {
						node.getComponent(cc.Label).cacheMode = 0;
						node.y += smallFont?18:10
					}
					node.getComponent(cc.Label)._forceUpdateRenderData()
					x += node.width;

					// 如果是以空格结尾 需要补充空格距离，因为在计算宽度时，结尾空格会被忽略
					if(textObj.pre.endsWith(" ")) {
						x += smallFont?12:15;
					}

					// 如果是字母，并且是mnopq这种段字母，则修正y坐标使之与其他label对齐
					if(letterTest.test(textObj.last) && !smallLetterTest.test(textObj.last)) {
						node.y -= smallFont?5.6:7;
					}
					parentNode.addChild(node);
					return true;
				})
			}
		}
	},

	getRichTextString(data, richText, cb) {

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

		const textArr = data.textArr;
		const iconData = {};
		for (let i = 0; i < textArr.length; i++) {

			if (textArr[i].isIcon) {
				const key = 'icon_' + i;
				iconData[key] = { url: textArr[i].url };
			}
		}

		let count = 0;
		const keys = Object.keys(iconData);
		const len = keys.length;

		const loadSprFrame = () => {

			if (count < len) {

				const key = keys[count];
				const url = iconData[key].url;
				getSpriteFrimeByUrl(url, (sprFrame) => {

					if (this.isDestroy) {
						return;
					}

					iconData[key]['sf'] = sprFrame;
					count++;

					loadSprFrame();
				})

			} else {
				setRchiTextAtlas();
			}
		}

		const setRchiTextAtlas = () => {

			const atlas = new cc.SpriteAtlas();
			for (let i = 0; i < textArr.length; i++) {
				if (textArr[i].isIcon) {
					const key = 'icon_' + i;
					atlas['_spriteFrames'][key] = iconData[key].sf;
				}
			}

			richText.imageAtlas = atlas;

			let itemString = '';
			for (let i = 0; i < textArr.length; i++) {
				let subStr = '';
				if (textArr[i].isIcon) {
					const key = 'icon_' + i;
					subStr = `<img src=\'icon_${i}\'/>`

					console.log('url~ ', iconData[key].url)
				} else if (!textArr[i].isHidden) {
					subStr = textArr[i].data;
				}

				itemString += subStr;
			}

			cb(itemString);
		}

		loadSprFrame();
	},

	setRecordProgress(item) {

		const progress = this.getPrefab('progress');
		progress.x = -item.width / 2 + 40;
		progress.y = -item.height / 2 + 40;
		item.addChild(progress);
		item.progressComp = progress.getComponent(cc.ProgressBar);
		item.progressComp.progress = 0;
		// item.progressJs = progress.getComponent('OP_06_3_myProgressScript');

		const timeLabel = this.getLabel();
		timeLabel.fontSize = 30;
		timeLabel.string = Number(formatTime('s.S', new Date(item.duration * 1000))) + 's';
		item.progressLabel = timeLabel;

		const timeLabelNode = timeLabel.node;
		timeLabelNode.anchorX = 0;
		timeLabelNode.color = cc.Color.fromHEX(new cc.Color(), "#4e6193")
		timeLabelNode.x = progress.x + progress.width + 20;
		timeLabelNode.y = progress.y + 7;
		item.addChild(timeLabelNode);
	},

	curRecordItem: null,
	setRecordBtn(item) {

		const playBtnNode = new cc.Node();
		playBtnNode.x = item.width / 2 - 300;
		playBtnNode.y = -item.height / 2 + 10;
		item.addChild(playBtnNode);
		playBtnNode.active = false;

		const playBtn = getSprNode('btn_play');
		const stopBtn = getSprNode('btn_stop');
		playBtnNode.addChild(playBtn);
		playBtnNode.addChild(stopBtn);
		stopBtn.active = false;

		playBtnNode.width = playBtn.width;
		playBtnNode.height = playBtn.height;

		const recordBtnNode = getSprNode('btn_record');
		recordBtnNode.x = playBtnNode.x + 110;
		recordBtnNode.y = playBtnNode.y;
		item.addChild(recordBtnNode);

		const recordIcon = getSprNode('icon_record_normal');
		recordBtnNode.addChild(recordIcon);

		const recordAnim = getSprNode('icon_recording');

		// const recordAnim = this.getAnim('record');

		// recordAnim.scale = 0.8;
		// recordAnim.x = -0.1;
		recordAnim.y = 3.5;

		// const anim = recordAnim.getComponent(cc.Animation);
		// anim.play();
		recordBtnNode.addChild(recordAnim);
		recordAnim.active = false;



		const listenBtn = getSprNode('btn_listen');
		listenBtn.x = recordBtnNode.x + 110;
		listenBtn.y = recordBtnNode.y;

		item.addChild(listenBtn);


		item.playIcon = playBtn;
		item.pauseIcon = stopBtn;
		item.recordEndIcon = recordIcon;
		item.recordStartIcon = recordAnim;
		// item.listenBtn = listenBtn;
		item.listenBtn = playBtnNode;

		this.addPlayBtnListener(listenBtn, item);
		this.addRecordBtnListener(recordBtnNode, item);
		this.addListenBtnListener(playBtnNode, item);
	},

	addPlayBtnListener(playBtnNode, item) {

		item.playBtnNode = playBtnNode;

		playBtnNode.on('touchstart', () => {

			if (!this.canTouch) {
				console.log("点击已经禁止 - 2")
				return;
			}

			this.canTouch = false;
			console.log("禁止点击 - 2")
			// playBtnNode.active = false;
			playBtnNode.opacity = 0;
			this.hideBtn = playBtnNode;
			// if (this.curVideoPlayer?.isPlaying()) {

			// 	this.pauseVideo();
			// 	this.refreshPlayBtnState(this.curRecordItem);

			// 	return;
			// }

			if (this.curRecordItem == item) {
				this.isMute = false;
				this.playVideo();
				this.refreshPlayBtnState(this.curRecordItem);

				return;
			}

			// this.refreshPlayBtnState(item);


			this.curRecordItem = item;

			this.videoPlayer.currentTime = Math.round( item.startTime  * 100) / 100;
			this.muteVideoPlayer.currentTime = Math.round( item.startTime * 100) / 100;
			this.videoEndTime = item.endTime;


			this.isMute = false;
			delayCall(0.1, () => {
				this.playVideo();
			})

		})
	},

	addRecordBtnListener(recordBtnNode, item) {

		item.recordBtnNode = recordBtnNode;

		recordBtnNode.on('touchstart', () => {

			if (!this.canTouch) {
				console.log("点击已经禁止 - 4")
				return;
			}

			if (this.isRecord) {
				return;
			}


			if (this.curVideoPlayer?.isPlaying()) {

				this.pauseVideo();
				this.refreshPlayBtnState(this.curRecordItem);

				return;
			}

			// if (this.curRecordItem == item) {
			// 	// this.playVideo();
			// 	// this.refreshPlayBtnState(this.curRecordItem);

			// 	return;
			// }

			this.isRecord = true;
			this.refreshRecordBtnState(item);


			this.curRecordItem = item;

			this.videoPlayer.currentTime = Math.round( item.startTime  * 100) / 100;
			this.muteVideoPlayer.currentTime = Math.round( item.startTime * 100) / 100;
			this.videoEndTime = item.endTime;

			// this.videoPlayer.mute = true;
			this.isMute = true;
			delayCall(0.1, () => {
				this.playVideo();
			})

			// this.videoPlayer.play()
			// this.videoPlayer.mute = true;

			const text = this.getTestText(item);
			console.log('text: ', text);
			this.serverStartTest(text || 'ant apple alligator ax');


			console.log('---- this.videoPlayer.currentTime: ', this.videoPlayer.currentTime);
			console.log('---- this.muteVideoPlayer.currentTime: ', this.muteVideoPlayer.currentTime);
		})
		// startTest
		// stopTest
	},

	getTestText(item) {
		let text = '';
		const textArr = item.data?.textArr;
		for (let i = 0; i < textArr.length; i++) {
			if (textArr[i].data) {
				text += textArr[i].data;
			}
		}
		return text;
	},

	addListenBtnListener(listenBtn, item) {

		listenBtn.on('touchstart', () => {

			if (!this.canTouch) {
				console.log("点击已经禁止 - 3")
				return;
			}

			if (this.curVideoPlayer?.isPlaying()) {

				this.pauseVideo();
				return;
			}

			if (this.curRecordItem == item) {

				// this.isMute = false;
				// this.playVideo();
				// this.refreshPlayBtnState(this.curRecordItem);

				return;
			}


			// listenBtn.active = false;
			listenBtn.opacity = 0;
			this.hideBtn = listenBtn;

			// this.refreshPlayBtnState(item);


			this.curRecordItem = item;

			this.videoPlayer.currentTime = Math.round( item.startTime  * 100) / 100;
			this.muteVideoPlayer.currentTime = Math.round( item.startTime * 100) / 100;
			this.videoEndTime = item.endTime;

			this.isMute = true;
			
			delayCall(0.1, () => {
				this.playVideo();
				this.playSubUserRecord(item);
			})






		})
	},

	playSubUserRecord(item) {
		const audioUrl = item.audioUrl;
		const clip = this.audioObj[audioUrl];

		this.canTouch = false;
		console.log("禁止点击 - 2")
		playAudio(clip, () => {
			this.canTouch = true;
			console.log("启用点击 - 2")
		});
	},


	serverStartTest(text) {

		console.log(' in serverStartTest: ', text);
		const cw = window?.courseware
		if (cw) {
			cw.startTest(text);
			this.canTouch = false;

		}
		this.addMask();
	},

	maskNode: null,
	addMask() {

		if (!this.maskNode) {

			const node = new cc.Node();
			node.width = this.canvas.width;
			node.height = this.canvas.height;
			this.canvas.addChild(node, 200);

			node.addComponent(cc.BlockInputEvents);
			this.maskNode = node;
		}

	},

	hideMask() {

		if (!this.maskNode) {
			return;
		}
		this.maskNode.active = false;
		this.canTouch = true;

	},

	serverStopTest(item) {

		// const tmpData = {
		// 	refText: 'ant apple alligator ax.',
		// 	audio_url: 'https://staging-teach.cdn.ireadabc.com/f01f0d63c0c4c0dd1203a6202ecaf34b.wav',
		// 	result:{
		// 		overall: 49,
		// 	}
		// }

		// this.setRecordItemAudio(tmpData, item);
		// return;

		const cw = window?.courseware
		if (cw) {
			cw.stopTest(data => {
				console.log('stopTest data: ', data);

				if (data && typeof (data) == 'string') {
					console.log(JSON.parse(data));
					data = JSON.parse(data)
				}

				this.setRecordItemAudio(data, item);

			});
		}
	},


	setRecordItemAudio(data, item) {

		// this.hideMask();
		if (data.errCode) {
			this.hideMask();
			return;
		}

		const audioUrl = data.audioUrl;

		// 只做预加载用一下
		if (!audioUrl) {
			this.hideMask();
			return;
		}

		item.audioUrl = audioUrl;

		const overall = data.result?.overall;
		const integrity = data.result?.integrity;
		const score = integrity * 0.4 + overall * 0.6; //data.result?.overall;

		console.log('overall is : ', overall);
		console.log('integrity is : ', integrity);
		console.log('score is : ', score);


		// const score = data.result?.overall;

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

		// if (score >= 60) {
		// 	this.showGoodjob(item);
		// } else {
		// 	this.showTryagain(item);
		// }

		this.isStarShowEnd = false;
		this.isUserAudioDownLoad = false;

		let count = 0;
		if (score >= 85) {
			count = 3;
		} else if (score >= 75) {
			count = 2;
		} else if (score >= 60) {
			count = 1;
		}

		
		item.starCount = count;
		this.showStar(item, count);
		this.showListenBtn(item);



	
		this.getAudioClipByUrl(audioUrl, (clip) => {
			console.log(' in getAudioClipByUrl audioUrl:', audioUrl);

			this.audioObj[audioUrl] = clip;

			this.isUserAudioDownLoad = true;
			this.checkCanCompose();
			// this.showListenBtn(item);

			this.hideMask();
		})


	},

	checkCanCompose() {

		if (!this.isStarShowEnd || !this.isUserAudioDownLoad) {
			return;
		}

		for (let i = 0; i < this.recordItemArr.length; i++) {
			const audioUrl = this.recordItemArr[i].audioUrl;

			console.log('i: ', i);
			console.log('audioUrl: ', audioUrl);
			console.log('this.audioObj[audioUrl]: ', this.audioObj[audioUrl]);
			console.log('this.recordItemArr[i].startTime: ', this.recordItemArr[i].startTime);
			console.log('this.recordItemArr[i].endTime: ', this.recordItemArr[i].endTime);

			if (!audioUrl || !this.audioObj[audioUrl]) {
				return;
			}
		}

		this.showComposeBtn();
	},


	showComposeBtn() {

		if (!this.composeBtn.active) {
			this.composeBtn.active = true;
			this.composeBtn.parent.active = true;

			const videoBg = cc.find("Canvas/hose/video_bg")

			this.addBtnAppearAnim(this.composeBtn);
			

			this.playAni('begin', 0);
			this.setCurTipAudioUrl(this.data.compose_audio_url);
			this.canTouch = false;
			console.log("禁止点击 - 3")
			playAudioByUrl(this.data.compose_audio_url, () => {
				this.playAni('normal', 0);
				this.canTouch = true;
				console.log("启用点击 - 3")
			});
		}
	},



	showStar(item, count) {
		if (!item.starLayer) {
			this.initItemStarLayer(item);
		}

		const starShowEnd = () => {
			this.isStarShowEnd = true;
			this.checkCanCompose();
		}

		const callback = () => {


			if (this.isDestroy) {
				return;
			}

			if (count < 3 && !this.isShowFightAudio) {
				this.isShowFightAudio = true;
				this.canTouch = false;
				console.log("禁止点击 - 4")
				this.playAni('begin', 0);
				this.needEnableTouchOnStopAudio = true;
				playAudioByUrl(this.data.fight_audio_url, () => {
					this.playAni('normal', 0);
					this.needEnableTouchOnStopAudio = false;

					if (this.isDestroy) {
						return;
					}

					this.canTouch = true;
					console.log("启用点击 - 4")
					starShowEnd();
				})
			} else {
				starShowEnd();
			}
		}

		if (count >= 2) {
			this.playAni('begin', 0);
			playAudio(this.audioGoodjob.clip, ()=>{
				this.playAni('normal', 0);
				callback()
			});
		} else {
			this.playAni('begin', 0);
			playAudio(this.audioTryagain.clip, ()=>{
				this.playAni('normal', 0);
				callback()
			});
		}



		const starArr = item.starArr;
		for (let i = 0; i < 3; i++) {

			const star = starArr[i];
			if (i > count - 1) {
				star.active = false;
				continue;
			}

			star.active = true;
			star.scale = 0;
			const time = 1;
			cc.tween(star)
				.delay(i * 0.25)
				.to(time, { scale: 1 }, { easing: 'elasticOut' })
				.start()
		}
	},

	initItemStarLayer(item) {
		const starLayer = new cc.Node();
		starLayer.x = item.width / 2 - 150;
		starLayer.y = item.height / 2 - 25;
		const starArr = [];
		for (let i = 0; i < 3; i++) {
			const starBg = getSprNode('icon_star_bg');
			starLayer.addChild(starBg);

			const star = getSprNode('icon_star');
			starBg.addChild(star);
			star.active = false;
			starArr.push(star);

			starBg.x = i * 55;
		}
		item.addChild(starLayer, 10);
		item.starLayer = starLayer;
		item.starArr = starArr;
	},

	showGoodjob(item) {
		// item.iconGoodjob.active = true;
		// item.iconTryagain.active = false;


	},

	showTryagain(item) {
		// item.iconGoodjob.active = false;
		// item.iconTryagain.active = true;
	},

	getAudioClipByUrl(audioUrl, cb) {

		if (audioUrl) {
			cc.assetManager.loadRemote(audioUrl, (err, audioClip) => {
				cb && cb(audioClip);
				// playAudio(audioClip, cb);
			});
		}

	},

	refreshRecordBtnState(item) {

		if (this.isRecord) {
			item.recordEndIcon.active = false;
			item.recordStartIcon.active = true;
		} else {
			item.recordEndIcon.active = true;
			item.recordStartIcon.active = false;
		}

	},


	refreshPlayBtnState(item) {

		if (!item) {
			return;
		}

		setTimeout(_ => {
			if (this.videoPlayer.isPlaying()) {
				item.playIcon.active = false;
				item.pauseIcon.active = true;
			} else {
				item.playIcon.active = true;
				item.pauseIcon.active = false;
			}
		}, 1)

	},

	setRecordIcon(item) {

		const iconNode = new cc.Node();
		item.addChild(iconNode);

		const iconGoodjob = getSprNode('icon_goodjob');
		const iconTryagain = getSprNode('icon_tryagain');
		iconGoodjob.active = false;
		iconTryagain.active = false;


		iconNode.addChild(iconGoodjob);
		iconNode.addChild(iconTryagain);

		iconNode.x = item.width / 2 - iconGoodjob.width / 2;
		iconNode.y = item.height / 2 - 30;

		item.iconGoodjob = iconGoodjob;
		item.iconTryagain = iconTryagain;
	},

	setRecordTimeData(item, data, index) {

		const lyrics = this.data.lrcData.lyrics;

		const startTime = data.time;
		const endTime = lyrics[index + 1]?.time || this.videoPlayer.getDuration();
		const duration = endTime - startTime;

		if (startTime < 0) {
			console.log('startTime < 0')
		}
		if (duration < 0) {
			console.log('duration < 0');
		}

		item.startTime = Math.round(startTime * 100) / 100;
		item.endTime = Math.round(endTime * 100) / 100;
		item.duration = Math.round(duration * 100) / 100;

		console.log('startTime: ', startTime);
		console.log('endTime: ', endTime);
		console.log('duration: ', duration);
	},

	getPrefab(resName) {
		const prefab = cc.find('Canvas/res/prefab/' + resName)
		const newPrefab = cc.instantiate(prefab);
		newPrefab.parent = null;
		return newPrefab;
	},



	initVideo() {

		this.initVideoPlayer();
		this.initMuteVideoPlayer();
		this.initComposeBtn();
	},

	videoPlayer: null,
	videoNode: null,
	initVideoPlayer() {
		const videoNode = cc.find("Canvas/house/video");
		this.videoNode = videoNode;
		this.videoNode.baseX = videoNode.x;
		// videoNode.active = true;
		const vPlayer = cc.find("Canvas/house/video/player").getComponent(cc.VideoPlayer);
		vPlayer.remoteURL = this.data.lrcData.video_url;
		vPlayer.stayOnBottom = true;
		this.videoPlayer = vPlayer;
		this.videoCtrlPanel = cc.find('Canvas/house/videoCtrl');
		this.videoCtrlJs = this.videoCtrlPanel.getComponent('kyxq_qpy_videoCtrlJs');
		this.videoCtrlPanel.active = false;

		this.curTimeLabel = cc.find('Canvas/house/videoCtrl/curTime').getComponent(cc.Label);

		this.videoCtrlPanel.on('video_btn_click', (data) => {
			console.log(' in video_btn_click: ', data);
			if (data.isPlaying) {

				this.isMute = true;
				this.playVideo();
			} else {
				this.pauseVideo();
			}
		})


		vPlayer.node.on('ready-to-play', () => {

			console.log(' in ready-to-play')
			if (this.isDestroy) {
				return;
			}
			vPlayer.play();
			checkIsPlaying();
		})

		const checkIsPlaying = () => {

			delayCall(0.001, () => {

				console.log(' in checkIsPlaying 1')

				if (this.isDestroy) {
					return;
				}

				console.log('a 1');
				if (vPlayer.currentTime) {

					console.log('a 2');

					vPlayer.pause();
					this.isVideoPlayerReady = true;
					this.checkCanShowRecordList();

				} else {
					checkIsPlaying();
				}
			})
		}



		vPlayer.node.on('completed', () => {

			console.log(' in completed!!!!')
			this.updateRecordEnd();

		})



	},


	firstVideoPlayEnd() {
		this.canTouch = false;
		console.log("禁止点击 - 5")
		this.showRecordBtn();

		this.playAni('begin', 0)
		//播放引导音频2

		this.setCurTipAudioUrl(this.data.record_audio_url);

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

			this.playAni('normal', 0);

			this.canTouch = true;
			console.log("启用点击 - 5")
		})
	},

	muteVideoPlayer: null,
	muteVideoNode: null,
	initMuteVideoPlayer() {
		const videoNode = cc.find("Canvas/house/video");
		const muteVideoNode = cc.instantiate(videoNode);
		muteVideoNode.parent = videoNode.parent;
		// muteVideoNode.active = true
		muteVideoNode.zIndex = 10;

		this.muteVideoNode = muteVideoNode;

		this.muteVideoNode.baseX = muteVideoNode.x;



		let vPlayer = cc.find("player", muteVideoNode).getComponent(cc.VideoPlayer);
		vPlayer.remoteURL = this.data.mute_video_url;
		this.muteVideoPlayer = vPlayer;



		vPlayer.node.on('ready-to-play', () => {

			console.log(' in ready-to-play 2')

			if (this.isDestroy) {
				return;
			}
			vPlayer.play();
			checkIsPlaying();
		})

		const checkIsPlaying = () => {

			delayCall(0.001, () => {

				console.log(' in checkIsPlaying 3')


				if (this.isDestroy) {
					return;
				}
				if (vPlayer.currentTime) {
					vPlayer.pause();
					this.isMuteVideoPlayerReady = true;
					this.checkCanShowRecordList();
					// muteVideoNode.active = false;
				} else {
					checkIsPlaying();
				}
			})
		}

		vPlayer.node.on('completed', () => {

			console.log(' in completed!!!!')
			this.updateRecordEnd();
		})





		const songVideoNode = cc.instantiate(videoNode);
		songVideoNode.parent = videoNode.parent;
		// songVideoNode.active = true
		this.songVideoNode = songVideoNode;

		this.songVideoNode.baseX = songVideoNode.x;


		const localPos = this.songVideoNode.parent.convertToNodeSpaceAR(cc.v2(-this.canvas.width, 0));
		this.songVideoNode.x = localPos.x;


		const vPlayerSong = cc.find("player", songVideoNode).getComponent(cc.VideoPlayer);
		vPlayerSong.remoteURL = this.data.song_video_url;
		this.songVideoPlayer = vPlayerSong;



		vPlayerSong.node.on('ready-to-play', () => {

			console.log(' in ready-to-play 4')

			if (this.isDestroy) {
				return;
			}
			vPlayerSong.play();
			checkIsPlayingSong();
		})

		const checkIsPlayingSong = () => {

			delayCall(0.001, () => {

				console.log(' in checkIsPlaying 5')

				if (this.isDestroy) {
					return;
				}
				if (vPlayerSong.currentTime) {
					vPlayerSong.pause();
					console.log('aaabbb');
					this.isSongVideoPlayerReady = true;
					this.checkCanShowRecordList();
					// songVideoNode.active = false;

				} else {
					checkIsPlayingSong();
				}
			})
		}


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





		vPlayerSong.node.on('completed', () => {

			console.log(' in completed!!!!')
			this.videoPlayEnd();
			this.cleanRecordItemFlag();
		})

	},

	checkCanShowRecordList() {

		console.log(" in checkCanShowRecordList");

		if (!this.isVideoPlayerReady || !this.isMuteVideoPlayerReady || !this.isSongVideoPlayerReady) {
			return;
		}

		console.log(" in checkCanShowRecordList 2");


		// this.changeVideoParent();

		const totalTimeLabel = cc.find('Canvas/house/videoCtrl/totalTime').getComponent(cc.Label);
		const duration = this.videoPlayer.getDuration();
		totalTimeLabel.string = formatTime('mm:ss', new Date(duration * 1000));

		this.initRecordItemList();
		this.gameStart();
	},

	changeVideoParent() {

		let pos = exchangeNodePos(this.canvas, this.videoNode);
		this.videoNode.x = pos.x;
		this.videoNode.y = pos.y;
		this.videoNode.parent = this.canvas;

		pos = exchangeNodePos(this.canvas, this.muteVideoNode);
		this.muteVideoNode.x = pos.x;
		this.muteVideoNode.y = pos.y;
		this.muteVideoNode.parent = this.canvas;

		pos = exchangeNodePos(this.canvas, this.songVideoNode);
		this.songVideoNode.x = pos.x;
		this.songVideoNode.y = pos.y;
		this.songVideoNode.parent = this.canvas;
	},

	curVideoPlayer: null,
	playVideo() {


			
			this.stopCatTip();
			// this.videoNode.active = true;
			// this.muteVideoNode.active = true;

			if (this.isMute) {
				// setTimeout(() => {
				// this.videoNode.active = false;
				// this.muteVideoNode.active = true;

				this.videoNode.x = -this.canvas.width;
				this.muteVideoNode.x = this.muteVideoNode.baseX;
				// }, 1);

				// this.videoNode.active = false;
				// this.muteVideoNode.active = true;

				this.muteVideoPlayer.play();
				this.curVideoPlayer = this.muteVideoPlayer;
			} else {

				// setTimeout(() => {
				// this.videoNode.active = true;
				// this.muteVideoNode.active = false;
				this.videoNode.x = this.videoNode.baseX;
				this.muteVideoNode.x = -this.canvas.width;
				// }, 1);

				// this.videoNode.active = true;
				// this.muteVideoNode.active = false;

				this.videoPlayer.play();
				this.curVideoPlayer = this.videoPlayer;
			}

			console.log('	this.videoPlayer.currentTime:', this.videoPlayer.currentTime);
			console.log('	this.muteVideoPlayer.currentTime:', this.muteVideoPlayer.currentTime);

			if (this.curRecordAudioId) {
				cc.audioEngine.resumeEffect(this.curRecordAudioId);
			}


		

	},

	pauseVideo() {
		if (this.videoPlayer) {
			this.videoPlayer.pause();

		}
		if (this.muteVideoPlayer) {
			this.muteVideoPlayer.pause();
		}

		if (this.curVideoPlayer) {
			this.videoPlayer.currentTime = this.curVideoPlayer.currentTime;
			this.muteVideoPlayer.currentTime = this.curVideoPlayer.currentTime;
		}

		if (this.curRecordAudioId) {
			cc.audioEngine.pauseEffect(this.curRecordAudioId);
			this.cleanRecordItemFlag();
			this.curRecordClip = null;
		}



	},

	composeBtn: null,
	initComposeBtn() {
		this.composeBtn = cc.find('Canvas/house/composeNode/composeBtn');
		this.composeBtn.active = false;

		// const pos = exchangeNodePos(this.canvas, this.composeBtn);
		// this.composeBtn.x = pos.x;
		// this.composeBtn.y = pos.y;
		// this.composeBtn.parent = this.canvas;
		// this.composeBtn.zIndex = 15;

		this.composeBtn.on('touchstart', () => {
			if (!this.composeBtn.active) {
				return;
			}

			this.videoPlayer.currentTime = 0;
			this.muteVideoPlayer.currentTime = 0;
			this.songVideoPlayer.currentTime = 0;
			this.videoCtrlPanel.active = true;
			this.composeBtn.active = false;
			this.hideAllRecordBtn();



			// this.showRestart();
			this.changeVideoPlayer();

			this.videoCtrlJs.isPlaying = true;
			this.videoCtrlJs.playVideo();
		});
	},

	changeVideoPlayer() {
		this.muteVideoNode.active = false;
		this.songVideoNode.active = true;

		this.muteVideoNode.x = this.muteVideoNode.baseX;

		this.muteVideoNode = this.songVideoNode;
		this.muteVideoPlayer = this.songVideoPlayer;

	},


	showRestart() {

		this.setCurTipAudioUrl(this.data.finish_audio_url);

		const circle = getSprNode('bg_circle');
		circle.x = this.canvas.width / 4;
		this.canvas.addChild(circle, 5);

		cc.tween(circle)
			.set({ scale: 0.8, opacity: 255 })
			.to(2, { scale: 1.2, opacity: 0 })
			.union()
			.repeatForever()
			.start();


		const btn = getSprNode('btn_restart');
		this.canvas.addChild(btn, 6);
		btn.x = circle.x;

		circle.on('touchstart', () => {
			this.replay();
		})

	},

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

	hideAllRecordBtn() {
		for (let i = 0; i < this.recordItemArr.length; i++) {
			this.recordItemArr[i].playBtnNode.active = false;
			this.recordItemArr[i].recordBtnNode.active = false;
			this.recordItemArr[i].listenBtn.active = false;
		}
	},

	showVideoPlayBtn() {
		this.videoPlayBtn.active = true;
	},


	hideVideoPlayBtn() {
		this.videoPlayBtn.active = false;
	},


	videoPlayEnd() {
		this.videoCtrlPanel.emit('video_play_end');
		this.curRecordClip = null;
		this.curRecordAudioId = null;

		if (this.isFirstMuteVideoPlayEnd) {
			this.isFirstMuteVideoPlayEnd = false;

			this.playAni('begin', 0);
			this.canTouch = false;
			console.log("禁止点击 - 6")
			playAudioByUrl(this.data.finish_audio_url, () => {

				this.playAni('normal', 0);
				this.canTouch = true;
				console.log("启用点击 - 6")
				const data = this.getHomeworkData();
				console.log('data: ' , JSON.stringify(data));
				onHomeworkFinish(data);
				this.showRestart();
			})
		}
	},

	getHomeworkData() {

		const itemArr = [];
		let totalStar = 0;
		this.recordItemArr.forEach((it) => {
			itemArr.push({
				audio_url: it.audioUrl,
				star_count: it.starCount,
				startTime: it.startTime,
				endTime: it.endTime,
			})

			totalStar += it.starCount;
		});

		totalStar = Math.round(totalStar / this.recordItemArr.length);
		return {
			video_url: this.data.song_video_url,
			item_arr: itemArr,
			totalStar
		};
	},


	refreshVideoTimeLabel() {

		const currentTime = this.muteVideoPlayer.currentTime
		this.curTimeLabel.string = formatTime('mm:ss', new Date(currentTime * 1000));
	},

	refreshItemTimeLabel(item) {
		const currentTime = this.videoPlayer.currentTime
		this.curTimeLabel.string = formatTime('mm:ss', new Date(currentTime * 1000));
	},


	updateVideoStrip(force = false) {


		if (!this.muteVideoPlayer?.isPlaying()) {
			return;
		}

		if (!this.videoCtrlPanel.active) {
			return;
		}


		let percent;
		const duration = this.muteVideoPlayer.getDuration();
		if (!duration) {
			percent = 0;
		} else {
			percent = this.muteVideoPlayer.currentTime / duration;
		}

		if (this.videoCtrlJs) {
			this.videoCtrlJs.setProgress(percent);
		}
		this.refreshVideoTimeLabel();
		return;
	},

	lastPercent: null,
	lastTime: null,
	fakePrecent: null,
	updateRecordStrip() {

		if (!this.curVideoPlayer?.isPlaying()) {
			if (!this.curVideoPlayer) {
				// console.log('!this.curVideoPlayer');
			} else {
				// console.log('isPlaying: ', this.curVideoPlayer?.isPlaying());
			}
			this.lastPercent = 0;
			this.lastTime = -1;
			this.fakePrecent = 0;
			return;
		}

		if (!this.curRecordItem) {
			console.log('!this.curRecordItem');
			return;
		}

		let currentTime = this.curVideoPlayer.currentTime;
		const item = this.curRecordItem;
		// console.log('this.curVideoPlayer.currentTime: ', currentTime);
		// console.log('item.startTime: ', item.startTime);
		// console.log('item.duration: ', item.duration);

		let percent = (currentTime - item.startTime) / item.duration;

		if((currentTime - this.lastTime) == 0) {
			console.log("时间不变");
			this.fakePrecent += 0.001;
			percent = this.fakePrecent;
		}

		this.lastTime = currentTime;

		if (percent < 0) {
			percent = 0;
		}

		if (percent >= 1) {
			percent = 1;
			this.updateRecordEnd();
		}

		// 对比上一个进度，如果比之前进度小则不进行修改进度
		if(percent < this.lastPercent) {
			percent = this.lastPercent;
		} else {
			this.lastPercent = percent;
		}

		// console.log("percent: ", percent);
		if (item.progressJs) {
			item.progressJs.setProgress(percent);
		}
		if (item.progressComp) {
			item.progressComp.progress = percent;
		}

	},

	updateRecordEnd() {
		if (!this.curRecordItem) {
			return;
		}

		const item = this.curRecordItem;

		this.pauseVideo();
		this.curRecordItem = null;
		if (this.hideBtn) {
			this.hideBtn.opacity = 255;
			this.hideBtn = null;
		}

		if (this.isRecord) {
			this.isRecord = false;
			this.refreshRecordBtnState(item);
			this.serverStopTest(item);

		} else {

			this.canTouch = true;
			console.log("启用点击 - 7")
			this.refreshPlayBtnState(item);

			if (this.isFirstVideoPlayEnd) {
				this.isFirstVideoPlayEnd = false;

				this.firstVideoPlayEnd();
			}
		}
	},



	checkPlayRecord() {
		if (!this.videoCtrlPanel || !this.videoCtrlPanel.active) {
			return;
		}

		if (!this.muteVideoPlayer.isPlaying()) {
			return;
		}

		const currentTime = this.muteVideoPlayer.currentTime + 0.8;

		for (let i = this.recordItemArr.length - 1; i >= 0; i--) {

			const startTime = this.recordItemArr[i].startTime;
			const endTime = this.recordItemArr[i].endTime;
			if (startTime <= currentTime && currentTime < endTime && !this.recordItemArr[i].isPlayEnd) {

				const audioUrl = this.recordItemArr[i].audioUrl;
				const clip = this.audioObj[audioUrl];
				if (this.curRecordClip == clip) {
					return;
				}

				console.log('play record audioUrl: ', this.recordItemArr[i].audioUrl);
				console.log('play record text: ', this.recordItemArr[i].text);
				this.playRecordClip(this.recordItemArr[i], clip);

				return;
			}

		}
	},

	cleanRecordItemFlag() {

		for (let i = 0; i < this.recordItemArr.length; i++) {
			this.recordItemArr[i].isPlayEnd = false;
		}
	},



	curRecordClip: null,
	curRecordAudioId: null,
	playRecordClip(item, clip) {

		console.log(' in playRecordClip');

		const videoCurrentTime = this.muteVideoPlayer.currentTime;
		let audioCurrentTime = videoCurrentTime - item.startTime - 0.5;
		if (audioCurrentTime < 0) {
			audioCurrentTime = 0;
		}

		this.curRecordAudioId = playAudio(clip, () => {


			if (this.isDestroy) {
				return;
			}

			if (this.curRecordClip == clip) {
				item.isPlayEnd = true;
				// this.curRecordClip = null;
				// this.curRecordAudioId = null;
			}
		});

		cc.audioEngine.setCurrentTime(this.curRecordAudioId, audioCurrentTime)

		this.curRecordClip = clip;
	},









	update() {

		if (this.isDestroy) {
			return;
		}


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



		// this.updatePlayRecord();
		// this.updateRole();

		// if (this.isStopUpdate) {
		// 	return;
		// }
		// this.updateFruit();
	},






	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;


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

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

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

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

			this.setVideoTimeByTouchBar(curTouchBar);

		}

	},

	setVideoTimeByTouchBar(curTouchBar) {

		// const curTime = 

		let percent = curTouchBar.x / curTouchBar.maxX;
		const duration = this.muteVideoPlayer.getDuration();
		const curTime = duration * percent;
		this.muteVideoPlayer.currentTime = curTime;

		// if (!duration) {
		// 	percent = 0;
		// } else {
		// 	percent =  this.muteVideoPlayer.currentTime / duration;
		// }

		if (this.videoCtrlJs) {
			this.videoCtrlJs.setProgress(percent);
		}
		this.refreshVideoTimeLabel();

	},

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












	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 = this.getLabel(); // labelNode.addComponent(cc.Label);
		const labelNode = label.node;
		labelNode.parent = rectNode;

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


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


		const tweenArr = [];

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

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

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

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

			}
		}


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


		label.lineHeight = label.fontSize;

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


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

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

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

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

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

				// JSON.parse(tweenData.option)

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

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

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


			}

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

		});

		// labelNode.opacity = 255;

		return label;
	},

	setOneActionPic(rectNode, actionData) {

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

				});
			}

		});
	},

	setOneActionAnima(rectNode, actionData) {


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

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

		const data = actionData;

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



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

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

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

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

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

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


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

					let animationNames = [];

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

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

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

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


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

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






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

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

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

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

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

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

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


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


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

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

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

		return label;
	},

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

		// const node = new cc.Node();
		// const richText = node.addComponent(cc.RichText);
		// richText.font = font;
		// richText.cacheMode = 2; // 改为CHAR模式 兼容IOS字体
		// return richText;

		const richTextItem = cc.find("Canvas/res/rtItem")
		const node = cc.instantiate(richTextItem);
		const richText = node.getComponent(cc.RichText);
		richText.font = font;
		return richText;
	},

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

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

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

	}


});
