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

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

			this.preloadItem()
		})
	},

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

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

	getDefaultData() {
		const dataJson = '{"customAction":{"type":"text","changeStart":[["color","#ff00ff"],["size","30px"]],"changeEnd":[["color","#ffffff"],["size","33px"]],"changeTime":"0.5","pic_url":"http://staging-teach.cdn.ireadabc.com/071c713ba8b0bc9c6399a42ac8811082.png","text":"aaaa"},"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/c2cb9a9f65af3b853e57a22a6602e481.png","rect":{"x":209.51,"y":0,"width":851.97,"height":479}},"hotZoneItemArr":[{"id":"1614839864479","index":0,"audio_url":"http://staging-teach.cdn.ireadabc.com/32258b839eca32b6ccf94f3dd6c86e0c.mp3","itemType":"rect","fontScale":0.99296875,"imgScale":1,"mapScale":0.99296875,"gIdx":"2","rect":{"x":554.19,"y":138.28,"width":76.37,"height":72.85}},{"id":"1614840901996","index":1,"pic_url":"http://staging-teach.cdn.ireadabc.com/c8abf7383d65bcbdba8f390785cece60.png","itemType":"pic","fontScale":0.99296875,"imgScale":0.4963768115942029,"mapScale":0.99296875,"gIdx":"1","rect":{"x":699.35,"y":162.22,"width":137,"height":137}},{"id":"1614840912007","index":2,"audio_url":"http://staging-teach.cdn.ireadabc.com/85cff126986f5cc11b05e95181da5869.mp3","itemType":"text","fontScale":0.99296875,"imgScale":1,"mapScale":0.99296875,"gIdx":"3","actionData_3":{"type":"text","changeStart":[],"changeEnd":[],"changeTime":0.3,"changeOption":[["fontColor","#00ffff","#00ffff"],["fontSize","100","100"],["opacity","0","100"]],"text":"dddddg","audio_url":"http://staging-teach.cdn.ireadabc.com/5285e1e88a26a08783757e9c43a8653f.mp3"},"rect":{"width":371.17,"height":99.3,"x":306.63,"y":8.14}},{"id":"1614842879059","index":3,"audio_url":"http://staging-teach.cdn.ireadabc.com/cd8daa8b4d8ff707b3a3680e80bc4761.mp3","itemType":"rect","fontScale":0.99296875,"imgScale":1,"mapScale":0.99296875,"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/c5c80dbe4df2fe619f67b4d8a99d15c8.json","name":"a_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/df141aa05ea55b3835ef2ebfc6685d48.json","name":"a_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/adbfe4292df235154c88737fe22cdba0.png","name":"a_tex.png"},"gIdx":"0","rect":{"x":111.27,"y":277.23,"width":76.31,"height":76.31}},{"id":"1614932660076","index":4,"itemType":"pic","fontScale":0.99296875,"imgScale":1.134480587666508,"mapScale":0.99296875,"gIdx":"4","actionData_4":{"type":"pic","skeJsonData":{},"texJsonData":{},"texPngData":{},"changeStart":[],"changeEnd":[],"changeTime":0.3,"changeOption":[["scale","1"],["opacity","50","100"]],"pic_url":"http://staging-teach.cdn.ireadabc.com/97eb28e4c023f92efde4310d590be985.png","audio_url":"http://staging-teach.cdn.ireadabc.com/c693181b18d5b8e018cdd0dbbd8a8466.mp3"},"rect":{"x":715.92,"y":310,"width":110.04,"height":144.08}},{"id":"1616741577774","index":5,"itemType":"rect","fontScale":0.99296875,"imgScale":1,"mapScale":0.99296875,"gIdx":"5","actionData_5":{"type":"anima","skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/c5c80dbe4df2fe619f67b4d8a99d15c8.json","name":"a_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/df141aa05ea55b3835ef2ebfc6685d48.json","name":"a_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/adbfe4292df235154c88737fe22cdba0.png","name":"a_tex.png"},"changeStart":[],"changeEnd":[],"changeTime":0.3,"changeOption":[["scale","1"],["opacity","0","100"]],"audio_url":"http://staging-teach.cdn.ireadabc.com/c693181b18d5b8e018cdd0dbbd8a8466.mp3"},"rect":{"x":11.48,"y":7,"width":147.01,"height":147.01}}],"title":"Look and Say","title_audio_url":"http://staging-teach.cdn.ireadabc.com/85cff126986f5cc11b05e95181da5869.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.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() {

		this._audioResList.push({url: this.data.title_audio_url || ''});
		
		if (!this.data.hotZoneItemArr) {
			return;
		}
		this.data.hotZoneItemArr.forEach((item) => {
			this._audioResList.push({url: item.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();
		// this.initMusic();
	},

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




	// 用于存储公共数据 当翻页时清空 
	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) {
		if (this.pageData) {
			this.pageData[key] = value;
			this.sendPageData();
		}
	},

	getPageData(key) {
		if (this.pageData && this.pageData[key]) {
			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);
			}
		}
	},



	smogArr: null,
	initData() {
		this.smogArr = [];

		this.initAudioEffect();
	},

	tip1Clip: null,
	tip2Clip: null,
	tip3Clip: null,
	magicAppearClip: null,
	bgClip: null,
	btnClip: null,
	walkClip: null,
	initAudioEffect() {
		this.tip1Clip = cc.find('Canvas/res/audio/tip_1').getComponent(cc.AudioSource).clip;
		this.tip2Clip = cc.find('Canvas/res/audio/tip_2').getComponent(cc.AudioSource).clip;
		this.tip3Clip = cc.find('Canvas/res/audio/tip_3').getComponent(cc.AudioSource).clip;
		this.magicAppearClip = cc.find('Canvas/res/audio/magic_appear').getComponent(cc.AudioSource).clip;
		this.bgClip = cc.find('Canvas/res/audio/bg').getComponent(cc.AudioSource).clip;
		this.btnClip = cc.find('Canvas/res/audio/btn').getComponent(cc.AudioSource).clip;
		this.walkClip = cc.find('Canvas/res/audio/walk').getComponent(cc.AudioSource).clip;

		
	},

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



	sendServerEvent(key, data) {

    const c = window.courseware;
		if (c) {

			c.sendEvent(key, data);
		}
  },


	addServerListener() {

		console.log(' in addServerListener');

		const gameStart = () => {
			this.showTemplateStartAnima();
			this.loadEnd();
		}

		if (window.air) {
			window.air.onCourseInScreen = (next) => {
				gameStart();
				next();
			}
		}
		

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


		if (this.isTeacher) {
			c.onEvent('check_enter_next_template', (data, next) => {
				this.checkEnterNextTemplate(data);
				next();
			});
		}

	
		c.onEvent('btn_click', (data, next) => {

			this.btnClick();
			next();
		});

	},

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

	showTemplateEndAnima() {

		const resDragonBone = cc.find("Canvas/res/anima/pageturn")
		const pageturn = cc.instantiate(resDragonBone)	
		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.initTree();
		this.playBgMusic();

		if (this.data.isEndStyle == '1') {
			this.showEndStyle()
		} else {
			this.initTitle();
			this.initSmog();
			this.showSound();
		}
		// this.initHotZone();
	},

	showEndStyle() {

		this.hideEdge();
		this.addMagicBg();
		this.enlargeMap();
		this.addRole();

	},

	hideEdge() {
		cc.find("Canvas/bg_leftbottom").active = false;
		cc.find("Canvas/bg_rightbottom").active = false;
		cc.find("Canvas/bg_righttop").active = false;
		cc.find("Canvas/bg_lefttop").active = false;
	},

	addRole() {
		console.log("in showMagic");

		const resDragonBone = cc.find("Canvas/res/anima/role")
		const role = cc.instantiate(resDragonBone)	

		const dragonDisplay = role.getComponent(dragonBones.ArmatureDisplay);
		dragonDisplay.playAnimation('walk', -1);


		role.parent = cc.find("Canvas/bg_door");
		role.x = - this.canvas.width / 2;
		role.y = -30;

		cc.tween(role)
			.to(4, {x: 0})
			.start();

		cc.tween(role)
			.delay(3)
			.to(1, {opacity: 0}, {easing: "cubicIn"})
			.call(() => {
				cc.audioEngine.stop(audioId);
				this.showTemplateEndAnima();
			})
			.start();

			const audioId = playAudio(this.walkClip, () => {
			});
		// playAudio(this.magicAppearClip);
	},

	enlargeMap() {
		this.canvas.scale *= 1.2;
	},

	addMagicBg() {
		const resDragonBone = cc.find("Canvas/res/anima/magic")
		const magic = cc.instantiate(resDragonBone)	
		const dragonDisplay = magic.getComponent(dragonBones.ArmatureDisplay);
		dragonDisplay.playAnimation('spinturn', -1);
		magic.parent = cc.find("Canvas/bg_door");
	},


	showSound() {

		this.showPanel1();

		playAudio(this.tip1Clip, () => {
			this.tip1ShowEnd();
		});
	},

	tip1ShowEnd() {

		this.showMagic();
		playAudio(this.tip2Clip, () => {
			this.tip2ShowEnd();
		});

	},

	tip2ShowEnd() {
		this.showBtn();

		this.showPanel2();
		
	},

	panel1: null,
	showPanel1() {
		if (!this.isTeacher) {
			return;
		}

		const panel1 = getSprNode("bg_ti1")
		panel1.scale = this._mapScaleMin;
		panel1.parent = cc.find("Canvas")
		panel1.zIndex = 20;
		panel1.anchorY = 0;
		panel1.y = - this.canvas.height / 2;
		// panel1.opacity = 0;
		this.panel1 = panel1;

		panel1.baseY = panel1.y;
		panel1.y -= panel1.height / 2 * panel1.scaleY;
		
		cc.tween(panel1)
			.to(1, {y: panel1.baseY}, {easing: "cubicOut"})
			.start();

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

	panel2: null,
	showPanel2() {
		if (!this.isTeacher) {
			return;
		}
		const panel2 = getSprNode("bg_ti2")
		panel2.scale = this._mapScaleMin;
		panel2.parent = cc.find("Canvas")
		panel2.zIndex = 30;
		panel2.anchorY = 0;
		panel2.y = - this.canvas.height / 2;
		panel2.opacity = 0;
		this.panel2 = panel2;

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

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

	showMagic() {
		console.log("in showMagic");

		const resDragonBone = cc.find("Canvas/res/anima/magic")
		const magic = cc.instantiate(resDragonBone)	



		const dragonDisplay = magic.getComponent(dragonBones.ArmatureDisplay);
		dragonDisplay.on(dragonBones.EventObject.COMPLETE, () => {
			dragonDisplay.playAnimation('spinturn', -1);
		})
		dragonDisplay.playAnimation('appear', 1);


		magic.parent = cc.find("Canvas/bg_door");


		// const magic = getSprNode("bg_magic");
		// magic.scale = 0;
		// magic.parent = cc.find("Canvas/bg_door");
		// magic.zIndex = 10;

		// cc.tween(magic)
		// 	.to(2.5, {scale: this._mapScaleMin}, {easing: "cubicOut"})
		// 	.start();

		// cc.tween(magic)
		// 	.by(1, {angle: 120})
		// 	.repeatForever()
		// 	.start();

		playAudio(this.magicAppearClip);
	},


	btn: null,
	showBtn() {
		console.log("in showBtn");
		const btn = getSprNode("btn_go")
		btn.parent = this.canvas
		btn.zIndex = 50;
		btn.scale = this._mapScaleMin;
		btn.x = 230 * this._mapScaleMin
		btn.y = -this.canvas.height / 2 + 230 * this._mapScaleMin;

		btn.addComponent(cc.Button)
		btn.on("click", () => {

			this.sendServerEvent('btn_click')
		
		})
		
		// btn.y = - this.canvas.height / 2;
		btn.opacity = 0;
		this.btn = btn;

		cc.tween(btn)
			.to(0.5, {opacity: 255})
			.start();

		this.showHand();
	},

	btnClick() {

		if (!this.btn || this.btn.opacity == 0) {
			return;
		}
		this.btn.opacity = 0
		playAudio(this.btnClip);
		playAudio(this.tip3Clip, () => {
			this.showTemplateEndAnima();
		});

	},

	showHand() {
		console.log("in showHand");

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

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

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

	},

	showHandAnima() {

		const hand1 = this.btn.hand1;
		const hand2 = this.btn.hand2;

		if (hand1.opacity == 0) {
			const delayTime = 0.2;

			cc.tween(this.btn)
				.delay(delayTime)
				.call(() => {
					hand1.opacity = 255;
					hand2.opacity = 0;
					this.showHandAnima();
				})
				.start();
				
		} else {
			const delayTime = 0.5;
			cc.tween(this.btn)
			.delay(delayTime)
			.call(() => {
				hand1.opacity = 0;
				hand2.opacity = 255;
				this.showHandAnima();
			})
			.start();
		}
	},

	initSmog() {

		this.addSmog(-this.canvas.width / 1.5, false);
		this.addSmog(-this.canvas.width / 2, false);
		this.addSmog(-this.canvas.width / 2 + this.canvas.width / 3, false);
		this.addSmog(-this.canvas.width / 2 + this.canvas.width / 3 * 2);

		// const parent = cc.find("Canvas");
		// let smog;

		// smog = getSprNode("bg_smog")
		// parent.addChild(smog);

		// smog.scale = this._mapScaleMin * (0.5 + Math.random() * 0.7);
		// smog.x = px;
		// smog.y = -240 + Math.random() * 80;

		// if (Math.random() > 0.5) {
		// 	smog.scaleX *= -1;	
		// }
	
		// let time = 20;
	
		// cc.tween(smog)
		// 	.to(time, {x: this.canvas.width})
		// 	.call(() => {
		// 		this.smogArr.push(smog);
		// 	})
		// 	.start()

	},

	addSmog(px, isCreateNext = true) {

		const parent = cc.find("Canvas/bg_door");
		let smog;

		if (this.smogArr.length > 0) {
			smog = this.smogArr.pop();
		} else {
			smog = getSprNode("bg_smog")
			parent.addChild(smog);

		}



		smog.scale = this._mapScaleMin * (0.5 + Math.random() * 0.7);
		smog.x = px;
		smog.y = -140 + Math.random() * 80;
		smog.zIndex = 10;
		if (Math.random() > 0.5) {
			smog.scaleX *= -1;	
		}

		let time = 30 + Math.random() * 10;
	
		cc.tween(smog)
			.to(time, {x: this.canvas.width})
			.call(() => {
				this.smogArr.push(smog);
			})
			.start()


		if (isCreateNext) {
			delayCall(time / 10 + time / 10 * Math.random(), () => {
				this.addSmog(-this.canvas.width);
			})
		}


	},

	initTree() {

		this.initAppleTree();
		this.initBananaTree()
		this.initOrangeTree()
	},

	initAppleTree() {

		const parent = cc.find("Canvas/bg_grass");
		const tmpX = -parent.width / 2;
		const tmpY = -parent.height / 2;
		const treeDataArr = [
			[tmpX + 133, tmpY + 357, 0.76],
			[tmpX + 253, tmpY + 269, 1],
			[tmpX + 860, tmpY + 355, 0.84],
			[tmpX + 1045, tmpY + 379, 0.64],
			[tmpX + 1240, tmpY + 314, 1],
		]

		const rate = this.canvas.width / 1280 

		for (let i=0; i<treeDataArr.length; i++) {
			const treeData = treeDataArr[i];
			const px = (treeData[0] + parent.width / 2) * rate

			const appleTree = getSprNode("bg_apple");

			appleTree.x = tmpX + px
			appleTree.y = treeData[1];
			appleTree.scale = treeData[2];
			appleTree.anchorY = 0;

			parent.addChild(appleTree, this.canvas.height - appleTree.y);
			this.addTreeAnima(appleTree);
		}
	},

	initBananaTree() {

		const parent = cc.find("Canvas/bg_grass");
		const tmpX = -parent.width / 2;
		const tmpY = -parent.height / 2;
		const treeDataArr = [
			[tmpX + 14, tmpY + 364, 0.7],
			[tmpX + 49, tmpY + 294, 0.94],
			[tmpX + 298, tmpY + 393, 0.7],
			[tmpX + 1129, tmpY + 261, 1],
			[tmpX + 1265, tmpY + 419, 0.7],
		]
		const rate = this.canvas.width / 1280 

		for (let i=0; i<treeDataArr.length; i++) {
			const treeData = treeDataArr[i];
			const px = (treeData[0] + parent.width / 2) * rate

			const bananaTree = getSprNode("bg_banana");
			bananaTree.x = tmpX + px;
			bananaTree.y = treeData[1];
			bananaTree.scale = treeData[2];
			bananaTree.anchorY = 0;

			parent.addChild(bananaTree, this.canvas.height - bananaTree.y);
			this.addTreeAnima(bananaTree);
		}
	},

	initOrangeTree() {

		const parent = cc.find("Canvas/bg_grass");
		const tmpX = -parent.width / 2;
		const tmpY = -parent.height / 2;
		const treeDataArr = [
			[tmpX + 239, tmpY + 402, 0.82],
			[tmpX + 916, tmpY + 385, 0.82],
			[tmpX + 978, tmpY + 293, 1],
			[tmpX + 1086, tmpY + 417, 0.72],
		]

		const rate = this.canvas.width / 1280 

		for (let i=0; i<treeDataArr.length; i++) {
			const treeData = treeDataArr[i];
			const px = (treeData[0] + parent.width / 2) * rate

			const orangeTree = getSprNode("bg_orange");
			orangeTree.x = tmpX + px;
			orangeTree.y = treeData[1];
			orangeTree.scale = treeData[2];
			orangeTree.anchorY = 0;

			parent.addChild(orangeTree, this.canvas.height - orangeTree.y);
			this.addTreeAnima(orangeTree);
		}
	},




	addTreeAnima(tree) {

		const wind = 1  + Math.random() * 1

		const shakeLine = 8 * wind;
		const time = 4 * wind;

		cc.tween(tree)
			.to(time / 3 / 2, {skewX: 0.3 * shakeLine}, {easing: "sineInOut"})
			.to(time / 3 / 1.2, {skewX: -0.1 * shakeLine}, {easing: "sineInOut"})
			.to(time / 3, {skewX: 0.05 * shakeLine}, {easing: "sineInOut"})
			.to(time / 3, {skewX: 0 * shakeLine}, {easing: "sineInOut"})

			.start()

		delayCall(time + Math.random() * 1.5, () => {
			this.addTreeAnima(tree);
		})

	},


	initTitle() {

		const offX = 20 * this._mapScaleMin;
		const offY = 20 * this._mapScaleMin;
		const title = getSprNode('bg_title');
		title.parent = this.canvas;
		title.scale = this._mapScaleMin;
		title.zIndex = 20;

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



		const edge1 = cc.find('Canvas/bg_leftbottom');
		const edge2 = cc.find('Canvas/bg_lefttop');
		const edge3 = cc.find('Canvas/bg_rightbottom');
		const edge4 = cc.find('Canvas/bg_righttop');

		edge1.scale = edge2.scale = edge3.scale = edge4.scale = this._mapScaleMin;

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

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

		// const labelNode = new cc.Node();
		// labelNode.parent = title;
		// const label = labelNode.addComponent(cc.RichText);
		// const size = 42
		// label.font = cc.find('Canvas/res/font/aharoni').getComponent(cc.Label).font;
		// label.string = `<outline color=#a83c13 width=2><size=${size}><color=#ffffff>${this.data.title || " " }</color></size></outline>`
		// // label.string = `<size=${size}><color=#751e00>${this.curGroup.title }</color></size>`
		// label.lineHeight = size;
		// label.horizontalAlign = cc.macro.TextAlignment.LEFT
		// labelNode.anchorX = 0;
		// labelNode.anchorY = 1
		// labelNode.x = -title.width / 2 + 90;

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

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

	},
	

	_cocosScale: null,
	initBg() {
		const frameSize = cc.view.getFrameSize();

		let sx = cc.winSize.width / frameSize.width;
		let sy = cc.winSize.height / frameSize.height;
		let s = Math.min(sx, sy);

		this._cocosScale = s;

		const bgNode = cc.find('Canvas/bg');
		sx = frameSize.width / bgNode.width;
		sy = frameSize.height / bgNode.height;
		bgNode.scale = Math.max(sx, sy) * s;
		bgNode.anchorX = 1;
		bgNode.anchorY = 0;
		bgNode.x = frameSize.width / 2 * s;
		bgNode.y = -frameSize.height / 2 * s;

		const bg = cc.find('Canvas/bg');
		const rectNode = new cc.Node();
		rectNode.x = -bg.x;
		rectNode.y = -bg.y;
		rectNode.scaleX = bg.scaleX;
		rectNode.scaleY = bg.scaleY;
		bg.addChild(rectNode);
		const ctx = rectNode.addComponent(cc.Graphics);
		ctx.fillColor = this.data.bgColor || '#f9bd03';
		ctx.fillRect(-bg.width / 2, -bg.height / 2, bg.width, bg.height);
		ctx.fill();
	},


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


});
