<template src="./webgl_rxdz_look.html">

</template>
<script>
	import * as THREE from 'three';
	import Stats from 'three/addons/libs/stats.module.js';
	// import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
	
	import TWEEN from 'three/addons/libs/tween.module.js';

	var requestId = "";
    const util = require('@/utils/util.js');
    const config = require('@/services/urlConfig.js');
    // import requestConfig from '@/static/lib/requestConfig.js';
	import loadModel from '@/mixins/loadModel.js';
	import wallMethod from '@/mixins/wallMethod.js';
	import floorMethod from '@/mixins/floorMethod.js';
	// import commonPageMethod from '@/common/commonPageMethod.js';
    // const app = getApp(); //获取应用实例
    export default {
		mixins:[loadModel,floorMethod,wallMethod],
        /**
         * 页面的初始数据
         */
        data() {
            return {
				pvCurPageName: "webgl_rxdz_look",
				pvCurPageParams: null,
                houseId: "",
				pvId: 'p_2cmina_01043',
				navbar: {
				    showCapsule: 1,
				    title: '查看户型',
				    titleColor: '#fff',
				    navPadding: 0,
				    navPaddingBg:'transparent',
				    navBarColor: 'transparent',
				    navBackColor: 'transparent',
				    haveCallback: true, // 如果是 true 会接手 navbarBackClk
				    fromShare: false,
				    fromProject: 0,
				    shareToken: "",
				    pageName: this.pvCurPageName,
				},
				canvas:null,
                id:'',// 户型编号
                spaceList:[], // 空间列表
                gltfSpaces:[], // 场景中地板模型数组
				spaceId:null,
                wallIds:[], // 空间墙体id
				wallList:[], // 墙体数据
                gltfWalls:[], // 场景中墙体模型数组
                loader:null,
                scene:null,
                // sky:null,
                camera:null,
                controls:null,
				curHouseObj: null,
				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
				// cameraLastPosition: null,		//摄像头上一次移动到的位置
				// controlLastPosition: null,		//观察点上一次移动到的位置
				canvasHeight:430,	//canvas视图的高度-计算得出
				chooseMesh:null,//标记鼠标拾取到的mesh
				progress:1,	//进度条
				myLoadingStatus:false,
				repeatFlag:false,	//重复点击
				instancedFloorMesh:null,
				instancedMeshList: [],
				lableItem:[],
				showLables:false,
				floorList:[],
				floorId:null,
				curData:null,	//上一个页面传来的数据
				curSpaceObj:null,	//当前应该定位到的空间
            }
        },
        watch:{

        },
		onUnload() {
			cancelAnimationFrame(requestId, this.canvas)
			this.worker && this.worker.terminate()
			setTimeout(() => {
				if (this.renderer instanceof THREE.WebGLRenderer) {
					this.renderer.dispose()
					this.renderer.forceContextLoss()
					this.renderer.context = null
					this.renderer.domElement = null
					this.renderer = null;
					this.clearHandle()
				}
			}, 0)
			this.gltfWalls = [];
			this.instancedMeshList = [];
			this.instancedSpaceMeshList = [];
			this.lableItem = [];
			this.gltfLayouts = [];
			this.instancedFurList = [];
			TWEEN && TWEEN.removeAll();//清除所有的tween;
		},
        async onLoad(options) {
			uni.hideShareMenu && uni.hideShareMenu();
			var that = this;
			let unit = app.globalData.systemInfo.screenWidth / 750;//单位rpx 对应 px 的值
			that.canvasHeight = window.innerHeight;
			
            const canvas3d = this.canvas = await document.createElementAsync("canvas","webgl")
			//uniapp 兼容写法，因为uni的页面对象的Vue 实例是$vm
			let curent = getCurrentPages()[getCurrentPages().length - 1];
			let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
			curent = Object.assign(curent,currUniPage);
			let container = null, clock = null, controls = {target:{}};
			let camera = null, renderer = null, mixer = null;

            let loader = this.loader = new GLTFLoader();
            let scene = this.scene = new THREE.Scene();
            // let raycaster = null;
            // let mouse = new THREE.Vector2();
            let chooseMesh = this.chooseMesh;//标记鼠标拾取到的mesh
			let isUserContorl = false;//是否进入漫游状态
			let scaleCameraStarPY = 0;

			let TouchContact = 0;	//滑动时上一次的手指数目
			let fingerCount = 0;	//触摸时的手指数目
			let touchStart = {		//
				clientX: 0,
				clientY: 0,
				distance:0,
			};
			let  startTime = 0, cameraPositionY = 0;	//非漫游时的移动变量

			let tweenCameraAnma = false;	//表示当前是否处在动画过程中

			
			let spherical = new THREE.Spherical();
			let sphericalDelta = new THREE.Spherical();
			// let panOffset = new THREE.Vector3();
			let quat = null;
			let quatInverse = null;//倒置的
			let rotateStart = new THREE.Vector2();
			let rotateEnd = new THREE.Vector2();
			let rotateDelta = new THREE.Vector2();
			let minPolarAngle = 0;// 默认0
			let maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到撒旦视角。

			init();
			this.$refs.myLoading.showLoading("加载中...1%")
			this.myLoadingStatus = true;
			this.progress = 1;
			this.clearEvent = clearEvent;
			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
			this.updateLables = updateLables;
			this.moveMeshCenterHandle = moveMeshCenterHandle;
			function init() {
				container = document.getElementById( 'container' );

                scene.background = new THREE.Color("#F2F2F2");
                scene.environment = new THREE.Color("#F2F2F2");

				// 创建相机位置
				camera = new THREE.PerspectiveCamera( 80, window.innerWidth / that.canvasHeight, 0.1, 10000 );
				// camera.up.set(0, 0, -1);//俯视状态，将相机的up向量设置为z轴负方向
				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
				scene.add(camera);
                that.camera = camera;
                // 时间
                clock = new THREE.Clock();
				// 辅助方格
				// const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
				// gridHelper.position.y = 0;
				// gridHelper.position.x = 0;
				// scene.add(gridHelper);

                // 环境光会均匀的照亮场景中的所有物体
                const ambientLight = new THREE.AmbientLight(0xFFEFE0, 1.48 );
                scene.add( ambientLight );
                //平行光
                const light = new THREE.DirectionalLight(0xFFF8E5, 1.96 );
                light.position.set(-14.8, 9.188, -7.448); //default; light shining from top
                scene.add(light);
				//antialias 这个值得设置为false，不然IOS上截图会失效
                renderer = that.renderer = new THREE.WebGLRenderer( { canvas:canvas3d, alpha: true,
					// 如果想保存three.js canvas画布上的信息，注意设置preserveDrawingBuffer
					preserveDrawingBuffer: true, } );
                renderer.outputEncoding = THREE.sRGBEncoding;
                renderer.outputColorSpace = THREE.SRGBColorSpace;
                // renderer.toneMappingExposure = 0.1;//色调映射的曝光级别。默认是1
                renderer.toneMapping = THREE.NoToneMapping;//色调映射
                renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true

                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, that.canvasHeight );
                container.appendChild( renderer.domElement );
				

				controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
				that.controls = controls;
				camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
                // 监听
                // window.addEventListener( 'resize', onWindowResize );
                // raycaster = new THREE.Raycaster();
				document.addEventListener('touchstart', onPointerStart, false);
				document.addEventListener('touchmove', onPointerMove, false);
				document.addEventListener('touchend', onPointerUp, false);
				render();//重启渲染
            }
			function tweenCameraAnmaChange (value) {
				tweenCameraAnma = value
			}
			//取消事件监听-避免二次进入时触发多次事件
			function clearEvent(){
				console.warn("**clearEvent****")
				document.removeEventListener('touchstart', onPointerStart);
				document.removeEventListener('touchmove', onPointerMove );
				document.removeEventListener('touchend', onPointerUp );
			}
			function rotateLeft( angle ) {
				sphericalDelta.theta -= angle;
			}
			
			function rotateUp( angle ) {
				sphericalDelta.phi -= angle;
			}
			//更新球坐标 这里的up向量影响到了水平滑动的效果，需要仔细研究
			function update() {
				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
				const offset = new THREE.Vector3();
				quat = new THREE.Quaternion().setFromUnitVectors( camera.up, new THREE.Vector3( 0, 1, 0 ) );
				quatInverse = quat.clone().invert();//翻转该四元数
				const position = camera.position;
				// console.warn("***camera-info0***",JSON.stringify(camera.up),JSON.stringify(camera.position),JSON.stringify(quat))
				offset.copy( position ).sub( controls.target );
				// rotate offset to "y-axis-is-up" space
				offset.applyQuaternion( quat );
				// 设置球坐标的radius、phi和theta值
				spherical.setFromVector3( offset );// 以上是构建当前状态下的摄像机和观测点之间的球坐标
				spherical.theta += sphericalDelta.theta;
				if(camera.isPerspectiveCamera){//透视相机
					spherical.phi += sphericalDelta.phi;
					// restrict phi to be between desired limits
					spherical.phi = Math.max( minPolarAngle, Math.min( maxPolarAngle, spherical.phi ) );
				}
				spherical.makeSafe();
				// spherical.radius *= 1;
				// restrict radius to be between desired limits
				// spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
				// controls.target.add( panOffset );
				//以上是根据条件更新球坐标的值，然后从球坐标当中获取位置等信息
				offset.setFromSpherical( spherical );
				offset.applyQuaternion( quatInverse );
				position.copy( controls.target ).add( offset );
				camera.lookAt( controls.target );
			
				sphericalDelta.set( 0, 0, 0 );
			};
			//更新初始点
			function touchOne(touches,event) {
				// 只有一个手指时记录当前点的坐标作为平移起始点
				if (isUserContorl === false) {// 非漫游状态
					rotateStart.set( event.clientX, event.clientY );
				}
			}
			// 手指移动开始
			function onPointerStart(event){
				startTime = (new Date()).getTime();
				fingerCount = event.touches.length;//手指个数
				console.log('开始触摸事件：',fingerCount,tweenCameraAnma,isUserContorl,camera.position.y,event,event.touches)
				if (fingerCount === 1) {
					// 只有一个手指时记录当前点的坐标作为平移起始点
					if (isUserContorl === false) {//非漫游模式
						touchOne(event.touches[0],event);
					}
				} else {
					// 有两个手指时记录两个点的距离和中点作为缩放起始点
					let xMove = event.touches[1].clientX - event.touches[0].clientX;
					let yMove = event.touches[1].clientY - event.touches[0].clientY;
					//计算开始触发两个手指坐标的距离
					let distance = Math.sqrt(xMove * xMove + yMove * yMove);
					touchStart.distance = distance;
					scaleCameraStarPY = camera.position.y;
				}
			}
			//持续触摸中
			function onPointerMove( event ) {
				fingerCount = event.touches.length;//手指个数
				that.showLables = false;
				if(fingerCount==1){
					// 当触屏，两个手指变成一个手指；此时缩放动作结束,滑动图片开始
					if (TouchContact == 2) {//上一次滑动的触摸点个数
					    console.warn('两个手指变成一个手指');
					    touchOne(event.touches[0],event);
					}else{
						if (isUserContorl === false) {// 非漫游状态
							rotateEnd.set( event.clientX, event.clientY );
							rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( 1 );
							const element = renderer.domElement;
							rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
							rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
							rotateStart.copy( rotateEnd );
							update();
						}
					}
				} else if (fingerCount === 2) {
					// console.warn(fingerCount,"***onPointerMove-lon***",lon)
					//双手指运动 x移动后的坐标和y移动后的坐标
					let xMove = event.touches[1].clientX - event.touches[0].clientX;
					let yMove = event.touches[1].clientY - event.touches[0].clientY;
					//双手指运动新的 ditance
					let distance = Math.sqrt(xMove * xMove + yMove * yMove);
					//计算移动的过程中实际移动了多少的距离
					let distanceDiff = distance - touchStart.distance;
					// 双手滑动得距离
					cameraPositionY =  0.1 * distanceDiff;
				}
				TouchContact = fingerCount;
			}
			//触摸结束
			function onPointerUp(event) {
				fingerCount = event.touches.length;//手指个数
				// console.warn(fingerCount,"***onPointerUp***",startTime)
				if(fingerCount==0){
					let now = new Date().getTime()
					if (Math.abs(event.clientX - rotateStart.x) < 10 
					&& Math.abs(event.clientY - rotateStart.y) < 10 
					&& (now - startTime) < 300 ){
						// 点击事件-先注释
						// checkIntersection(event);
					}else{
						if (isUserContorl === false) {// 非漫游状态
						}
					}
					that.showLables = true;
					updateLables();
				}
				else if(fingerCount==1){//双指情况下,松开一指
					console.warn(fingerCount,"***onPointerUp***",cameraPositionY)
					cameraPositionY = 0;
				}
			}
			//把摄像机移动的选中模型的正上方，观察点也变更为模型中心点，同时选中模型
			function moveMeshCenterHandle(mesh = null,noChangeColor = true){
				if(mesh){//如果传入了模型，则取模型
					let spaceId = mesh.spaceId;//空间id
					if(chooseMesh && spaceId == chooseMesh.spaceId){
						console.warn("**moveMeshCenterHandle-重复选中了***")
						return false;
					}
					chooseMesh = mesh;
				}
				if(!chooseMesh){
					console.warn("**moveMeshCenterHandle-没有数据***")
					return false;
				}
				that.showLables = false;//隐藏
				controls.enable = false;//控制器不响应用户的操作
				
				// let object = chooseMesh;//当前选中的空间模型
				// let spaceObj = object.userData;//获取空间模型的相关数据
				
				let spaceObj = chooseMesh;//获取空间模型的相关数据
				let cameraNewPosition ={};
				let targetNewPosition ={};
				let oldUp = {};
				let newUp = {};
				if (isUserContorl === false) { // 非漫游状态
					cameraNewPosition = {
						x:spaceObj.centerX/100,
						y:camera.position.y, 
						z:-spaceObj.centerY/100,
					}
					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为0
					targetNewPosition = {
						x:spaceObj.centerX/100,
						y:0, 
						z:-spaceObj.centerY/100,
					}
					oldUp = camera.up;//俯视状态
					newUp = camera.up
					// that.cameraLastPosition = cameraNewPosition;//记录下上一次摄像头位置
					// that.controlLastPosition = targetNewPosition;//记录下上一次观察点位置
				}
				console.warn("**moveMeshCenter***",isUserContorl,spaceObj,JSON.stringify(camera.position),JSON.stringify(controls.target)
				,cameraNewPosition,targetNewPosition,JSON.stringify(camera.up))
				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,600);
				setTimeout(()=>{
					that.showLables = true;
					updateLables();
					controls.enable = true;//控制器不响应用户的操作
				},601);//动画结束后回复原始状态
			}
			
			// oldP  相机原来的位置
            // oldT  target原来的位置
            // newP  相机新的位置
            // newT  target新的位置
            function tweenCamera(oldP, oldT, newP, newT, oldUp, newUp, time=1000) {
				if(JSON.stringify(oldP) == JSON.stringify(newP) && JSON.stringify(oldT) == JSON.stringify(newT)){
					that.repeatFlag = false;//放开限制，可以再次点击
					return false;
				}
				tweenCameraAnma = true;
				var tween = new TWEEN.Tween({
					x1: oldP.x, // 相机x
					y1: oldP.y, // 相机y
					z1: oldP.z, // 相机z
					x2: oldT.x, // 控制点的中心点x
					y2: oldT.y, // 控制点的中心点y
					z2: oldT.z,	// 控制点的中心点z
					x3: oldUp.x, // 控制点的中心点x
					y3: oldUp.y, // 控制点的中心点y
					z3: oldUp.z  // 控制点的中心点z
				})
				.to({
			        x1: newP.x,
					y1: newP.y,
					z1: newP.z,
					x2: newT.x,
					y2: newT.y,
					z2: newT.z,
					x3: newUp.x, // up向量
					y3: newUp.y, // 控制点的中心点y
					z3: newUp.z  // 控制点的中心点z
			    }, time)
				.easing(TWEEN.Easing.Quadratic.InOut)
				.onUpdate((object)=> {
					camera.position.x = object.x1;
					camera.position.y = object.y1;
					camera.position.z = object.z1;
					let newTarget = new THREE.Vector3(object.x3,object.y3,object.z3);
					camera.up.copy(newTarget);
					camera.lookAt(object.x2,object.y2,object.z2);
					// controls.target.x = object.x2;
					// controls.target.y = object.y2;
					// controls.target.z = object.z2;
					// controls.update();
					// console.warn("****onUpdate**",object.x1,object.y1,object.z1,object.x2,object.y2,object.z2)
				}).onComplete(()=>{
					controls.target.x = newT.x;
					controls.target.y = newT.y;
					controls.target.z = newT.z;
					//修正最后的视角
					let up = new THREE.Vector3(newUp.x,newUp.y,newUp.z);
					camera.up.copy(up);
					camera.lookAt(controls.target.x,controls.target.y,controls.target.z);
					tweenCameraAnma = false;
					that.repeatFlag = false;//放开限制，可以再次点击
				})
				// 开始动画
				tween.start();
			}
			function onWindowResize() {
                camera.aspect = window.innerWidth / that.canvasHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, that.canvasHeight );
            }
			//计算漫游时当前选中空间的观察点和摄像机的放置点位
			//distance 表示要沿着视角移动的距离
			function updateLables(){
				if(!that.showLables){
					return false;
				}
				that.lableItem.forEach(lable =>{
					let item = that.gltfSpaces[lable.cubeIndex].instancedMeshIndexList[0];//获取地板模型的第一个geometry实例
					let _index = item.instancedMeshIndex;//第一个geometry实例 在 全局InstancedMesh实例的位置
					let instancedMesh = that.instancedSpaceMeshList[_index];//获取具体的网格实例
					let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵
					instancedMesh.getMatrixAt(item.instancedAtIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
					let position = new THREE.Vector3();//当前几何体的位置参数
					position.setFromMatrixPosition(stratMatrix);//从四维向量中提取位置信息
					// console.warn("***updateLables***",item.instancedAtIndex,JSON.stringify(position));
					position.project(camera);
					const x = (position.x *  .5 + .5) * window.innerWidth;
					const y = (position.y * -.5 + .5) * that.canvasHeight;
					lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
				})
			}
            function render() {
                TWEEN && TWEEN.update();
                if (mixer) {
					let delta = clock.getDelta();
                    mixer.update(delta);
                }
				//不处在动画过程中，则可以处理移动等动作
				if(tweenCameraAnma==false){
					if (isUserContorl === false ) { // 非漫游
						if(fingerCount==2){//双指情况下
							console.warn("***camera.isPerspectiveCamera***",scaleCameraStarPY,cameraPositionY,JSON.stringify(camera.position))
							let _cha = scaleCameraStarPY - cameraPositionY;
							if(_cha < 1.2){
								_cha = 1.2;
							}
							if(camera.position.y!=_cha){//不等才更新camera.position
								camera.position.set(camera.position.x, _cha, camera.position.z);
							}
						}
					}
				}
				renderer.render(scene, camera);//单次渲染
				requestId = requestAnimationFrame(render, canvas3d);
            }
			
			const eventChannel = this.getOpenerEventChannel();
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel && eventChannel.hasOwnProperty('on') && eventChannel.on('acceptDataFromOpenerPage', (data) => {
				console.log('监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据',data)
				this.setHouseDetail(data)
			})
			
		},

		methods: {
			clearHandle(){
				this.clearEvent();
			},
			//楼层切换
			floorChange(item){
				if(this.floorId==item.layoutId){
					return false;
				}
				this.floorId = item.layoutId;
				
				this.curHouseObj = this.curData.layoutStruct.find(it=>it.layoutId==item.layoutId);//更新当前具体的户型数据
				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
				let deleList = this.scene.children.filter(object=>{
					if(object.userType=="mesh" || object.userType=="layoutMesh"){
						return object
					}
				})
				// console.warn("***deleList***",deleList)
				if(deleList && deleList.length>0){
					this.showLables = false;//隐藏lable
					this.scene.remove(...deleList);
				}
				this.gltfWalls = [];
				this.gltfSpaces = [];
				this.instancedMeshList = [];
				this.instancedSpaceMeshList = [];
				this.lableItem = [];
				this.gltfLayouts = [];
				this.instancedFurList = [];
				this.wallList = [];
				//恢复初始视角
				this.camera.position.set(this.cameraStarPosition.x, this.cameraStarPosition.y, this.cameraStarPosition.z);
				this.controls.target = new THREE.Vector3( this.controlStarPosition.x, this.controlStarPosition.y, this.controlStarPosition.z );;
				this.camera.lookAt(this.controlStarPosition.x,this.controlStarPosition.y,this.controlStarPosition.z);
				
				setTimeout(()=>{
					this.loadSpace();
				}, 100);
				// this.$emit("curHouseFloorChange", item);//通知页面，户型楼层发生了变更
			},
			/**
			 * 设置户型详情信息
			 * @param {Object} data 户型详情
			 */
			setHouseDetail(data){
				if(data && data.layoutStruct){
					let curData = data.layoutStruct;
					this.curHouseObj = curData.layoutStruct.find(it=>it.floor==curData.curFloor);;
					// this.spaceId = this.curHouseObj.spaceId;
					console.warn("***curHouseObj***",this.curHouseObj)
					this.floorList = [];
					curData.layoutStruct && curData.layoutStruct.forEach(item=>{
						this.floorList.push({
							houseFloor:item.floor,
							layoutId:item.layoutId,
						});
					})
					let select = this.floorList.find(it=>it.houseFloor==this.curHouseObj.floor);
					this.floorId = select ? select.layoutId : this.floorList[0].layoutId;
					this.curData = curData;
					console.warn("***floorList-init***",this.floorList,select)
					// 加载户型
					this.loadSpace();
				}else{
					this.curHouseObj = {}
				}
			},
			// 添加文字标签
			addWordLabel(){
				if(!this.gltfSpaces || this.gltfSpaces.length <= 0){
					return false;
				}
				// 方案二
				this.lableItem = [];
				this.gltfSpaces.forEach((cube,index) =>{
					// 给地板加上空间类型标注, 空间为链接空间的不显示
					if(cube.spaceName && !cube.isSizeLock){
						this.lableItem.push(
							{
								// text:this.spaceTypes[cube.spaceType - 1],
								text:cube.spaceName,
								spaceId:cube.spaceId,
								transform:'',
								cubeIndex:index,
							}
						)
					}
				})
				this.showLables = true;
				this.updateLables();//更新lable
			}, 
			/**
			 * 返回列表页
			 */
			backHouseList(){
				uni.navigateBack();
			},
            webgl_touch(e) {
                const web_e = Event.fix(e)
                window.dispatchEvent(web_e)
				let web_e2 = Object.assign(e,web_e)
                document.dispatchEvent(web_e2)
                this.canvas.dispatchEvent(web_e)
				
            },
			//obj 物体对象，type 是否改变颜色
			moveMeshCenter(obj,type){
				console.warn("**moveMeshCenter***",obj)
				if(obj && this.gltfSpaces && this.gltfSpaces.length>0){
					this.moveMeshCenterHandle(obj,type);
				}
			},
            // 绘制空间-即地板
            async loadSpace(){
				this.spaceList = [];
				this.wallIds = [];
				if(!this.curHouseObj){//减少重复请求
					console.warn("***数据错误***")
					return false
				}
                if(this.curHouseObj){
                    const spaceDetail = this.curHouseObj;
                    const spaceList =spaceDetail.houseJson;
                    // 交换centerX， centerY;上一页面已经处理过了，这里不在需要处理
                    for (let index = 0; index < spaceList.length; index++) {
                        var element = spaceList[index];
                        // const centerX = JSON.parse(JSON.stringify(element.centerX))
                        // element.centerX = element.centerY;
                        // element.centerY = centerX;
						// 计算观察点向量（相对中心点）
						let _actorLoaction = element.actorLocation.split(',');//x y z
						let _x = parseInt(_actorLoaction[1]) || element.centerX;//观察点 X轴坐标 
						let _z = (parseInt(_actorLoaction[0])) || element.centerY;//观察点 Z轴坐标
						let _presentX = (_x - element.centerX)/((element.spaceWidth/2) - 5);//5是墙壁厚度的一半-单位cm
						let _presentY = (_z - element.centerY)/((element.spaceHeight/2) - 5);
						element.presentX = _presentX;//观察点跟空间中心原点的距离比例
						element.presentY = _presentY;
						element.wallMoveValue = "[0,0,0,0]"
                        this.spaceList.push(element);
                        this.wallIds.push(element.wallId);
						if(element.isSelected){ // 默认选中空间
						    this.curSpaceObj = element;
						}
                    }
					if(!this.curSpaceObj && this.spaceList.length > 0){
					    this.curSpaceObj = this.spaceList[0];
					}
                }
                console.log("该户型空间数据:", this.spaceList);
				console.log("当前选中的空间:", this.curSpaceObj);
				this.loaderSpaceArr(this.spaceList);
                // 获取墙体数据并且绘制墙体
                this.getHouseTypeSpaceWalls();
            },
            // 获取墙体数据
            async getHouseTypeSpaceWalls(){
                let data = {id:this.wallIds}
                const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
                console.log("墙体数据:", res.list)
                let wallList = [];
                if(res.success){
                    wallList = this.wallList = res.list;
                }
                let wallArr = []
                for (let index = 0; index < wallList.length; index++) {//每个空间对应一个数据
                    let element = JSON.parse(wallList[index].wallJson);
					let space = this.spaceList.find(space=>space.spaceId==element.spaceId);
					this.computeWallHandle(space,element);//提前计算
                    for (let i = 0; i < element.wallData.length; i ++) {//对应空间里面的4个方向的墙壁数据
                        let wallData = element.wallData[i];
						//对应方向的墙壁的墙体模型数据列表，每一面墙可能有多个模型
                        for (let j = 0; j < wallData.wallModelData.length; j ++) {
                            let wallModelData = wallData.wallModelData[j];
                            wallArr.push({spaceId:element.spaceId, wallModelData:wallModelData, wallDirection:wallData.wallDirection})
                            // console.log("wallModelData", element,wallData.wallDirection, wallModelData.wallType );
                        }
                    }
                }
                this.loadSpaceObjWalls(wallArr, wallList)
            },
			// 加载单个空间墙体资源
            async loadSpaceObjWalls(wallArr, wallList){
                // 加载远程墙体模型资源
				let startTime = new Date().getTime();
                // console.log("wallArr:", wallArr)
				let promise_list = [];
				let realWallArr = this.preWallData(wallArr);
				let arrLength = realWallArr.length;
				realWallArr && realWallArr.forEach((item,index) => {
					promise_list.push(
						new Promise((resolve, reject) => {
							this.loadWallModels(item, wallList, arrLength , resolve);
						})
					)
				});
				Promise.all(promise_list).then(()=>{
					let endTime = new Date().getTime();
					console.log("模型全部加载完成，时间：",endTime - startTime);
					this.$nextTick(()=>{
						this.moveMeshCenter(this.curSpaceObj);
						this.progress = 100;
						this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
						this.$nextTick(()=>{
							this.myLoadingStatus = false;
							this.$refs.myLoading.hideLoading();
							setTimeout(()=>{
								this.addWordLabel(); // 添加文字标签
							}, 610);
						})
						// this.getOverallArrangementDetailsList();
					})
				})
            },
        }
    }
</script>
<style lang="css" scoped>
    @import "./webgl_rxdz_look.css";
	/* @import "@/common/css/common.css"; */
</style>
