h5-webgl-program/src/components/newQCCom/viewPlot/viewPlot.vue

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

</template>
<script>
	const util = require('@/utils/util.js').default;
	const config = require('@/services/urlConfig.js');
	import spaceTypes from '@/static/spaceTypesIE.js';
	import {
		Toast
	} from 'mint-ui';
	import {
		getStorage,
	} from '@/utils/localStorage';
	// import Bus from '@/common/bus';
	// import commonMethod from '@/common/commonMethod.js';
	// import requestConfig from '@/static/lib/requestConfig';
	// import bgLoading from "@/components/bgLoading/bgLoading.vue"
	// import { nextTick } from "vue";
	// const app = getApp(); //获取应用实例
	export default {
		data: function() {
			return {
				selectItem:null,
				selectIndex:0,
				tabIndex:0,
				lastTabIndex:0,
				plotList:[],//布局数据
				curHouseObj:null,
				spaceList:[],
				unSelect:false,
			}
		},
		props:{
			overChange: {//当前页面是否处在忙碌状态
				type: Boolean,
				default: false,
			},
		},
		watch: {
			curSpaceId: {
				handler(newVal,oldVal) {
					if (newVal) {
						console.warn("***curSpaceId-CHANGE-viewPlot***", newVal,oldVal)
						// this.initData();
					}
				},
			},
		},
		computed: {
			curSpaceId() {
				return this.$store.state.curSpaceId;
			},
		},
		mixins: [],
		async mounted() {//组件挂载时事件
			this.curHouseObj = JSON.parse(getStorage('curHouseObj'));
			let spaceDetail = this.curHouseObj;
			let spaceList = JSON.parse(spaceDetail.houseJson);
			this.spaceList = spaceList;
			// this.initData();
			// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
			// this.$parent.$parent.updateCareFul = this.initData;//页面注册变更方法
		},
		// 页面被展示时执行
		onPageShow: function() {  
		},
		//页面被隐藏时执行
        onPageHide: function() {
        },
		methods:{
			//初始化数据
			initData(){
				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
				console.warn("***initData***",this.spaceList)
				const spaceDetail = this.spaceList.find(it=>it.spaceId == this.curSpaceId);
				this.selectSpace = spaceDetail;
				if(spaceDetail.layouts){
					this.getOverallArrangementDetailsList(spaceDetail.layouts);
				}
				// console.warn("***viewCareful-change***", this.carefulList)
			},
			async getOverallArrangementDetailsList(layouts) {
				// 设置空间数组的墙体信息
				// this.setSpaceListWallInfo();
				let arr = layouts.map(it => it.layoutId).filter(it => it != 0);
				let parmas = {
					ids: arr,
				};
				// 获取布局信息
				let res = await requestConfig("getOverallArrangementDetailsList", parmas);
				if (!res.success || !res.list || res.list.length == 0) {
					return false;
				}
				this.tabIndex = 0;
				this.plotList = [];
				let list = res.list;
				list.forEach(item=>{
					//布局列表当中不存在当前布局的类型
					let data = this.plotList.find(it=>it.type==item.type);
					if(!data){
						let _d0 = {
							type:item.type,
							name:spaceTypes[item.type - 1],
							count:1,
							dataList:[item],
						}
						this.plotList.push(_d0);
					}else{
						data.count ++;
						data.dataList.push(item);
					}
					if(item.id==this.selectSpace.layoutId){
						this.tabIndex = this.plotList.length - 1;
						this.selectIndex = this.plotList[this.tabIndex].dataList.length - 1;
						this.lastTabIndex = this.tabIndex;
						this.unSelect = true;
					}
				});
				console.warn("***viewPlot***", this.plotList)
			},
			changeType(index){
				this.tabIndex=index;
				this.selectIndex=0;
				let item = this.plotList[this.tabIndex].dataList[this.selectIndex];
				if(item.id==this.selectSpace.layoutId){
					this.unSelect = true;
				}else{
					this.unSelect = false;
				}
			},
			//切换选项
			changeOption(item,id) {
				if (id == this.selectIndex) {
					return false;
				}
				this.selectIndex = id;
				if(item.id==this.selectSpace.layoutId){
					this.unSelect = true;
				}else{
					this.unSelect = false;
				}
				// this.plotList[this.tabIndex].checkedIndex = this.optionIndex;
				// if (this.tabIndex == 0) { //当前为角色时，则需要同步变更上面的
				// 	this.currImgIdx = id;
				// 	this.$refs.carousel.setActiveItem(this.currImgIdx);
				// }
				console.warn("***changeOption***", this.plotList,this.selectIndex)
			},
			closeHandle(){
				this.$parent.rebackLast();//告知页面，关闭当前弹窗
			},
			confirm(){
				if(!this.plotList || this.plotList.length==0){
					Toast({
						message: '没有布局，不能切换',
					});
					return false
				}
				if(this.selectIndex<0 || this.tabIndex<0){
					Toast({
						message: '请选择具体的布局',
					});
					return false
				}
				let plot = this.plotList[this.tabIndex].dataList[this.selectIndex];
				if(!plot){
					Toast({
						message: '请选择具体的布局',
					});
					return false
				}
				let typeName = this.plotList[this.lastTabIndex].name;
				let newTypeName = this.plotList[this.tabIndex].name;
				let optionName = this.plotList[this.tabIndex].dataList[this.selectIndex].name;
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_24012302', //点击ID
					clkName: 'option_clk', //点击前往的页面名称
					clkParams: {
						locusName: this.curHouseObj.houseType + "·" + this.curHouseObj.houseArea + " " + this.curHouseObj.note,
						locusValue: typeName + "调整为" + newTypeName + "-" + optionName,
					}
				};
				util.trackRequest(param);
				this.selectSpace.layoutId = plot.id;
				this.unSelect = true;
				this.$parent.$parent.userSelectPlot(plot,this.selectSpace);//告知页面，用户选择的布局id
				this.lastTabIndex = this.tabIndex;
			},
			//去往详情页面
			goRoam(){
				let item = this.lastCareList[this.selectIndex];
				this.$parent.$parent.goRoam1(item.spaceId);
			},
			callBack(type){
				console.warn("***callBack***",type)
				this.initData();
				this.$parent.$parent.callBackFun = null;//注销父页面的通知回调函数
			}
		}
	}
</script>
<style lang="scss" scoped>
    @import "./viewPlot.scss";
	/* @import "@/common/css/common.css"; */
</style>