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

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

</template>
<script>
	const util = require('@/utils/util.js').default;
	import { MessageBox } from 'mint-ui';
	// 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: "",
				aiPicId: "", // 图生图任务ID
				randomTimer:null,
				timer: 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:'',
					}
				],
				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,
			}
		},
		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;
			// }
			// 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)
			}
		},
		// 页面被展示时执行
		onPageShow: function() {  
			
		},
		//页面被隐藏时执行
        onPageHide: function() {
        },
		beforeDestroy:function(){
			console.warn("***beforeDestroy***");//更新到页面上的数据
			this.stopInterval();
		},
		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);//继续生成下一张
			},
			//预览图片-使用微信自带的预览功能，即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);
						}
					})
				}
			},
			//返回上一页
			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;//可以点击
				}
			},
			//风格选择
			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.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.dialogVisible = false;
				this.dialogAIVisible = false;
				this.subType = type || 0;
				this.startServer();
			},
			cancelHandle(){
				console.log('用户点击取消')
				this.dialogVisible = false;
				this.dialogAIVisible = false;
				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;
					}
					// uni.showLoading({
					// 	icon: 'loading',
					// 	title: '生成中…' + parseInt(random) + '%'
					// })
					// if(!this.showAIImage){
						this.myloading = true;
						this.loadingMsg = '生成中…' + parseInt(random) + '%';
					// }
					this.getOutPicture();
				}else if(single.status=='succeeded'){
					// uni.showLoading({
					// 	icon: 'loading',
					// 	title: '生成中…100%',
					// 	duration:2000,
					// })
					// if(!this.showAIImage){
						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],
				}
				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.next();
						this.$refs.carousel.setActiveItem(this.aiImagesList.length-1);//切换到最后一张
					}, 1000);
				}
			},
			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>