h5-webgl-program/src/components/newBottomCom/viewMask/viewMask.vue

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

</template>
<script>
	const util = require('@/utils/util.js').default;
	import router from "@/router";
	import { MessageBox } from 'mint-ui';
	import spaceTypes from '@/static/spaceTypesIE.js';
	// const config = require('@/services/url$config.js');
	import touchHandle from '@/mixins/touchHandle.js';
	import {
		setStorage,
		getStorage,
	} from '@/utils/localStorage';
	// import requestConfig from '@/static/lib/requestConfig';
	// const app = getApp(); //获取应用实例
	export default {
		mixins: [touchHandle],
		data: function() {
			return {
				currentIndex:0,	//当前看到的图片序号
				showAIImage: false,//是否显示当前AI结果集合 默认不显示，因为没有
				aiImagesList:[
				],//AI生成的图片列表
				
				styleList: [], //风格列表数据
				curStyleIndex: 0, //当前选中的风格序号
				aiFlag:false,
				aiImage: "",
				inputBase64Url: "",
				aiPicId: "", // 图生图任务ID
				randomTimer:null,
				timer: null,
				outTimer: null,
				imageWidth: 750,
				imageHeight: 448,
				showAIFlag:false,//继续生成状态切换标志
				checked:false,
				shottingImg:'',
				count:0,
				random:1,
				// disableAble:false,
				
				myloading:false,
				loadingMsg:'',
				screenWidth:0,
				screenHeight:0,
				modelType:2,	//当前模型类型，1指创意设计 2指精准设计 默认2
				themeIndex:0,
				themeList:[
					{
						id:1,
						text:'默认',
						prot:'',
					},
					{
						id:2,
						leftColor:'#F4EBDE',
						rightColor:'#C1C9B4',
						text:'莫兰素雅',
						prot:'Soft grays, warm earth tones, subtle blues, soft pinks,',
					},
					{
						id:3,
						leftColor:'#1F1F1F',
						rightColor:'#FFFFFF',
						text:'经典黑白',
						prot:'Classic black and pure white,',
					},
					{
						id:4,
						leftColor:'#6FA5BE',
						rightColor:'#E2CCC5',
						text:'海岸珊瑚',
						prot:'Deep ocean blue paired with vibrant coral red,',
					},
					{
						id:5,
						leftColor:'#849059',
						rightColor:'#E6CEB4',
						text:'森林璀璨',
						prot:'Deep forest green paired with luxurious gold,'
					},
					{
						id:6,
						leftColor:'#A1BACB',
						rightColor:'#E6DFD8',
						text:'梦幻静谧',
						prot:'Dreamy powder blue paired with neutral gray,'
					},
					{
						id:7,
						leftColor:'#303B2B',
						rightColor:'#D8C8A6',
						text:'自然和谐',
						prot:'Natural olive green paired with warm beige,'
					},
					{
						id:8,
						leftColor:'#652C30',
						rightColor:'#D5C3B0',
						text:'醇酒乳香',
						prot:'Rich burgundy paired with soft cream,'
					},
					{
						id:9,
						leftColor:'#E3C7C5',
						rightColor:'#EDE4DB',
						text:'雅致浪漫',
						prot:'Understated taupe paired with romantic pink,'
					},
					{
						id:10,
						leftColor:'#2C3C6E',
						rightColor:'#F0DBBD',
						text:'夜空璀璨',
						prot:'Elegant navy blue paired with glamorous gold,'
					},
					{
						id:11,
						leftColor:'#ACC9A1',
						rightColor:'#E6DCC6',
						text:'复古翠绿',
						prot:'Vintage tan paired with vibrant green,'
					},
					{
						id:12,
						leftColor:'#AAA8A7',
						rightColor:'#D8A176',
						text:'暖阳灰影',
						prot:'Warm orange paired with cool gray,'
					},
					{
						id:13,
						leftColor:'#413D41',
						rightColor:'#D1B687',
						text:'耀眼黑金',
						prot:'black and gold,'
					},
				],
				timeOut:20000,		//超时时间
				subType:0,
				currentImg:null,
				reqList:[
					{
						model:'batouresearch/sdxl-controlnet-lora',
						level:'5',
						aiPicId:'',
						resultImg:'',
					}
				],
				reqListReset:[
					{
						model:'deployments/elabgroup/elab-sdxl-controlnet-lora',
						level:'3',
						aiPicId:'',
						resultImg:'',
					},{
						model:'batouresearch/sdxl-controlnet-lora',
						level:'5',
						aiPicId:'',
						resultImg:'',
					}
				],
				// dialogVisible: false,
				// dialogAIVisible: false,
				datalist:[],
				spaceList:[],
				spaceObj:null,
			}
		},
		props:{
			// layoutList:{
			// 	type: [Array ,Object],
			// 	default: [],
			// }
		},
		computed:{
			curSpaceId() {
				return this.$store.state.curSpaceId;
			},
			curHouseObj() {
				return this.$store.state.curHouseObj;
			},
			arrFrunList() {
				return webglCom.arrFrunList;
			},
			aiData() {
				return this.$store.state.aiData;
			},
			userId() {
				return this.$store.state.userId;
			},
		},
		watch: {
			curHouseObj: {
				handler(newVal,oldVal) {
					console.warn("***curHouseObj-CHANGE-viewMask***", newVal)
					if (newVal) {
						this.initData(newVal);
					}
				},
				immediate: true
			},
			curSpaceId: {
				handler(newVal,oldVal) {
					if (newVal) {
						console.warn("***curSpaceId-CHANGE-viewMask***", newVal,oldVal,this.spaceList)
						if(!this.spaceList){
							this.initData(webglCom.curHouseObj,newVal);
						}else{
							const spaceDetail = this.spaceList.find(it=>it.spaceId == newVal);
							this.spaceObj = spaceDetail;
							this.getAiBeautyFamily();
						}
					}
				},
				immediate: true
			},
			arrFrunList: {
				handler(newVal,oldVal) {
					console.warn("***arrFrunList-CHANGE-viewMask***", newVal,oldVal)
					if (newVal == null) {
						return;
					}
					this.updataLable();
				},
				immediate: true
			},
		},
		filters:{
		// 	spaceTypeFilter(type){
		// 		let name = spaceTypes[type - 1];
		// 		return name || '-'
		// 	},
		},
		mounted() {//组件挂载时事件
			this.screenWidth = window.screen.width;
			this.screenHeight = window.screen.height;
			if(window.innerWidth && window.screen.width){
				this.screenWidth = Math.min(window.innerWidth,window.screen.width)
			}
			if(window.innerHeight && window.screen.height){
				this.screenHeight = Math.min(window.innerHeight,window.screen.height)
			}
		},
		beforeDestroy:function(){
			console.warn("***beforeDestroy***");//更新到页面上的数据
			this.stopInterval();
		},
		methods:{
			initData(data,spaceId=''){
				let spaceDetail = data || webglCom.curHouseObj;
				let spaceList = typeof(spaceDetail.houseJson)=="string" ? JSON.parse(spaceDetail.houseJson) : spaceDetail.houseJson;
				this.spaceList = spaceList;
				this.datalist = [];
				spaceList.forEach(it=>{
					if(it.spaceName && !it.isSizeLock){
						this.datalist.push(it);
					}
				})
				if(spaceId){
					this.spaceObj = this.spaceList.find(it=>it.spaceId == spaceId);
					this.getAiBeautyFamily();
				}
			},
			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
			updataLable(){
				let list = this.arrFrunList;
				this.datalist.forEach(lable=>{
					if(lable.spaceType==15){
						let layoutId = lable.layoutId;
						let layout = list.find(it=>it.id == layoutId);
						if(layout){
							let name = spaceTypes[layout.type - 1];
							lable.text = name;
						}
					}else{
						let name = spaceTypes[lable.spaceType - 1];
						lable.text = name;
					}
				})
				this.$forceUpdate()
				console.warn("***updataLable***",this.datalist)
			},
			swiperChangeImg(e){
				this.currentIndex = e.detail?e.detail.current:e;
				this.checked = this.aiImagesList[this.currentIndex].checked;
				console.warn("***swiperChangeImg***",this.checked);//更新到页面上的数据
			},
			//切换空间
			changeSpace(item){
				if(item.spaceId == this.spaceObj.spaceId){
					return false
				}
				webglCom.changeSpace(item.spaceId);
				this.spaceObj = item;
				this.getAiBeautyFamily()
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_23080417', //点击ID
					clkName: 'changeangle_clk', //点击前往的页面名称
					clkParams: {
						locusName: "空间切换",
						locusValue:item.text,
						spaceId:item.spaceId,
						type:item.text,
					}
				};
				util.trackRequest(param);
			},
			
			showOrHideWebGl(){
				this.showAIImage = !this.showAIImage;
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_23080415', //点击ID
					clkName: 'contrast_clk', //点击前往的页面名称
					clkParams: {
						locusName: "对比",
					}
				};
				util.trackRequest(param);
			},
			//空间或者风格切换
			selectAction(selItem,type,index) {
				console.log('点击动作111：', selItem,type,index)
				var self = this;
				if(this.themeIndex == index){
					return false
				}
				this.themeIndex = index;
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_23112701', //点击ID
					clkName: 'AIstyle_theme_clk', //点击前往的页面名称
					clkParams: {
						locusName: "AI 主题",
						type:this.themeList[this.themeIndex].text
					}
				};
				util.trackRequest(param);
			},
			//切换模式
			changeModel(){
				this.modelType = (this.modelType + 1) >2 ? 1 : 2;
			},
			//保存到相册
			save() {
			    //表示canvas正在绘制，不能进行保存
			    if (!this.aiImagesList || this.aiImagesList.length==0) {
			        return false;
			    }
				var _resultImg = this.aiImagesList[this.currentIndex].image;
			    //正在选择照片，不能生效
			    if (!_resultImg || _resultImg.length==0) {
					this.showToast("请选中图片后再试！");
			        return false;
			    }
			    var para = {
			        type: 'CLK', //埋点类型
			        clkId: 'clk_2cmina_56', //点击ID,固定
			        clkName: "share-savepic", //点击名称
			        expand: {
			            "resultImg": (_resultImg || ""),
			        },
			    }
			    util.trackRequest(para);
				if(navigator.userAgent.toLocaleLowerCase().includes('micromessenger')){
					this.$message("请长按图片保存！");
				}else{
					this.saveImageHandle(_resultImg);
				}
			},
			downloadIamge(imgsrc) {  //下载图片地址和图片名
				var fileName = "4DImage" + util.formatDate(new Date(), "yyyyMMddhhmmss") + '.jpg';
				const image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute("crossOrigin", "anonymous");
				image.onload = ()=> {
					// let canvas = document.createElement("canvas");
					// canvas.width = image.width;
					// canvas.height = image.height;
					// const context = canvas.getContext("2d");
					// context.drawImage(image, 0, 0, image.width, image.height);
					// const url = canvas.toDataURL("image/jpg"); //得到图片的base64编码数据
					const a = document.createElement("a"); // 生成一个a元素
					const event = new MouseEvent("click"); // 创建一个单击事件
					a.download = fileName || "photo"; // 设置图片名称
					a.href = imgsrc; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
					this.showToast("保存成功！");
				};
				image.src = imgsrc;
			},
			saveImageHandle(_resultImg){
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_23080414', //点击ID
					clkName: 'download_clk', //点击前往的页面名称
					clkParams: {
						locusName: "下载",
						img:_resultImg
					}
				};
				util.trackRequest(param);
				this.downloadIamge(_resultImg);
			},
		
			//点赞喜欢
			changeAIImg() {
				// let lastPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length - 2].$vm : null;
				this.checked = !this.checked;//变更选项
				this.aiImagesList[this.currentIndex].checked = this.checked;
				console.warn("***changeAIImg***",this.checked,this.aiData)
				if(this.aiData){//给上一个页面回传生成的数据
					let space = this.aiData.find(it=>{
						return it.spaceId == this.spaceObj.spaceId
					})
					if(space){
						let cind = space.aiImagesList.find(it=>it.image == this.aiImagesList[this.currentIndex].image)
						if(cind){
							cind.checked = this.checked;
						}
					}
				}
				if(this.checked){
					let param = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23080418', //点击ID
						clkName: 'chooseprogramme_clk', //点击前往的页面名称
						clkParams: {
							locusName: "选定风格/视角",
							style:this.styleList[this.curStyleIndex].styleName,
							img:this.aiImagesList[this.currentIndex].image,
						}
					};
					util.trackRequest(param);
				}
			},
			rightScroll(){//右滑
				if(this.currentIndex <= (this.aiImagesList.length - 1) && this.currentIndex > 0){
					// this.currentIndex --;
					this.$refs.carousel.prev();
				}
			},
			leftScroll(){//继续生成
				if(this.currentIndex != this.aiImagesList.length - 1){
					if(this.currentIndex<this.aiImagesList.length - 1){
						// this.currentIndex ++;
						this.$refs.carousel.next();
					}
					return false;
				}
				console.log("***leftScroll***",this.currentIndex,this.aiImagesList.length)
				this.aiSubmit(2);//继续生成下一张
			},
			//预览图片-使用微信自带的预览功能，即H5中不可用
			previewAction() {
				if(wx && typeof(wx.previewImage)=='function'){
					let imglist = this.aiImagesList.map(it=>it.image);
					wx.previewImage({
						current: this.currentIndex,
						urls: imglist,
						success: (res) => {
							console.log('图片预览：', res);
						},
						fail:(err)=>{
							console.warn('图片预览-err：', res);
						}
					})
				}
			},
			mynavigateFuc(e) {
				if (e) {
					let param = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23080408', //点击ID
						clkName: 'WeCom_clk', //点击前往的页面名称
						clkParams: {
							locusName: "联系定制",
						}
					};
					util.trackRequest(param);
					if(window.__wxjs_environment === 'miniprogram'){
						wx.miniProgram.navigateTo({url: '/pages/transfer/transfer?event=openCustomerServiceChat&houseId='+this.$store.state.houseId})
					}else{
						this.$message.warning("敬请期待");
					}
				}
			},
			catchTapEvent:function(){
				return false;
			},
			//获取AI风格列表
			async getAiBeautyFamily() {
				// const spaceName = this.spaceTypes[this.spaceObj.spaceType - 1].title;
				let res = await requestConfig("getHardboundEffects", {
					"houseId": this.$route.query.houseId || this.$store.state.houseId,
					"spaceType": this.spaceObj.layoutSpaceType || this.spaceObj.spaceType,
					"spaceName": this.spaceObj.layoutSpaceName || this.spaceObj.spaceName,
				});
				this.styleList = [];
				// alert("***getAiBeautyFamily-res***"+JSON.stringify(res))
				if (res.success) {
					let list = res.list;
					this.styleList = list;
				}
			},
			//风格选择
			selectStyle(idx){
				if(this.curStyleIndex == idx){
					return false
				}
				this.curStyleIndex = idx;
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_23080416', //点击ID
					clkName: 'AIstyle_ret_clk', //点击前往的页面名称
					clkParams: {
						locusName: "AI 风格",
						type:this.styleList[this.curStyleIndex].styleName
					}
				};
				util.trackRequest(param);
			},
			// AI渲染
			async aiSubmit(type) {
				if(!this.styleList || this.styleList.length==0 || this.curStyleIndex==-1
				|| !this.styleList[this.curStyleIndex].prompt || !this.styleList[this.curStyleIndex].negativePrompt){
					return false;
				}
				// 防止连续点击处理
				if (this.aiFlag) {
					return
				}
				this.aiFlag = true;
				this.aiImage = "";//清空AI结果图
				this.stopInterval();
				this.myloading = true;
				this.loadingMsg = "启动中";
				let shottingImg = await webglCom.creatShotImg();//开始截图-返回的是图片地址
				if(!shottingImg){
					this.showToast("渲染失败，请重试");
					return false;
				}
				// ?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg //阿里OSS
				// "?imageMogr2/auto-orient/format/webp/blur/1x0/quality/75";//七牛云压缩图片
				// shottingImg += "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//压缩图片
				this.shottingImg = shottingImg;
				this.changeImg2Base64(this.shottingImg, false);
				console.warn("***shottingImg***",this.shottingImg)
				if(type==1){
					let param = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23080413', //点击ID
						clkName: 'AIcreate_clk', //点击前往的页面名称
						clkParams: {
							locusName: "AI生成",
							userparamter:{
								shottingImg:this.shottingImg,
								style:this.styleList[this.curStyleIndex].styleName
							}
						}
					};
					util.trackRequest(param);
				}else{
					let param = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23080419', //点击ID
						clkName: 'continueAIcreate_clk', //点击前往的页面名称
						clkParams: {
							locusName: "继续生成",
							userparamter:{
								shottingImg:this.shottingImg,
								style:this.styleList[this.curStyleIndex].styleName
							}
						}
					};
					util.trackRequest(param);
				}
			},
			changeImg2Base64(url, isRepeat) {
				var self = this;
				if(isRepeat && self.inputBase64Url){//重复使用
					self.startServer();
				}else{
					self.startServer();
				}
			},
			//前置逻辑
			async prevHandle(parmas){
				//不是首次请求，则无需前置判断 用户上传的也不需要前置处理
				if(this.subType!=0){
					return '';
				}
				return new Promise(async (resolve, reject) => {
					let _data = JSON.parse(JSON.stringify(parmas))
					delete _data.webhook;
					let res = await requestConfig("img2img_local", _data);
					if (res.success) {
						if (res.success && res.single) {
							let resultImg = res.single;
							resolve(resultImg);
						}else{
							resolve('');
						}
					}else{
						resolve('');
					}
				})
			},
			//开始图生图流程
			async startServer() {
				if(!this.styleList || this.curStyleIndex < 0 || !this.styleList[this.curStyleIndex].imgUrl){
					return false
				}
				if(this.$parent.pvCurPageName!="room_show"){//说明用户切换页面了
					console.warn("***用户已经退出页面***")
					return false;
				}
				let imgUrl = this.styleList[this.curStyleIndex].imgUrl;
				let subType = this.subType;
				let session_hash = Date.now();
				let theme = this.themeList[this.themeIndex];//主题数据
				let prompt = this.styleList[this.curStyleIndex].prompt + theme.prot;
				let noPromot = this.styleList[this.curStyleIndex].negativePrompt;
				let unit = 768 / this.screenWidth;
				this.imageWidth = parseInt((this.screenWidth * unit).toFixed());
				this.imageHeight = parseInt((this.$parent.canvasHeight * unit).toFixed());
				this.timeOut = this.modelType==1? 20000: 50000;
				var parmas = {
					negativePrompt: noPromot,
					prompt: prompt,
					"batchSize": 1,
					brandId: $config.brandId,
					height: this.imageHeight,
					width: this.imageWidth,
					"moduleType": "AI_Biography",
					"steps":20,
					"sampler":"DDIM",
					"controlNetSessionHash":session_hash,
					"cfgScale":12,
					"denoising":0.9,
					image:this.shottingImg,
					styleImage:imgUrl,
					keyword: "replicate",
					model: this.modelType==1? "lucataco/ssd-1b" : 'catio-apps/controlnet-interior-design',
				};
				if(this.modelType==2){//精准设计
					if(subType == 0){//首次
						parmas.model = this.reqList[0].model;
					}else{//重试
						parmas.model = this.reqListReset[0].model;
					}
				}else{//创意设计
					if(subType == 0){//首次
						parmas.model = "lucataco/ssd-1b";
					}else{//重试
						parmas.model = "deployments/elabgroup/elab-ssd-1b";
					}
				}
				let result = await this.prevHandle(parmas);
				console.warn("***prevHandle***",result)
				if(result && result.length>0){
					this.randomHandle(result)
					return false;
				}else{
					if(this.modelType==2){//精准设计
						this.otherHandle(parmas);//发送其他AI请求
					}
					let res = await requestConfig("generateTaskImgToImgForAliyun", parmas);
					console.log("图生图结果：", res);
					let that = this;
					if (res.success && res.single) {
						this.aiPicId = res.single;
						if(this.modelType==2){//精准设计
							if(subType == 0){//首次
								this.reqList[0].aiPicId = this.aiPicId;
							}else{//重试
								this.reqListReset[0].aiPicId = this.aiPicId;
							}
						}
						if (this.aiPicId) {
							this.startInterval();//开始轮询AI生成图的结果
						}else{
							this.stopInterval()
						}
					}else{
						this.stopInterval()
						this.showToast("渲染失败，请重试")
					}
				}
			},
			stopInterval() {
				if (this.randomTimer) {
					clearInterval(this.randomTimer);
					this.randomTimer = null;
				}
				if (this.timer) {
					// clearInterval(this.timer);
					this.timer = null;
				}
				if (this.outTimer) {
					clearTimeout(this.outTimer)
					this.outTimer = null
				}
				this.subType = 0;
				this.reqList.forEach(it=>{
					it.aiPicId = '';
					it.resultImg = '';
				})
				this.reqListReset.forEach(it=>{
					it.aiPicId = '';
					it.resultImg = '';
				})
				// this.random = 1;
				this.myloading = false;
				this.aiFlag = false;
			},
			//随机处理
			randomHandle(resultImg){
				if(this.timer || !resultImg){
					return false;
				}
				let self = this;
				var count = 1;
				var process = 0;//进度
				var randomNum = Math.floor(Math.random() * 4 + 5);//5-8随机数
				this.randomTimer = setInterval(function() {
					process = parseInt(count * 100/(randomNum));
					if(process>=100){
						process = 99;
					}
					if (count < randomNum) {//没有到上限
						// if(!self.showAIImage){
							self.myloading = true;
							self.loadingMsg = '生成中…' + process + '%';
						// }
					}else{
						self.myloading = false;
						self.resultHandle(resultImg);
					}
					count = count + 1;
				}, 1000);
			},
			
			otherHandle(parmas){
				let reqList = [];
				if(this.subType == 0){//首次
					reqList = this.reqList;
				}else{//重试
					reqList = this.reqListReset;
				}
				reqList.forEach(async (it,index)=>{
					let _data = JSON.parse(JSON.stringify(parmas));
					if(index>0){
						_data.model = it.model;
						let res = await requestConfig("generateTaskImgToImgForAliyun", _data);
						if (res.success) {
							console.log('生成结果123：', res);
							it.aiPicId = res.single || '';
						}
					}
				})
			},
			//开始生成AI图的轮询，每隔1s轮询一次
			startInterval() {
				if(this.timer){
					return false;
				}
				let self = this;
				this.count = 1;//轮询次数
				var random = 0;
				this.currentImg = false;//当次生成图还没有结果
				this.timer = 1;
				this.getOutPicture();//不在轮询，而是等结果
				this.setOutTimer();//设置超时逻辑
			},
			//设置一个超时逻辑，到底指定时间后停止轮询，当前是90s
			setOutTimer() {
				if (this.outTimer) {
					clearTimeout(this.outTimer)
					this.outTimer = null
				}
				var self = this;
				this.outTimer = setTimeout(function() {
					if (self.timer) {
						let hasResult = false;
						if(self.modelType==2){//精准设计
							let reqList = [];
							if(self.subType == 0){//首次
								reqList = self.reqList;
							}else{//重试
								reqList = self.reqListReset;
							}
							reqList.some((item,index) => {
								if(item.resultImg){
									hasResult = true;
									self.resultHandle(item.resultImg)
								}
							});
						}
						console.warn("***hasResult***",hasResult)
						if(!hasResult){//没有结果
							self.stopInterval();//停止轮询
							// self.$message.warning("AI开了个小差，请稍后再试");
							// self.dialogVisible = true;//弹出超时提示
							MessageBox.confirm('',{
								title: '提示',
								message: '当前AI使用火爆，请继续尝试?',
								showCancelButton: true,
								confirmButtonText:'继续尝试',
								cancelButtonText:'取消等待',
							}).then(action => {
								console.warn("***MessageBox-action***",action)
								if(action == 'confirm'){
									self.confirmHandle(1);
								}
							}).catch(err=>{
								console.warn("***MessageBox-err***",err)
								if(err == 'cancel'){
									self.cancelHandle();
								}
							});
							// MessageBox.confirm('确定执行此操作?')
						}
					}
					clearTimeout(self.outTimer);
					self.outTimer = null
				}, this.timeOut);
			},
			confirmHandle(type){
				console.log('用户点击确定')
				this.subType = type || 0;
				this.startServer();
			},
			cancelHandle(){
				console.log('用户点击取消')
				this.subType = 0;
			},
			//获取生成图结果
			getOutPicture() {
				if(this.timer==null){
					console.warn("***当前轮询已经结束了1***")
					return false;
				}
				if(this.modelType==2){//精准设计
					let reqList = [];
					if(this.subType == 0){//首次
						reqList = this.reqList;
					}else{//重试
						reqList = this.reqListReset;
					}
					reqList.forEach((item,index) => {
						this.singleHandle(item)
					});
				}
				else{
					this.singleHandle({aiPicId:this.aiPicId})
				}
			},
			//发出获取结果请求获取AI生成结果
			async singleHandle(model){
				if(!model || !model.aiPicId){
					return false;
				}
				var parmas = {
					id: model.aiPicId,
				};
				let res = await requestConfig("getPredictions", parmas);
				if (res.success && res.single) {
					if(this.currentImg){//当前已经有生成图了
						console.warn("***当前已经有最高级生成图了***")
						return false;
					}
					if(this.timer==null){
						console.warn("***当前轮询已经结束了***")
						return false;
					}
					if (res.single.status == 'succeeded' && res.single.output) {
						if(this.modelType==2){//精准设计
							model.resultImg = res.single.output;
							if(model.level=='5'){//最高级了
								this.currentImg = true;
								setTimeout(()=>{
									this.resultHandle(res.single.output)
								},1500)
							}
						}else{
							this.currentImg = true;
							setTimeout(()=>{
								this.resultHandle(res.single.output)
							},1500)
						}
						console.warn("***有生成图了***",model)
					} 
					if(this.modelType==2){//最高优先级返回没有图片，则处理进度条事宜
						if(model.level=='5'){
							this.processHandle(res.single);
						}
					}else{//普通设计
						this.processHandle(res.single);
					}
				} else if (!res.success) {
					this.stopInterval();//停止轮询
					this.showToast("渲染失败，请重试")
				}
			},
			//进度处理
			processHandle(single){
				console.warn("***single***",single.status,single.progress,this.count,single);
				let self = this;
				if(single.status=='starting'){//启动中的逻辑
					if(this.count>=20){
						this.stopInterval();//停止轮询
						// this.dialogAIVisible = true;
						MessageBox.confirm('',{
							title: '提示',
							message: 'AI开了小差，是否重新生成?',
							showCancelButton: true,
							confirmButtonText:'继续生成',
							cancelButtonText:'放弃生成',
						}).then(action => {
							console.warn("***MessageBox-action***",action)
							if(action == 'confirm'){
								this.confirmHandle(0);
							}
						}).catch(err=>{
							if(err == 'cancel'){
								this.cancelHandle();
							}
						});
					}else{
						this.myloading = true;
						this.loadingMsg = '启动中';
					}
					this.count = this.count + 1;
					this.getOutPicture();
				}else if(single.status=='processing'){
					let random = single.progress || 0;
					if(random >= 100){
						random = 99;
					}
					this.myloading = true;
					this.loadingMsg = '生成中…' + parseInt(random) + '%';
					this.getOutPicture();
				}else if(single.status=='succeeded'){
					this.myloading = true;
					this.loadingMsg = '生成中…100%';
				}
			},
			//返回结果处理
			resultHandle(resultImg){
				this.currentImg = true;
				// this.random = 100;
				this.aiImage = resultImg;
				this.showAIFlag = true;
				let newImage = resultImg;
				let aiStyleName = this.styleList[this.curStyleIndex].styleName;
				let _data = {
					image:newImage,
					checked:false,
					list:[newImage],
					spaceId:this.curSpaceId,//记录下当前生成的AI图是哪个空间的，因为会切换空间
					aiStyleName:aiStyleName,
				}
				this.aiImagesList.push(_data);
				this.showAIImage = true;//显示AI结果集合-因为生成了AI图片
				// if(this.$parent && typeof(this.$parent.clearHandle)=="function" ){
				// 	this.$parent.clearHandle();
				// }
				let cpAiData = JSON.parse(JSON.stringify(this.aiData)) || []
				if(cpAiData && this.curHouseObj && this.curHouseObj.houseFloor){//给上一个页面回传生成的数据
					let space = cpAiData.find(it=>{
						return it.houseFloor == this.curHouseObj.houseFloor && it.spaceId == this.spaceObj.spaceId
					})
					if(space){
						let data ={
							aiStyleName:aiStyleName,
							image:newImage,
							checked:false,
						}
						space.aiImagesList.push(data);
					}else{//不存在则构建数据
						let data = {
							houseFloor:this.curHouseObj.houseFloor,//当前的楼层
							spaceId:this.spaceObj.spaceId,
							aiImagesList:[
								{
									aiStyleName:aiStyleName,
									image:newImage,
									checked:false,
								}
							]
						}
						cpAiData.push(data)
					}
					this.$store.dispatch('setAiData', cpAiData)
				}
				this.stopInterval();
				if(this.aiImagesList.length>1){
					setTimeout(()=>{
						this.$refs.carousel.setActiveItem(this.aiImagesList.length-1);//切换到最后一张
					}, 1000);
				}
			},
			//空间数据整理
			spaceAIHandle(){
				let curHouseObj = this.curHouseObj;//当前户型数据对象
				let aiImagesList = this.aiImagesList;//AI生成图数据对象
				let wallList = webglCom.wallList;//当前户型墙体数据列表对象
				let spaceList =  JSON.parse(curHouseObj.houseJson);
				
				//遍历当前户型下的每一个空间
				spaceList.forEach((item)=>{
					let space = item;
					let list = aiImagesList.filter(it=>it.spaceId==space.spaceId);//找到AI生成图中的当前空间
					if(list && list.length>0){
						list = list.filter(it=>it.checked==true);//过滤选中的
						list = list.map(it=>{
							return it.image
						})
						space.hardboundEffect = list;
						console.warn("submitHouse: ", list,space);
					}
					let wall = wallList.find(it=>it.id==space.wallId);
					if(wall){//找到当前空间的墙体数据
						space.wallList = JSON.stringify(wall);
					}
				})
				setStorage('spaceList', spaceList);//把空间选择的数据存入本地缓存里面，方便后续使用
				console.warn("**spaceList**",spaceList)
			},
			async submitHouse(){
				const loading = this.$loading({
					lock: true,
					text: '提交中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				let shottingImg = getStorage('shottingImg');//把空间选择的数据存入本地缓存里面，方便后续使用
				console.warn("***shottingImg***",shottingImg);
				let userId = this.userId ? this.userId : '';
				let curLayoutStruct = JSON.parse(getStorage('curLayoutStruct')) ;//获取楼层的数据-户型数组
				let curHouseObj = this.curHouseObj;//当前户型数据对象
				let curHouseType = getStorage('curHouseType');//把楼层的数据存入缓存中
				let curHouseName = getStorage('curHouseName');//把楼层的数据存入缓存中
				let param = {
					"brandId": $config.brandId,
					"houseId": curHouseObj.houseId,
					"userId": userId,
					"floot": curHouseObj.houseFloor,
					"spaceName": curHouseName,
					"spaceStructure": curHouseType,
					"curFloor":curHouseObj.houseFloor,
					layoutStruct:[],
				}
				let wallList = webglCom.wallList;//当前户型墙体数据列表对象
				//处理每一个楼层
				curLayoutStruct.forEach((layoutStruct,index)=>{
					let houseData = {
						"layoutId": layoutStruct.id,
						"layoutName": layoutStruct.name,
						"layoutArea": layoutStruct.houseArea,
						"floor": layoutStruct.houseFloor,
						"layoutImgCustomized": shottingImg,
						"style": "",
						"houseJson": []
					}
					let spaceList =  JSON.parse(layoutStruct.houseJson);
					let styleList = [];
					//遍历当前户型下的每一个空间
					spaceList.forEach((item)=>{
						let space = JSON.parse(JSON.stringify(item));
						//找到当前空间对象对应的AI数据对象
						let AISpace = null;
						AISpace = this.aiData && this.aiData.find(it=>{
							return it.houseFloor == layoutStruct.houseFloor && it.spaceId == space.spaceId
						});
						if(AISpace){
							let list = AISpace.aiImagesList.filter(it=>it.checked==true);//过滤选中的
							list.forEach(it=>{
								styleList.push(it.aiStyleName);
							})
							list = list.map(it=>{
								return it.image
							})
							space.hardboundEffect = list;
							console.warn("submitHouse: ", list,space);
						}
						let wall = wallList.find(it=>it.id==space.wallId);
						if(wall){//找到当前空间的墙体数据
							space.wallList = JSON.stringify(wall);
						}
						houseData.houseJson.push(space)
					})
					//寻找styleList里面出现最多次数的风格
					if(styleList && styleList.length>0){
						let maxEle = styleList[0];
						let maxNum = 1;
						styleList.reduce((p,k)=>{
							p[k] ? p[k]++ : p[k]=1;
							if(p[k] > maxNum){
								maxEle = k;
								maxNum ++
							}
							return p;
						},{});
						houseData.style = maxEle;
					}
					param.layoutStruct.push(houseData)
				})
				param.expand = getStorage('expand') || ''
				console.warn("submitHouse-param: ", param);
				let trackparam = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_23080409', //点击ID
					clkName: 'submit_clk', //点击前往的页面名称
					clkParams: {
						locusName: "数据提交",
						postAIData:this.aiData,
					}
				};
				util.trackRequest(trackparam);
				let res = await requestConfig("saveCustomizedRecord", param);
				loading.close();
				if(res && res.success && res.single){//提交成功
					let data = {
						houseId:this.$route.query.houseId || this.$store.state.houseId,
						id:res.single,
					}
					webglCom.saveState();//记录下当前的控制器状态
					webglCom.showWebgl = false;//隐藏webgl
					router.push({
						name: "webgl_rxdz_customize",
						query:data
					});
				}
			},
			//进入下一步
			gonext(){
				this.spaceAIHandle()
				router.push({
					name: "webgl_rxdz_test_env",
					query:{
						houseId:this.$route.query.houseId || this.$store.state.houseId,
					}
				});
			},
			showToast(title,time=3000){
				this.myloading = false;
				this.$store.state.loading = true;
				this.$store.state.loadingMsg = title || "";
				setTimeout(()=>{
					this.$store.state.loading = false;
				}, time);
			}
		}
	}
</script>
<style lang="scss" scoped>
    @import "./viewMask.scss";
</style>
<style lang="css" scoped>
	/* @import "@/common/css/common.css"; */
</style>