h5-webgl-program/src/components/newQCCom/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 Replicate from "replicate";
    
    const replicate = new Replicate({
        auth: "Token r8_VvWR3EJobLn1G4FNlyEqBZaXxWY4X4E3Yjyfy",
    });
	// 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:[],
				connectUsImg:'',
				curSpaceId:'',
                queryObj:null,
                form:null,
			}
		},
		props:{
			spaceObj: {
				type: Object,
				default: null,
			},
			spaceList: {
				type: [Array ,Object],
				default: [],
			},
			layoutList:{
				type: [Array ,Object],
				default: [],
			}
		},
		watch: {
			spaceObj(newVal, oldVal) {
				if (newVal == null) {
					return;
				}
				console.log("当前空间数据view-mark-watch:", newVal,newVal.layoutSpaceName,newVal.layoutSpaceType);
				this.getAiBeautyFamily();
				// this.curSpaceArea = parseFloat(
				// 	(newVal.spaceWidth * newVal.spaceHeight) / 10000
				// ).toFixed(2);
				// this.getOverallArrangementDetailsList();
			},
			spaceList(newVal, oldVal) {
				if (newVal == null) {
					return;
				}
				console.log("当前空间数据spaceList-watch:", newVal);
				if(newVal && newVal.length>0){
					this.datalist = [];
					newVal.forEach(it=>{
						if(it.spaceName && !it.isSizeLock){
							this.datalist.push(it);
						}
					})
				}
			},
			layoutList(newVal, oldVal) {
				if (newVal == null) {
					return;
				}
				this.updataLable();
			},
            customizedRecordId: {
                handler(newVal) {
                    console.warn("***watch-customizedRecordId***", newVal);
                    if (newVal != null) {
                    	this.getIdData();
                    }
                },
                immediate: true,
            },
		},
		filters:{
		// 	spaceTypeFilter(type){
		// 		let name = spaceTypes[type - 1];
		// 		return name || '-'
		// 	},
		},
		mounted() {//组件挂载时事件
			// console.warn("***mounted-nav***",this.seedItem)
			// if(this.seedItem){
			// 	this.title = this.seedItem.seedText;
			// }
			// wx.checkJsApi({
			// 	jsApiList: ['previewImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
			// 	success: function(res) {
			// 		// 以键值对的形式返回，可用的api值true，不可用为false
			// 		// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
			// 		console.warn("checkJsApi",res)
			// 		// alert('su'+ JSON.stringify(res))
			// 	},
			// 	fail:(err)=>{
			// 		console.warn("checkJsApi-err",err)
			// 		// alert('err'+ JSON.stringify(err) )
			// 	}
			// })
			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)
			}
			this.connectUsImg = 'https://dm.static.elab-plus.com/miniProgram/conentUs.png';
			let firstData = JSON.parse(getStorage('firstData'));
			if(firstData && firstData[0]){
				this.connectUsImg = firstData[0].selectOptionImageUrl;
			}
            let queryObj = getStorage('queryObj') ? JSON.parse(getStorage('queryObj')) : null;
            this.queryObj = queryObj;
		},
		beforeDestroy:function(){
			console.warn("***beforeDestroy***");//更新到页面上的数据
			this.stopInterval();
		},
		computed: {
			aiData() {
				return this.$store.state.aiData;
			},
            landDataId() {
            	return this.$store.state.landDataId;
            },
            houseName() {
            	return this.$store.state.houseName;
            },
			curHouseObj() {
				return this.$store.state.curHouseObj;
			},
            userId() {
            	return this.$store.state.userId;
            },
            customizedRecordId() {
            	return this.$store.state.customizedRecordId;
            },
		},
		methods:{
			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
			updataLable(){
				let list = this.layoutList;
				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){
				this.$parent.changeSpace(item.spaceId);
				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);
			},
			//视角切换
			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);//继续生成下一张
			},
			//预览图片-使用微信自带的预览功能，即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) {
					// 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 || 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();
				// if(!this.showAIImage){
					this.myloading = true;
					this.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){
				//不是首次请求，则无需前置判断 用户上传的也不需要前置处理
				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 && res.success) {
						if (res.success && res.single) {
							let resultImg = res.single;
							resolve(resultImg);
						}else{
							resolve('');
						}
					}else{
						resolve('');
					}
				})
			},
            //直接调接口测试
            async test() {
            	if(!this.styleList || this.curStyleIndex < 0 || !this.styleList[this.curStyleIndex].imgUrl){
            		return false
            	}
            	if(this.$parent.pvCurPageName!="room_show"){//说明用户切换页面了
            		console.warn("***用户已经退出页面***")
            		return false;
            	}
                const output = await replicate.run(
                  "batouresearch/sdxl-controlnet-lora:3bb13fe1c33c35987b33792b01b71ed6529d03f165d1c2416375859f09ca9fef",
                  {
                    input: {
                      seed: null,
                      image: "https://replicate.delivery/pbxt/JiOTMCHj4oGrTTf8Pg2r7vyI8YdXc5jL2IDyC2SfhuggjYe6/out-0%20(1).png",
                      prompt: "shot in the style of sksfer, a woman in alaska",
                      refine: "base_image_refiner",
                      strength: 0.8,
                      scheduler: "K_EULER",
                      lora_scale: 0.95,
                      num_outputs: 1,
                      lora_weights: "https://pbxt.replicate.delivery/mwN3AFyYZyouOB03Uhw8ubKW9rpqMgdtL9zYV9GF2WGDiwbE/trained_model.tar",
                      refine_steps: 20,
                      guidance_scale: 7.5,
                      apply_watermark: true,
                      condition_scale: 0.5,
                      negative_prompt: "",
                      num_inference_steps: 40
                    }
                  }
                );
                console.log(output);
            	// 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: 120000;
            	// 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";
            	// 	}
            	// }
            	// this.curSpaceId = this.spaceObj.spaceId;//生成时的空间id
            	// // let result = await this.prevHandle(parmas);
            	// // console.warn("***prevHandle***",result)
             //    let res = await requestConfig("https://replicate.com/batouresearch/sdxl-controlnet-lora?input=nodejs", parmas);
             //    if (res && res.success) {
                    
             //    }else{
                    
             //    }
                
            },
			//开始图生图流程
			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: 120000;
				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";
					}
				}
				this.curSpaceId = this.spaceObj.spaceId;//生成时的空间id
				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 && 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 && 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 {
					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'){
                    if(single.output){//实际有结果了
                        this.myloading = true;
                        this.loadingMsg = '生成中…100%';
                    }else{//还没有结果，继续请求
                        this.myloading = true;
                        this.loadingMsg = '生成中…99%';
                        this.getOutPicture();//进行下一轮查询
                    }
				}
			},
			//返回结果处理
			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图是哪个空间的，因为会切换空间
				}
				this.aiImagesList.push(_data);
				this.showAIImage = true;//显示AI结果集合-因为生成了AI图片
				if(this.$parent && typeof(this.$parent.clearHandle)=="function" ){
					this.$parent.clearHandle();
				}
				this.stopInterval();
				if(this.aiImagesList.length>1){
					setTimeout(()=>{
						this.$refs.carousel.setActiveItem(this.aiImagesList.length-1);//切换到最后一张
					}, 1000);
				}
			},
			//空间数据整理
			spaceAIHandle(){
				let curHouseObj = this.$parent.curHouseObj;//当前户型数据对象
				let aiImagesList = this.aiImagesList;//AI生成图数据对象
				let wallList = this.$parent.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)
			},
			//进入下一步
			gonext(){
				this.spaceAIHandle()
				router.push({
					name: "webgl_rxdz_test_env",
					query:{
						houseId:this.$route.query.houseId || this.$store.state.houseId,
					}
				});
			},
            submit() {
                this.spaceAIHandle();
                setTimeout(()=>{
                    if(this.customizedRecordId){//修改
                        this.updateHandle();
                    }else{//完全新增
                        this.resultDataHandle();
                    }
                },200)
            },
            //获取作品信息
            async getIdData(){
            	let userId = this.userId || '';
            	let params = {
            		id: this.customizedRecordId,
            		brandId: $config.brandId,
            		houseId: this.houseId,
            		userId,
            		type:'QIANCE',
            	};
            	const res = await requestConfig('getCustomizedRecord', params);
                if (res.success && res.list && res.list[0]) {
                    let single = res.list[0];
                    this.form = single;
                    // this.hardboundEffect = this.form.layoutImgCustomized? [this.form.layoutImgCustomized] : [];//赋值轮播图
                }
            },
            //提交结果数据处理
            async resultDataHandle(){
                
            	// let firstData = JSON.parse(getStorage('firstData'));
            	let secondData = JSON.parse(getStorage('secondData'));
            	let thirdData = JSON.parse(getStorage('thirdData'));
            	let curHouseObj = JSON.parse(getStorage('curHouseObj'));
            	let spaceList = JSON.parse(getStorage('spaceList'));
            	let shottingImg = getStorage('shottingImg');
            	let expand = [];//扩展数据
            	let checkIndexList = [];
                let otherlist = [];
            	let userId = this.userId ? this.userId : '';
            	let houseData = {
            		"layoutId": curHouseObj.id,
            		"layoutName": curHouseObj.name,
            		"layoutArea": curHouseObj.houseArea,
            		"floor": 1,
            		"layoutImgCustomized": shottingImg,
            		"style": "",
            		"houseJson": []
            	}
            	// firstData.forEach(it=>{
            	// 	let _dt = {
            	// 		name:it.name,
            	// 		value:it.selectOptionImageUrl,
            	// 	}
            	// 	expand.push(_dt);
            	// })
                if(secondData){
                    secondData.forEach(it=>{
                        let _dt = {
                            name:it.name,
                            value:it.selectOptionName,
                        }
                        expand.push(_dt);
                    })
                }
                if(thirdData){
                    thirdData.forEach(it=>{
                    	let _dt = {
                    		name:it.spaceName,
                    		value:it.selectOptionName,
                    	}
                    	expand.push(_dt);
                    })
                }
                
                let mainImage = '';
                if(thirdData && thirdData.length>0){
                    mainImage = thirdData[1] ? thirdData[1].hardboundEffect[0] : thirdData[0].hardboundEffect[0];
                }
            	houseData.houseJson = thirdData ? spaceList.concat(thirdData) : spaceList;
            	// houseData.expand = expand;
            	let param = {
            		"brandId": $config.brandId,
            		"houseId": this.houseId || curHouseObj.houseId,
            		"userId": userId,
            		"floot": 1,
            		"spaceName": curHouseObj.name,
            		"spaceStructure": '',
            		"curFloor":1,
            		layoutStruct:[houseData],
            		type:'QIANCE',
            		expand:JSON.stringify(expand),
                    mainImage:mainImage,
            	}
                if(this.landDataId){
                    param.landDataId = this.landDataId;
                }
                if(this.houseName){
                    param.houseName = this.houseName;
                }
            	console.warn("submitHouse-param: ", param);
            	// setStorage('envData',checkIndexList);
            	const loading = this.$loading({
            		lock: true,
            		text: '提交中...',
            		spinner: 'el-icon-loading',
            		background: 'rgba(0, 0, 0, 0.7)'
            	});
            	let res = await requestConfig("saveCustomizedRecord", param);
            	loading.close();
            	if(res && res.success && res.single){//提交成功
            		let data = {
            			houseId:this.houseId || curHouseObj.houseId,
            			id:res.single,
            		}
            		router.push({
            			name: "webgl_rxdz_text_customize",
            			query:data
            		});
            	}
            },
            //修改结果数据处理
            async updateHandle(){
            	// let firstData = JSON.parse(getStorage('firstData'));
            	// let secondData = JSON.parse(getStorage('secondData'));
            	// let thirdData = JSON.parse(getStorage('thirdData'));
            	let curHouseObj = JSON.parse(getStorage('curHouseObj'));
            	let spaceList = JSON.parse(getStorage('spaceList'));
            	let shottingImg = getStorage('shottingImg');
            	let expand = [];//扩展数据
            	let checkIndexList = [];
                let otherlist = [];
            	let userId = this.userId ? this.userId : '';
            	let houseData = {
            		"layoutId": curHouseObj.id,
            		"layoutName": curHouseObj.name,
            		"layoutArea": curHouseObj.houseArea,
            		"floor": 1,
            		"layoutImgCustomized": shottingImg,
            		"style": "",
            		"houseJson": []
            	}

                // let mainImage = '';
                // if(thirdData && thirdData.length>0){
                //     mainImage = thirdData[1] ? thirdData[1].hardboundEffect[0] : thirdData[0].hardboundEffect[0];
                // }
            	houseData.houseJson = spaceList.concat(this.form.layoutStruct[0].houseJson);
            	// houseData.expand = expand;
            	let param = {
                    id:this.customizedRecordId,
            		"brandId": $config.brandId,
            		"houseId": this.houseId || curHouseObj.houseId,
            		"userId": userId,
            		"floot": 1,
            		"spaceName": curHouseObj.name,
            		"spaceStructure": '',
            		"curFloor":1,
            		layoutStruct:[houseData],
            		type:'QIANCE',
            		expand:this.form.expand,
                    // mainImage:this.form.mainImage,
            	}
                if(this.landDataId){
                    param.landDataId = this.landDataId;
                }
                if(this.houseName){
                    param.houseName = this.houseName;
                }
            	console.warn("submitHouse-update-param: ", param);
            	// setStorage('envData',checkIndexList);
            	const loading = this.$loading({
            		lock: true,
            		text: '提交中...',
            		spinner: 'el-icon-loading',
            		background: 'rgba(0, 0, 0, 0.7)'
            	});
            	let res = await requestConfig("saveCustomizedRecord", param);
            	loading.close();
            	if(res && res.success && res.single){//提交成功
            		let data = {
            			houseId:this.houseId || curHouseObj.houseId,
            			id:res.single,
            		}
                    wx.miniProgram.redirectTo({url: '/webgl/pages/webgl_rxdz_text_customize/webgl_rxdz_text_customize?id='+data.id+"&houseId="+this.houseId})
            		// router.push({
            		// 	name: "webgl_rxdz_text_customize",
            		// 	query:data
            		// });
            	}
            },
            
			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>