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

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

</template>
<script>
	const util = require('@/utils/util.js').default;
	// const config = require('@/services/url$config.js');
	import touchHandle from '@/mixins/touchHandle.js';
	// 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: "",
				taskId: "", // 图生图任务ID
				img2imgTimer: null,
				outTimer: null,
				imageWidth: 750,
				imageHeight: 448,
				showAIFlag:false,//继续生成状态切换标志
				checked:false,
				shottingImg:'',
				count:0,
				random:1,
				// disableAble:false,
				spaceTypes: [{
						icon: "",
						title: "卧室",
						subtitle: "0个布局",
						englishRemark: "bedroom",
					},
					{
						icon: "",
						title: "客厅",
						subtitle: "0个布局",
						englishRemark: "living room",
					},
					{
						icon: "",
						title: "餐厅",
						subtitle: "0个布局",
						englishRemark: "dinning room",
					},
					{
						icon: "",
						title: "厨房",
						subtitle: "0个个布局",
						englishRemark: "kitchen",
					},
					{
						icon: "",
						title: "玄关",
						subtitle: "0个布局",
						englishRemark: "hallway",
					},
					{
						icon: "",
						title: "卫生间",
						subtitle: "0个布局",
						englishRemark: "bathroom",
					},
					{
						icon: "",
						title: "衣帽间",
						subtitle: "0个布局",
						englishRemark: "walkin closet",
					},
					{
						icon: "",
						title: "收纳",
						subtitle: "0个布局",
						englishRemark: "storage room",
					},
					{
						icon: "",
						title: "阳台",
						subtitle: "0个布局",
						englishRemark: "balcony",
					},
					{
						icon: "",
						title: "飘窗",
						subtitle: "0个布局",
						englishRemark: "bay window",
					},
					{
						icon: "",
						title: "链接空间",
						subtitle: "0个布局",
						englishRemark: "connecting space between two rooms",
					},
					{
						icon: "",
						title: "自定义",
						subtitle: "0个布局",
						englishRemark: "room",
					},
				],
				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:'',
					},{
						model:'lucataco/sdxl-controlnet',
						level:'3',
						aiPicId:'',
						resultImg:'',
					}
				],
				reqListReset:[
					{
						model:'deployments/elabgroup/elab-sdxl-controlnet-lora',
						level:'5',
						aiPicId:'',
						resultImg:'',
					},{
						model:'batouresearch/sdxl-controlnet-lora',
						level:'3',
						aiPicId:'',
						resultImg:'',
					}
				],
				dialogVisible: false,
			}
		},
		props:{
			spaceObj: {
				type: Object,
				default: null,
			},
		},
		watch: {
			spaceObj(newVal, oldVal) {
				if (newVal == null) {
					return;
				}
				console.log("当前空间数据view-mark-watch:", newVal);
				this.getAiBeautyFamily();
				// this.curSpaceArea = parseFloat(
				// 	(newVal.spaceWidth * newVal.spaceHeight) / 10000
				// ).toFixed(2);
				// this.getOverallArrangementDetailsList();
			},
		},
		mounted() {//组件挂载时事件
			// console.warn("***mounted-nav***",this.seedItem)
			// if(this.seedItem){
			// 	this.title = this.seedItem.seedText;
			// }
			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)
			}
		},
		// 页面被展示时执行
		onPageShow: function() {  
			
		},
		//页面被隐藏时执行
        onPageHide: function() {
        },
		beforeDestroy:function(){
			console.warn("***beforeDestroy***");//更新到页面上的数据
			this.clearInterval();
		},
		computed: {
			aiData() {
				return this.$store.state.aiData;
			},
			curHouseObj() {
				return this.$store.state.curHouseObj;
			},
		},
		methods:{
			swiperChangeImg(e){
				this.currentIndex = e.detail?e.detail.current:e;
				this.checked = this.aiImagesList[this.currentIndex].checked;
				console.warn("***swiperChangeImg***",this.checked);//更新到页面上的数据
			},
			//视角切换
			switchActor(){
				// this.$parent.clearHandle()
				this.$emit('switchActor');
				this.showAIImage = false;//隐藏AI结果集合-执行切换视角
				let index = this.$parent.currentActor.userIndex;//当前视角的序号
				let nextIndex = (index + 1) % this.$parent.actors.length;
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_23080417', //点击ID
					clkName: 'changeangle_clk', //点击前往的页面名称
					clkParams: {
						locusName: "视角切换",
						type:this.$parent.actors[nextIndex].actorEum
					}
				};
				util.trackRequest(param);
			},
			showOrHideWebGl(){
				// this.$parent.clearHandle()
				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){
						space.aiImagesList[this.currentIndex].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);//继续生成下一张
			},
			//返回上一页
			goback(){
				this.$router.go(-1);
			},
			mynavigateFuc(e) {
				if (e) {
					// this.$parent.clearHandle();
					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,
					"spaceType": this.spaceObj.spaceType,
					"spaceName": this.spaceObj.spaceName,
				});
				this.styleList = [];
				if (res.success) {
					let list = res.list;
					this.styleList = list;
				}
				if(!this.styleList || this.styleList.length==0){
					// this.disableAble = true;//不能点击-没有风格
					let unit = this.screenWidth / 750;//单位rpm 对应 px 的值
					this.$parent.canvasHeight = this.screenHeight - (208 * unit);
					this.$parent.camera.aspect = this.screenWidth / this.$parent.canvasHeight;
					this.$parent.camera.updateProjectionMatrix();
					this.$parent.renderer.setSize(this.screenWidth, this.$parent.canvasHeight);
				}else{
					// this.disableAble = false;//可以点击
				}
			},
			clearInterval() {
				if (this.img2imgTimer) {
					clearInterval(this.img2imgTimer);
					this.img2imgTimer = null;
				}
				this.random = 1;
				this.myloading = false;
			},
			//风格选择
			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;
				if (this.aiImage == "" || !this.aiImage) {
					this.aiImage = ""; // https://dm.static.elab-plus.com/CE4/backImg.png
				}
				this.aiImage = "";
			
				this.clearInterval();
				if(!this.showAIImage){
					this.myloading = true;
					this.loadingMsg = "设计中...";
					// this.$store.state.loading = true;
					// this.$store.state.loadingMsg="设计中...";
				}
				
				// this.inputBase64Url = await this.shottingAction(2);//开始截图-返回的是base64的数据
				// this.startServer();
				// let base64 = await this.$parent.shottingAction(2);//开始截图-返回的是base64
				let shottingImg = await this.$parent.shottingAction();//开始截图-返回的是图片地址
				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);
				}
			},
			image2Base64(imgUrl) {//导入的图片路径
				var toBase64= new Promise(function(resolve, reject){
				    window.URL = window.URL || window.webkitURL;
				    var xhr = new XMLHttpRequest();
				    xhr.open("get", imgUrl, true);
				    // 至关重要
				    xhr.responseType = "blob";//文件流
				    xhr.onload = function (res) {
				        if (res.currentTarget.status == 200) {
				            //得到一个blob对象
				            var blob = res.currentTarget.response;
				            // 至关重要
				            let oFileReader = new FileReader();
				            oFileReader.onloadend = function (e) {
					            let base64 = e.target.result;//base64
					            resolve(base64)
				            };
				            oFileReader.readAsDataURL(blob);
				        }
			        }
				    xhr.send();
			    });
				return toBase64;
			},
			changeImg2Base64(url, isRepeat) {
				var self = this;
				if(isRepeat && self.inputBase64Url){//重复使用
					self.startServer();
				}else{
					self.startServer();
				}
			},
			//前置逻辑
			async prevHandle(parmas){
				return '';//暂不需要开启
				//不是首次请求，则无需前置判断 用户上传的也不需要前置处理
				if(this.subType!=0 || this.userInput){
					return '';
				}
				return new Promise(async (resolve, reject) => {
					let imgRes = await requestConfig("generateTaskImgToImgForAliyun", parmas);
					if (imgRes.success) {
						let aiPicId = imgRes.single || '';
						let res = await requestConfig('generateProcess', {
							id: aiPicId
						})
						if (res.success && res.single) {
							if(res.single.category == 'scheduler'){//命中了
								let resultImg = res.single.urls[0];
								resolve(resultImg);
							}else{
								resolve('');
							}
						}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.taskId = res.single;
						if(this.modelType==2){//精准设计
							if(subType == 0){//首次
								this.reqList[0].aiPicId = this.taskId;
							}else{//重试
								this.reqListReset[0].aiPicId = this.taskId;
							}
						}
						if (!this.img2imgTimer) {
							this.count = 0;
							this.random = 1;
							this.currentImg = false;//当次生成图还没有结果
							this.img2imgTimer = setInterval(() => {
								this.count ++;
								this.getResultForImgToImg();
							}, 1000);
							this.setOutTimer();
						}
					}else{
						this.clearInterval()
						this.aiFlag = false;
						this.aiImage = "";
						this.showToast("渲染失败，请重试")
					}
				}
			},
			//随机处理
			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.img2imgTimer = setInterval(function() {
					process = parseInt(count * 100/(randomNum));
					if(process>=100){
						process = 99;
					}
					if (count < randomNum) {//没有到上限
						if(!self.showAIImage){
							// this.$store.state.loadingMsg='生成中…' + this.random + '%';
							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 || '';
						}
					}
				})
			},
			//设置一个超时逻辑，到底指定时间后停止轮询，当前是90s
			setOutTimer() {
				if (this.outTimer) {
					clearTimeout(this.outTimer)
					this.outTimer = null
				}
				var self = this;
				this.outTimer = setTimeout(function() {
					if (self.img2imgTimer) {
						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.clearInterval();//停止轮询
							// self.$message.warning("AI开了个小差，请稍后再试");
							self.dialogVisible = true;//弹出超时提示
							self.aiFlag = false;
							self.aiImage = "";
						}
					}
					clearTimeout(self.outTimer);
					self.outTimer = null
				}, this.timeOut);
			},
			confirmHandle(){
				console.log('用户点击确定')
				this.dialogVisible = false;
				this.subType = 1;
				this.startServer();
			},
			cancelHandle(){
				console.log('用户点击取消')
				this.dialogVisible = false;
				this.subType = 0;
			},
			// 轮询获取图片结果
			async getResultForImgToImg() {
				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.taskId})
				}
			},
			async singleHandle(model){
				if(!model || !model.aiPicId){
					return false;
				}
				var parmas = {
					id: model.aiPicId,
				};
				let res = await requestConfig("generateProcess", parmas);
				if (res.success && res.single) {
					if(this.currentImg){//当前已经有生成图了
						console.warn("***当前已经有最高级生成图了***")
						return false;
					}
					if (res.single.urls) {
						console.warn("图生图轮询结束: ", res);
						if(this.modelType==2){//精准设计
							model.resultImg = res.single.urls[0];
							if(model.level=='5'){//最高级了
								this.currentImg = true;
								this.resultHandle(res.single.urls[0])
							}
						}else{
							this.resultHandle(res.single.urls[0])
						}
						console.warn("***有生成图了***",model)
						
					} else {
						if (!res.success) {
							this.showToast("渲染失败，请重试")
							this.aiFlag = false;
							this.aiImage = "";
							this.clearInterval();
						}else {
							// this.random = parseInt(this.count * 2);
							this.random = parseInt(this.count * 100/(this.timeOut/1000));
							if(this.random>=100){
								this.random = 99;
							}
							if(!this.showAIImage){
								// this.$store.state.loadingMsg='生成中…' + this.random + '%';
								this.loadingMsg = '生成中…' + this.random + '%';
							}else{
							}
						}
					}
				}
			},
			//返回结果处理
			resultHandle(resultImg){
				this.currentImg = true;
				this.aiFlag = false;
				this.random = 100;
				this.aiImage = resultImg;
				this.showAIFlag = true;
				let newImage = this.aiImage;
				let aiStyleName = this.styleList[this.curStyleIndex].styleName;
				let _data = {
					image:newImage,
					checked:false,
					list:[newImage],
				}
				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.clearInterval();
				if(this.aiImagesList.length>1){
					setTimeout(()=>{
						// this.$refs.carousel.next();
						this.$refs.carousel.setActiveItem(this.aiImagesList.length-1);//切换到最后一张
					}, 1000);
				}
			},
			showToast(title,time=3000){
				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>