<!-- 覆盖层操作视图 -->
<div class="mask-view" @touchmove.stop.prevent="catchTapEvent" @click.stop="catchTapEvent">
	<!-- AI图片-轮播图 -->
	<el-carousel v-if="aiImagesList && aiImagesList.length>0" v-show="showAIImage" class="swiper" 
	:autoplay="false" :loop="false" ref="carousel"
	 @change="swiperChangeImg" :initial-index="currentIndex" :indicator-dots="false">
		<el-carousel-item v-for="(item,index1) in aiImagesList" :key="index1">
			<!-- <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" style="width:100%;height:100%;object-fit: cover;" mode="aspectFill" :src="item.image"></image> -->
			<el-image 
				@touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend"
			    style="width:100%;height:100%;"
			    :src="item.image"
			    :preview-src-list="item.list">
			  </el-image>
		</el-carousel-item>
	</el-carousel>
	<div class="indicator-view rows" v-if="aiImagesList && aiImagesList.length>1 && showAIImage">
		<div class="indicator-item" :class="{'active': currentIndex == idx}" v-for="(item, idx) in aiImagesList" :key="idx"></div>
	</div>
	<div class="loading_more" v-if="aiFlag && aiImagesList.length>0 && showAIImage">
		<img class="loading_img"
			src="https://dm.static2.elab-plus.com/aiBeauty/aiBeauty3/icon_loading_Img.png"
			mode="aspectFit"></image>
		<!-- <img class="loading_text"
			src="https://dm.static2.elab-plus.com/aiBeauty/aiBeauty3/icon_loading_text.png"
			mode="heightFix"></image> -->
			自动生成更多图片中{{random+'%'}}...
	</div>
	<div class="btn-view columns" v-if="showAIImage==false">
		<!-- 切换视图-退出当前模式 -->
		<div class="compareBtn btn1" @click.stop="showOrHideWebGl" v-if="aiImagesList && aiImagesList.length>0">
			<img class="compareIcon" src="https://dm.static.elab-plus.com/miniProgram/space1/compareAI_btn.png" mode="widthFix" />
		</div>
		<!-- 切换视角 -->
		<div class="change-angle columns" @click.stop="switchActor" >
			<img class="camera" src="https://dm.static.elab-plus.com/miniProgram/iconfont/camera.png" mode="widthFix"/>
			视角切换
		</div>
	</div>
	
	<!-- 左侧按钮  -->
	<div class="btn-view columns" v-else-if="aiImagesList && aiImagesList.length>0">
		<!-- 下载 -->
		<div class="compareBtn btn1" @click.stop="save" v-if="showAIImage">
			<img class="down" src="https://dm.static.elab-plus.com/miniProgram/iconfont/down.png" mode="widthFix"/>
		</div>
		<!-- 切换视图-退出当前模式 -->
		<div class="compareBtn btn1" @click.stop="showOrHideWebGl">
			<img class="compareIcon" src="https://dm.static.elab-plus.com/miniProgram/space1/compareAI_btn.png" mode="widthFix" />
		</div>
		<!-- 点赞喜欢 -->
		<div class="likeBtn columns" @click.stop="changeAIImg" :class="{like:checked}">
			<div class="iconfont icon-qeuren" style="margin-bottom:10rem;font-size:30rem;"></div>
			喜欢
		</div>
	</div>
	<!-- 微信客服 -->
	<div class="connect-view columns"
		@click.stop="mynavigateFuc" data-jumptype="50">
		<img class="defaultHead" src="https://dm.static.elab-plus.com/miniProgram/conentUs.png" mode="widthFix"/>
	</div>
	<!-- 风格层主操作视图 -->
	<div class="layout-view">
		<!-- 手势区域 -->
		<!-- <div class="signscoll-block"></div> -->
		<!-- 精装修 -->
		<div class="aiEdit">
			<div class="aiStyleList grid" :style="{'height':disableAble?'20rpx':'240rpx'}">
				<div class="scrollViewItem" v-for="(item, idx) in styleList" :key="idx" :id="'styleItem'+idx"
					@click.stop="selectStyle(idx)">
					<div class="styleItem" :class="{'styleItemSelected':curStyleIndex==idx}">
						<img class="styleIcon" :src="item.imgUrl+'?imageMogr2/auto-orient/thumbnail/200x200/blur/1x0/quality/75'" mode="aspectFill"></image>
						<span class="styleTitle">{{item.styleName}}</span>
					</div>
				</div>
			</div>
			<!-- <div class="aiTool">
				<div class="changeBtn" v-if="showAIFlag" @click.stop="changeAIImg">
					<span v-if="checked==false" class="iconfont icon-xingzhuang-tuoyuanxing" style="margin-right:10rpx;font-size:36rpx;"></span>
					<span v-else class="iconfont icon-ziyuan" style="margin-right:10rpx;font-size:36rpx;color:#FAB060"></span>
					{{checked?'已选定图片':'选定图片'}}
				</div>
				<div v-if="showAIFlag" class="submitBtn continue rows justify-center" @click.stop="aiSubmit(2)"
				 :class="{disable:disableAble}">
					继续生成
				</div>
				<div v-else class="submitBtn rows justify-center" @click.stop="aiSubmit(1)" 
				:class="{disable:disableAble}" >
					<img class="magic-icon" src="https://dm.static.elab-plus.com/miniProgram/iconfont/magic.png" mode="widthFix"/>
					AI生成精软装风格
				</div>
			</div> -->
			<div class="btn-list rows rows-between" >
				<div class="btn houseType rows justify-center up1" @click.stop="goback">
					<div class="iconfont icon-huxingjianshang" style="margin-right:17rem;"></div>户型空间
				</div>
				<div class="btn AiBtn rows justify-center up2" @click.stop="aiSubmit(1)">
					<div class="iconfont icon-a-lujing35039" style="margin-right:17rem;"></div>{{aiImagesList && aiImagesList.length>0?'继续生成':'AI精软装'}}
				</div>
			</div>
		</div>
	</div>
	<div class="loadData" v-show="myloading">
		<img src="https://skyforest.static.elaber.cn/detail/loading.gif" alt="" />
		<div class="loadingMsg">{{loadingMsg}}</div>
	</div>
</div>