aida_front/src/component/home/design/index.vue

<template>
	<div class="designPage">
		<div class="page_content">
			
			<div class="page_content_body">
				<div class="designPage_body">
					<div class="designPage_left" :class="{'active':(domHidden)}" ref="hidden">
						<div class="designPage_left_content">
							<!-- 有图状态 start-->
							 
							<div class="home_left_info">
								<div class="left_info_content scroll_style">
									<div class="left_info_content_body" ref="collection_canvas">
										<div class="right_content_header">
											<div class="content_header_left" style="padding-top: 2rem;">
												<i class="fi fi-rs-comments"></i><span class="content_header_des">
													{{ $t('HomeView.elementTitle') }}
													</span>
											</div>
										</div>	
										<NewCollectionReview id="collectionReview" :probjects="selectProbject" @openCollection="openCollection"></NewCollectionReview>
									</div>
								</div>
								<div v-show="isMannequinShow" class="left_info_hint">
									<span class="icon iconfont icon-zhuyi"></span>
									<span>{{ $t('HomeView.masnnequinHint') }}</span>
								</div>
							</div>
							<!-- 有图状态 end-->
						</div>
					</div>
					<div class="designPage_right">
						<div class="right_top">
						<!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
							<div class="right_top_left">
								<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
									{{ $t('HomeView.Design') }}
								</div>
								<div class="generage_btn_box white">
									<div class="generage_btn started_btn" style="margin-left: 2rem;">
										<div class="" @click.stop="openEditTools()" style="margin-left: 1rem;">
											{{ $t('Header.Tools') }}
										</div>
										<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
										<div class="content" v-show="speedState">
											<div v-for="item in speedList" v-show="(item.value != 'poseTransfer' || selectProbject.type != 'singleProductDesign')" :key="item.value" style="font-size: 1.4rem;" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
										</div>
									</div>
								</div>
								<div class="gallery_btn white" @click="openCanvas()" style="margin-left: auto;">
									{{ $t('Header.toolsCanvas') }}
								</div>
								
								<!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
									@click="resDesignCollection()">
									{{ $t('HomeView.Redesign') }}
								</div> -->
								<div class="silder button_margin_14" v-show="likeDesignCollectionList?.length > 0">
									
								</div>
							</div>
							<div class="right_top_right">
								
							</div>
						</div>
						<div class="right_content_block_box">
							<div class="right_content_block" ref="rightContentBlockBox" @mouseenter="mouseenter($event,'like')">
								<div class="right_content_body">
									<div class="right_content_header">
										<div class="content_header_left">
											<i class="fi fi-rs-comments"></i><span class="content_header_des">
												{{ $t('HomeView.SelectedDesign') }}
												</span>
										</div>
										<div class="generalModel_state">
											<div>
												<selectMenu 
													:selectList="resultTypeList" 
													@change="changeResultType" 
													:isBtnOpen='true'
													:style="{
														'border-radius':'0rem',
														'border':'none',
														'font-weight': '900',
														'border-right':'2px solid rgba(0,0,0,.2)',
														'line-height': '3rem',
														'height': '3rem',
														'background': 'rgba(0,0,0,0)',
													}"
													v-model:select="resultType"
													>
													<template v-slot:btnText>
														{{ $t('Header.Filter') }}
													</template>
												</selectMenu>
											</div>
											<div>
												<selectMenu 
													:selectList="[
														{
															label:$t('Header.expand'),
															value:true,
														},
														{
															label:$t('Header.collapse'),
															value:false,
														},
													]" 
													@change="setUnfold" 
													:isBtnOpen='true'
													:style="{
														'border-radius':'0rem',
														'border':'none',
														'font-weight': '900',
														'border-right':'2px solid rgba(0,0,0,.2)',
														'line-height': '3rem',
														'height': '3rem',
														'background': 'rgba(0,0,0,0)',
													}"
													v-model:select="isUnfold"
													>
													<template v-slot:btnText>
														{{ $t('Header.Unfold') }}
													</template>
												</selectMenu>
											</div>
											<!-- <div class="generalModel_state_item smail" style="margin-right: 1rem;">
												<span>{{ $t('Header.Unfold') }} :</span>
												<a-switch v-model:checked="isUnfold" @change="setUnfold" />
											</div> -->
											<div>
												<selectMenu 
													:selectList="widthList" 
													@change="setSystemDesigner(500)" 
													:isBtnOpen='true'
													:style="{
														'border-radius':'0rem',
														'border':'none',
														'font-weight': '900',
														'line-height': '3rem',
														'height': '3rem',
														'background': 'rgba(0,0,0,0)',
													}"
													v-model:select="widthValue.value"
													>
													<template v-slot:btnText>
														{{ $t('Header.Size') }}
													</template>
												</selectMenu>
											</div>
										</div>
									</div>
									<div v-if="likeDesignCollectionList?.length == 0 && designCollectionList?.length > 0" class="info">
										<img v-if="locale == 'CHINESE_SIMPLIFIED'" src="@/assets/images/homePage/designTutorial_CN.png" alt="">
										<img v-else src="@/assets/images/homePage/designTutorial_EN.png" alt="">
									</div>
									<div class="right_content_img_block scroll_style active">
										<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
											<!-- likeDesignCollectionList -->
											<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
												v-for="(design, index) in selectLikeDesign" :key="design.id || design.designItemId">
												<div class="content_img_flex"
												:class="[design.resultType]"
												@mouseenter="startHover(getMousePosition($event,false),design)"
												@mouseleave="endHover(getMousePosition($event,false),design)"
												@mousedown.stop="designMousedown(getMousePosition($event,false),design,'like')" 
												@touchstart.passive="designMousedown(getMousePosition($event,true),design,'like')"
												@click="designDetail(
														design,
														index,
														selectLikeDesign,
														'like'
													)">
													<img class="content_img" 
														v-if="design?.resultType == 'PoseTransfer' && design?.firstFrameUrl" 
														v-lazy="design?.firstFrameUrl" alt="" 
														@mouseenter.stop="gifPlay($event,design)"
														@mouseleave.stop="gifPause($event,design)" >
													<!-- <div :style="{'background-image': `url(${design?.designOutfitUrl||design?.url})`}" class="content_img" v-if="design?.designOutfitUrl||design?.url" :key="design?.designOutfitUrl" designType="like" :index="index"></div> -->
													<img class="content_img" v-else-if="design?.designOutfitUrl||design?.url" v-lazy="design?.designOutfitUrl||design?.url"
														:key="design?.status" designType="like" :index="index"/>
													<a-spin v-show="!design?.designOutfitUrl && !design?.url && !design?.firstFrameUrl" size="large"></a-spin>

													<!-- <div class="content_img_block_child" @click.stop>
														<div class="content_img_block content_img_GetWidth active childItem"
															:style="likeStyle"
															v-for="childItem,childIndex in design.childList"
														>
															<div class="content_img_flex">
																<img class="content_img" v-show="!design?.generateAwait" :src="childItem.designOutfitUrl||childItem.url" alt="">
																<a-spin v-show="design?.generateAwait" size="large"></a-spin>
															</div>
															<div class="btn" v-show="!childItem?.generateAwait">
																<i @click.stop="openEditBtn(childItem,childIndex,$event)" class="fi fi-br-menu-dots-vertical"></i>
															</div>
														</div>
														<div class="content_img_block content_img_GetWidth active childItem"
															:style="likeStyle"
															v-for="childItem,childIndex in design.childList"
														>
															<div class="content_img_flex">
																<img class="content_img" v-show="!design?.generateAwait" :src="childItem.designOutfitUrl||childItem.url" alt="">
																<a-spin v-show="design?.generateAwait" size="large"></a-spin>
															</div>
															<div class="btn" v-show="!childItem?.generateAwait">
																<i @click.stop="openEditBtn(childItem,childIndex,$event)" class="fi fi-br-menu-dots-vertical"></i>
															</div>
														</div>
													</div> -->
												</div>
												<div class="btn" v-if="design?.designOutfitUrl||design?.url || design?.firstFrameUrl" v-show="!design?.generateAwait">
													<i @click.stop="openEditBtn(design,index,$event)" class="fi fi-br-menu-dots-vertical"></i>
													
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="designPage_left_bottom left" v-show="!designTools?.designTools" @click="setShowHide('domHidden')" >
									<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
								</div>
								<div class="designPage_left_bottom right" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionList.length > 0 && !designTools?.designTools">
									<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
								</div>
							</div>
							<div class="right_content_block recycleBin" @mouseenter="mouseenter($event,'recycle')" :class="{recycleBinShow:recycleDomHidden}">
								
								<div class="right_content_body">
									<div class="right_content_header">
										<div class="content_header_left">
											<i class="fi fi-rs-comments"></i><span class="content_header_des">
												{{ $t('HomeView.GeneratedDesign') }}
												</span>
										</div>
									</div>
									<div class="right_content_img_block scroll_style Guide_1_17"  :class="[driver__.driver?'showEvents':'']">
										<div class="right_content_img_item" ref="collItemDom" designType="disLike" :index="0">
											<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
												<a-spin size="large" class="content_img_flex"></a-spin>
											</div>
											<div class="content_img_block content_img_GetWidth" v-for="(
													design, index
												) in designCollectionList" :key="design?.designItemId" :style="collStyle">
													<div class="content_img_flex" 
													:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
													@mousedown.stop="designMousedown(getMousePosition($event,false),design,'disLike')" 
													@touchstart.passive="designMousedown(getMousePosition($event,true),design,'disLike')"
														@click="
														designDetail(
															design,
															index,
															designCollectionList,
															'disLike'
														)">
														<img class="content_img" 
															v-if="design.resultType == 'PoseTransfer'" 
															v-lazy="design.firstFrameUrl" alt="" 
															@mouseenter.stop="gifPlay($event,design)"
															@mouseleave.stop="gifPause($event,design)" >
														<img class="content_img" v-show="!design?.generateAwait" v-lazy="design.designOutfitUrl || design.url" designType="disLike" :index="index"/>
														<a-spin v-show="design?.generateAwait" size="large"></a-spin>
													</div> 
													<div class="btn">
														<div class="icon iconfont icon-jushoucang icon_like" @click="likeDesignCollection(design,index,design.resultType)">
														</div>
														<i class="fi fi-rr-trash icon_delete" @click="setDeleteDesign(design,index)">
														</i>
													</div>
											</div>
											
										</div>
									</div>
								</div>
								
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<div ref="designBtn"  class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == selectEditBtn?.designItemId||openEditBtnId == selectEditBtn?.id}">
			<div class="item" v-show="selectEditBtn?.resultType == 'Design'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'ToProductImage','add','like')">
				<div class="text">{{$t('Header.toolsToProduct')}}</div>
				<i class="fi fi fi-ss-box-open"></i>
			</div>
			<div class="item" v-show="(selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight')" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'Relight','add','like')">
				<div class="text">{{$t('Header.toolsRelight')}}</div>
				<i class="fi fi fi-br-keyboard-brightness"></i>
			</div>
			<div class="item" v-show="(selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight') && (selectProbject.type != 'singleProductDesign')" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'PoseTransfer','add','like')">
				<div class="text">{{$t('Header.toolsToTransferPose')}}</div>
				<i class="fi fi fi-rr-play-alt"></i>
			</div>
			<div class="item" v-show="selectEditBtn?.resultType != 'Design'" @click="setNoDesignLike(selectEditBtn,selectEditBtnIndex,selectEditBtn?.resultType,'disLike')">
				<div class="text">{{$t('Header.Delete')}}</div>
				<i class="fi fi-rr-trash icon_delete">
				</i>
			</div>
			<div class="item" v-show="selectEditBtn?.resultType == 'Design'" @click="dislikeDesignCollection(selectEditBtn,selectEditBtn?.resultType,selectEditBtnIndex)">
				<div class="text">{{$t('Header.onLiked')}}</div>
				<i class="icon iconfont icon-jushoucang icon_like">
				</i>
			</div>
			
		</div>
		<collectionModal ref="collectionModal"></collectionModal>
		<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
		<!-- 导出缩略图的蒙层 start-->
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>

		<!-- 导出缩略图的蒙层 end-->
		<!-- design collection的进度蒙层  start-->
		<!-- design collection的进度蒙层  end-->
		<affiche ref="affiche"></affiche>
		<DesignDetailcopy v-if="detailDestroy" ref="designDetail" @destroy="setDetailDestroy" @finishRedesign="finishRedesign"></DesignDetailcopy>
		<editDesignType ref="editDesignType"
			@addGenerateImg="addGenerateImg"
			@upDataDesignLikeList="generateLoad"
			:onlike="onLike"
			:productData="{
				upload:upload,
				RelightDirection:RelightDirection,
				RelightDirectionList:RelightDirectionList,
			}" 
			:isProductimg="true"></editDesignType>
		<designTools ref="designTools" :source="'design'" @editToolsSuccess="generateLoad"></designTools>
	</div>

</template>

<script lang="ts">
import { defineComponent, h, ref, computed, toRefs, createVNode,provide,nextTick,reactive,onBeforeUnmount, toRef, watch} from "vue";
// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
import generalCanvas from "@/component/modules/generalCanvas.vue";
import affiche from "@/component/HomePage/affiche.vue";
import DesignDetailcopy from "@/component/Detail/DesignDetail.vue";
import html2canvas from "html2canvas";
import { message,Modal } from "ant-design-vue";
import { useStore } from "vuex";
import { setGradual } from "@/tool/util";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
import editDesignType from './editDesignType/index.vue'
// import JSZip, { forEach } from "jszip";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import i18n from "@/lang";
import { useI18n } from "vue-i18n";
import { getMousePosition } from "@/tool/mdEvent";
import { removeClass } from "element-plus/es/utils";
import collectionModal from './collection.vue'
import designTools from './tools.vue'
import selectMenu from '@/component/modules/selectMenu.vue'
import { forEach } from "jszip";

export default defineComponent({
	name: "homePage",
	components: {
		collectionModal,
		// HeaderComponent,
		NewCollectionReview,
		affiche,
		generalCanvas,
		DesignDetailcopy,
		editDesignType,
		designTools,
		selectMenu,
	},
	emits:['setTask'],
	 activated() {
  },
  deactivated() {
  },
  props:['isState'],
	setup(props,{emit}) {
		const {t,locale} = useI18n()
		const store = useStore();
		const editDesignType = reactive({
			selectProbject:computed(()=>{
				return store.state.Workspace.probjects
			}),
			upload:{id:store.state.Workspace.probjects.id},
			RelightDirectionList:[
				{
					value:'Right Light',
					label:t('ProductImg.RightLight')
				},{
					value:'Left Light',
					label:t('ProductImg.LeftLight')
				},{
					value:'Top Light',
					label:t('ProductImg.TopLight')
				},{
					value:'Bottom Light',
					label:t('ProductImg.BottomLight')
				}
			],
			RelightDirection:'Right Light'
		})
		let likeDesignCollectionList: any = computed(() => {
			return store.state.HomeStoreModule.likeDesignCollectionList;
		});
		let deleteDesignCollectionList: any = computed(() => {
			return store.state.HomeStoreModule.deleteDesignCollectionList;
		});
		let designCollectionList: any = computed(() => {
			return store.state.HomeStoreModule.designCollectionList;
		});
		let userDetail= computed(()=>{
			return store.state.UserHabit.userDetail
		})
		let bindEmail= computed(()=>{
			return store.state.UserHabit.bindEmail
		})
		let userGroupId: any = computed(() => {
			return store.state.HomeStoreModule.userGroupId;
		}); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
		let setPortfolio = (data:any)=>{
			portfolio.value = data
		}
		provide('setPortfolio',setPortfolio)
		let designCollectionId: any = computed(() => {
			return store.state.HomeStoreModule.designCollectionId;
		});
		let designId: any = computed(() => {
			return store.state.HomeStoreModule.designId;
		});
		let contentImgMax = {
			width:'',
			height:'',
		}
		let contentImg = {
			width:'',
			height:'',
		}
		let exportNav = ref([
			{
				name:useI18n().t('HomeView.moodboard'),
				change:true,
				noChange:true,
				value:'moodboardFiles',
			},{
				name:useI18n().t('HomeView.printboard'),
				change:true,
				noChange:false,
				value:'printboardFiles',
			},{
				name:useI18n().t('HomeView.colorboard'),
				change:true,
				noChange:false,
				value:'colorBoards',
			},{
				name:useI18n().t('HomeView.sketchboard'),
				change:true,
				noChange:false,
				value:'sketchboardFiles',
			},{
				name:useI18n().t('HomeView.mannequins'),
				change:true,
				noChange:true,
				value:'',
			},
		])
		const dataDom = reactive({
			collectionModal:null as any,
			editDesignType:null as any,
			designBtn:null as any,
			designTools:null as any,
		})
			//可使用的tools类型
		let speed = reactive({
			speedList:[
				{
					label:computed(()=>t('Header.toolsToProduct')),
					value:'toProduct',

				},{
					label:computed(()=>t('Header.toolsRelight')),
					value:'relight',
				},{
					label:computed(()=>t('Header.toolsToTransferPose')),
					value:'poseTransfer',
				},
			],
			speedState:false,
			speedData:{
				label:computed(()=>t('Header.toolsToProduct')),
				value:'toProduct',
			},
		})
		const openSpeed = ()=>{
			speed.speedState = !speed.speedState
			if(speed.speedState){
				document.addEventListener('click',openSpeed)
			}else{
				document.removeEventListener('click',openSpeed)
			}
		}
		const setSpeed = (item:any)=>{
			speed.speedState = false
			document.removeEventListener('click',openSpeed)
			speed.speedData = item
		}
		const openEditTools = ()=>{
			dataDom.designTools.init(speed.speedData.value,likeDesignCollectionList.value,t,locale)
		}
		const openCanvas = ()=>{
			dataDom.designTools.init('editCanvas','',t,locale)
		}
		const designData = reactive({
			openEditBtnId:-1,
			selectEditBtn:null as any,
			selectEditBtnIndex:-1,
			likeLoading: false, //喜欢防抖
			widthList:[
				{
					label:t('Header.Small'),
					value:170,
				},{
					label:t('Header.Medium'),
					value:250,
				},{
					label:t('Header.Large'),
					value:400,
				}
			],
			selectDesign:null as any,//当前选择的design
			isUnfold:false,
			selectLikeDesign:[] as any,
			//类型
			resultTypeList:[
				{
					label:t('Header.All'),
					value:'All',
				},{
					label:t('Header.Design'),
					value:'Design',
				},{
					label:t('Header.Product'),
					value:'Product',
				},
				// ,{
				{
					label:t('Header.PoseTransfer'),
					value:'PoseTransfer',
				},
			],
			resultType:'All',
			likeDesignTools:false,
		})
		watch(()=>likeDesignCollectionList.value.length,(val)=>{
			if(val>0){
				uploadLikeDom()
				setPrductimgAll()
			}else{
				designData.selectLikeDesign = []

			}
		})
		provide('exportNav',exportNav)
		let isShowOperate = ref(false)
		let driver__:any = computed(()=>{
			return store.state.Guide.guide
		})
		let likeDesignItemIdList = ref([])
		let workspacePosition:any = computed(()=>{
			return store.state.Workspace.probjects.positionList
		})
		let allBoardData:any = computed(()=>{
			return store.state.UploadFilesModule.allBoardData})
		let isMannequinShow = ref(false)
		let chooseIsDesign:any = computed(()=>{
			return store.state.UploadFilesModule.chooseIsDesign})
		let portfolio:any = ref({})
		provide('portfolio',portfolio)
		let showDesignMark = ref(false)
		let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
		
		const collItemSize = reactive({
			widthValue:{
					label:'Medium',
					value:170,
				},
			collValue:6,
			padding:60,
			likeStyle:{
				width:'240px',
				height:'370px',
				position:'absolute',
			},
			collStyle:{
				width:'0',
				height:'0',
				position:'absolute',
			},
			itemStyle:{
				width:0,
				height:0,
			},
			scale:[1,1.54],
			collTime:null as any,
			isMove:false,
		})
		const posiitonData = ref({
			likeElList:[] as any,
			likeSelectIndex:0,
			generateElList:[] as any,
			generateSelectIndex:0,
		})
		let likeItemDom = ref()
		let collItemDom = ref()
		let domHidden = ref(JSON.parse(sessionStorage.getItem('domHidden') as any) || false);
		let recycleDomHidden = ref(false);
		if(designCollectionList.value.length>0){
			recycleDomHidden.value = JSON.parse(sessionStorage.getItem('recycleDomHidden') as any) || false
		}
		let getDesignTime = null as any;
		const setSystemDesigner = (time:any)=>{
			clearTimeout(collItemSize.collTime)
			collItemSize.collTime = setTimeout(()=>{
			nextTick(()=>{
				let parentWidth = likeItemDom.value.parentElement.offsetWidth
				collItemSize.widthValue.value = collItemSize.widthValue.value == -1?100:collItemSize.widthValue.value
				collItemSize.widthValue.value = collItemSize.widthValue.value > parentWidth?parentWidth:collItemSize.widthValue.value
				collItemSize.collValue = Math.floor(parentWidth / collItemSize.widthValue.value)
				collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.widthValue.value))
				let value = collItemSize.collValue
				console.log(parentWidth,collItemSize,value)

				collItemSize.itemStyle.width = (parentWidth - collItemSize.padding - (value * 10)) / value
				collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
				
				collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
				collItemSize.collStyle.height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1] + 'px'

				collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
				collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
				let elArr = likeItemDom.value.children
				posiitonData.value.likeElList = []
				for(let i = 0;i < elArr.length;i++){
					posiitonData.value.likeElList.push({
						el: elArr[i], 
						sort: designData.selectLikeDesign[i].sort - 1, 
						// sort: likeDesignCollectionList.value[i].sort - 1, 
						index: i,
						userLikeSortId:designData.selectLikeDesign[i].userLikeSortId || designData.selectLikeDesign[i].id
						// userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
					});
				}
				moveItem('like')
			})
			},time)
		}
		const setDesignItemStyle = ()=>{
			posiitonData.value.generateElList = []
			if(!collItemDom.value)return
			let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
			designCollectionList.value.forEach((item:any,index:any)=>{
				posiitonData.value.generateElList.unshift({
					el: elArr[index], 
					sort: designCollectionList.value.length - index - 1, 
					index: designCollectionList.value.length - index - 1,
					userLikeSortId:item.designItemId || item.id
				});
			})
		}

		const setDeleteDesign = (value:any,index:any)=>{
			store.commit("setDeleteDesignCollectionList",index);
			let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
			posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
			
			posiitonData.value.generateElList.forEach((item:any)=>{
				if(item.sort > collItem.sort) item.sort --
				if(item.index > collItem.index) item.index --
			})
			moveItem('')
		}
		const cancelDeleteDesign = (index:any)=>{
			store.commit("cancelDeleteDesignCollectionList",index);
		}
		const designMousedown = (e:any,design:any,str:string)=>{
			if(str != 'disLike'){
				if(design.resultType != 'Design' || designData.isUnfold)return
				if(str != 'like' && showDesignMark.value) return
			}
			let Id = design.userLikeSortId || design.id || design.designItemId
			let arr = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
			let item:any  = arr.filter((item:any)=>item.userLikeSortId == Id)[0]
			item.el.style.zIndex = 2;
			item.el.style.transition = 'all 0s';
			let startX = e.clientX,
			startY = e.clientY,
			left = item.el.offsetLeft,
			top = item.el.offsetTop;
			collItemSize.isMove = false
			let moveFun = (e:any) => {
				collItemSize.isMove = true
				let X = e.clientX - startX + left;
				let Y = e.clientY - startY + top;
				item.el.style.left = `${X}px`;
				item.el.style.top = `${Y}px`;
				reRange(item, X, Y,str);
			};
			let mouseUpFun = ()=>{
				document.removeEventListener('mousemove',mouseMove)
				document.removeEventListener('touchmove',touchmove)

				document.removeEventListener('mouseup',mouseUpFun) 
				document.removeEventListener('touchend',mouseUpFun) 
				item.el.style.zIndex = 1;
				item.el.style.transition = 'top,left .5s';
				moveItem(str);
				if(str == 'like')sortDesignCollection()
			}
			let mouseMove = function(event:any){
				let e = getMousePosition(event,false)
				moveFun(e)
			}
			let touchmove = function(event:any){
				let e = getMousePosition(event,true)
				moveFun(e)
			}

			document.addEventListener('mousemove',mouseMove)
			document.addEventListener('touchmove',touchmove)

			document.addEventListener('mouseup',mouseUpFun) 
			document.addEventListener('touchend',mouseUpFun) 
		}
		//排序  从大到小
		const sortDesignCollection = ()=> {
			let arrData:any = []
			if(!likeDesignCollectionList.value)return
			likeDesignCollectionList.value.forEach((likeItem:any)=>{
			    let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId || item.userLikeSortId == likeItem.id)[0]
				likeItem.sort = item.sort + 1
				let obj = {
					id:likeItem.userLikeSortId || likeItem.id,
					"sort": item.sort + 1,
					"userLikeGroupId": likeItem.userLikeGroupId,
					"userLikeId": likeItem.id
				}
				arrData.push(obj)
			})
			let data = {
				"userLikeGroupId": userGroupId.value,
				"userLikeSortList": arrData
			}
			Https.axiosPost(Https.httpUrls.designSort, data).then((rv:any)=>{
			})
		}
		const mouseenter = (e:any,str:string)=>{
		}
		const reRange = (item:any, x:number, y:number,str:string)=>{
			let elList = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
			let index = str == 'like'?posiitonData.value.likeSelectIndex:posiitonData.value.generateSelectIndex
			let value = collItemSize.collValue
			let width,height,num
			if(str == 'like'){
				num = value 
				width = collItemSize.itemStyle.width
				height = collItemSize.itemStyle.height
			}else{
				num = 3
				width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
				height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
			}
			let padding = str == 'like'?collItemSize.padding/2:0
			let moveIndex = Math.round((x-padding) / (width + 10)) + Math.round(y / (height + 10)) * num;
			moveIndex = elList.length - 1 - moveIndex
			moveIndex = moveIndex < 0 ? 0 : moveIndex;
			moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
			if(moveIndex != index){
				if(str == 'like'){
					posiitonData.value.likeSelectIndex = moveIndex;
				}else{
					posiitonData.value.generateSelectIndex = moveIndex;
				}
				let currentSort = item.sort;
				for(let i = 0;i < elList.length;i++){
					if(currentSort < moveIndex){
						if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
							elList[i].sort -= 1;
						};
					}else if(currentSort > moveIndex){
						if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
							elList[i].sort += 1;
						};
					}
				};
				elList[item.index].sort = moveIndex;
				moveItem(str);
			}
		}
		const setLikeDislLike = (str:string,value:any)=>{
			posiitonData.value.likeSelectIndex = 0
			nextTick(()=>{
				if(str == 'like'){
					designData.selectLikeDesign = []
					let elArr = likeItemDom.value.children
					// posiitonData.value.likeElList.push({
					// 	el: elArr[0], 
					// 	sort: value.sort - 1, 
					// 	index: value.sort - 1,
					// 	userLikeSortId:value.userLikeSortId
					// });
					let collItem = posiitonData.value.generateElList.filter((item:any)=>(item.userLikeSortId == value.designItemId || item.userLikeSortId == value.id))[0]
					if(collItem){
						posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
						posiitonData.value.generateElList.forEach((item:any)=>{
							if(item.sort > collItem.sort){
								item.sort-=1
							}
						})
					}
				}else if(str == 'disLike'){
					let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
					// posiitonData.value.likeElList = posiitonData.value.likeElList.filter((item:any)=>(item.sort + 1) != value.sort)
					// posiitonData.value.likeElList.forEach((item:any)=>{
					// 	if(item.sort > value.sort - 1){
					// 		item.sort-=1
					// 	}
					// })
					posiitonData.value.generateElList.push({
						el: elArr[elArr.length-1], 
						sort: posiitonData.value.generateElList.length, 
						index: posiitonData.value.generateElList.length,
						userLikeSortId:value.designItemId||value.id
					});
				}
				setSystemDesigner(100)
				setDesignItemStyle()
				uploadLikeDom()

				// moveItem('disLike');
			})
		}
		//排列
		const moveItem = (str:any)=>{
			let elLikeList = posiitonData.value.likeElList
			let generateElList = posiitonData.value.generateElList
			let value = collItemSize.collValue
			let width:any,height:any
			width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
			height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
			  
			// let num = str == 'like'?value:3
			nextTick(()=>{
				for(let i = 0;i < elLikeList.length;i++){
					elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
					elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
				}
				for(let i = 0;i < generateElList.length;i++){
					generateElList[i].el.style.left = (generateElList.length - 1 - generateElList[i].sort) % 3 * (width +10) + 'px';
					generateElList[i].el.style.top = parseInt(String((generateElList.length - 1 - generateElList[i].sort) / 3)) * (height +10) + 'px';
				}
			})
			
		}
		const openCollection = (str:string)=>{
			dataDom.collectionModal.init(str)
		}
		const openEditBtn = (design:any,index:number,event:any)=>{
			if(designData.selectLikeDesign[index].resultType != 'Design'){
				designData.selectDesign = designData.selectLikeDesign.filter((item:any)=>(item.resultType == 'Design' && item.userLikeSortId == designData.selectLikeDesign[index].parentId))[0]
			}else{
				designData.selectDesign = designData.selectLikeDesign[index]
			}
			designData.openEditBtnId = design.designItemId||design.id
			designData.selectEditBtn = design
			designData.selectEditBtnIndex = index
			let width = event.target.offsetWidth
			let height = event.target.offsetHeight
			let parentRect = dataDom.designBtn.parentElement.getBoundingClientRect()
			
			let x = event.clientX - parentRect.x - event.offsetX + width
			let y = event.clientY - parentRect.y - event.offsetY + height
			dataDom.designBtn.style.left = x+'px'
			dataDom.designBtn.style.top = y+'px'
			
			let removeEditBtnId = ()=>{
				designData.openEditBtnId = -1
				document.removeEventListener('click',removeEditBtnId)
			}
			document.addEventListener('click',removeEditBtnId)

		}
		let setEditDesignType = (arr:any,index:any,type:any,status:any,listType:string)=>{
			arr = JSON.parse(JSON.stringify(arr))
			store.commit('setOpenChatStatus',false)
			let item = arr[index]
			if(status == 'add'){
				item.sourceUrl = item.designOutfitUrl || item.url
			}else{
				
			}
			arr[index].resultType = type
			// dataDom.editDesignType.isProductimg = isLike
			dataDom.editDesignType.isProductimg = true
			clearInterval(prductimgTime.ToProductImage)
			clearInterval(prductimgTime.PoseTransfer)
			clearInterval(prductimgTime.Relight)
			arr[index].sort = arr[index].oldSort || arr[index].sort
			dataDom.editDesignType.init(arr,index,null,status,listType)
			if(item != 'Design'){
				designData.selectDesign = designData.selectLikeDesign.filter((item:any)=>(item.resultType == 'Design' && item.userLikeSortId == designData.selectLikeDesign[index].parentId))[0]
			}else{
				designData.selectDesign = designData.selectLikeDesign[index]
			}
			dataDom.editDesignType.isLike = false
			// dataDom.editDesignType.productimgRelightDirection = editDesignType.RelightDirection
			dataDom.editDesignType.isComparison = true
		}
		const addGenerateImg = async (data:any)=>{
			if(!data.id)return
			await nextTick().then(()=>{
				designData.isUnfold = true
				uploadLikeDom()
			})
			upDataSuccess(data)
		}
		const setNoDesignLike = (design:any,index:any,type:any,str:string) => {
			let url
			let designItem = design || designData.selectEditBtn
			let data = {
				toProductImageResultId:[(designItem.designItemId || designItem.id)],
				projectId: store.state.Workspace.probjects.id,
				collectionSortParentId:designData?.selectDesign?.parentId || designItem?.parentId,
			} as any
			let params = {} as any
			if(type == 'ToProductImage' || type == 'Relight'){
				if(str == 'like'){
					url = Https.httpUrls.productImageLike
				}else{
					url = Https.httpUrls.productImageUnLike
				}
			}else if(type == 'PoseTransfer'){
				url = Https.httpUrls.poselikeOrDisike
				if(str == 'like'){
					params = {
						likeOrDislike:'like',
						transformedId:designItem.id,
						projectId:store.state.Workspace.probjects.id,
						collectionSortParentId:designItem.parentId || designData?.selectDesign?.userLikeSortId,
					}
				}else{
					params = {
						likeOrDislike:'dislike',
						transformedId:designItem.id,
						projectId:store.state.Workspace.probjects.id,
						collectionSortParentId:designItem.parentId || designData?.selectDesign?.userLikeSortId,
					}
				}
			}else{
				if(str == 'like'){
					url = Https.httpUrls.productImageLike
				}else{
					url = Https.httpUrls.productImageUnLike
				}
			}
			designData.likeLoading = true;
			Https.axiosPost(url, data,{params:params.likeOrDislike?params:''}).then(
				async (rv) => {
					await new Promise((resolve, reject) => {
						if(str == 'like'){
							likeDesignCollectionList.value.forEach((item:any)=>{
								if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
									if(!item?.childList)item.childList = []
									// if(item?.childList)
									const removeIndex = item?.childList.findIndex(childItem => childItem?.taskId === designItem?.taskId);
									if (removeIndex !== -1) {
										item.childList[removeIndex] = designItem
									}else{
										item.childList.push(designItem)
									}
								}
							})
						}else{
							likeDesignCollectionList.value.forEach((item:any)=>{
								if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
									item.childList.forEach((childItem:any)=>{
										if(childItem.sort > designItem.oldSort){
											childItem.sort -= 1
										}
									})
									item.childList = item.childList.filter((childItem:any)=>{
										return childItem.id != designItem.id
									})
								}
							})
						}
						resolve('')
					})
					
					nextTick().then(()=>{
						designData.isUnfold = true
						uploadLikeDom()
					})
					

					//一下代码是生成的design时候也可以toproduct
					// if(str == 'like'){
					// 	let value:any = {
					// 		...design,
					// 		sort:likeDesignCollectionList.value.length + 1,
					// 		userLikeGroupId:design.id,
					// 	}
					// 	design.groupDetailId = rv.groupDetailId;
					// 	store.commit(
					// 		"addLikeDesignCollectionList",
					// 		value
					// 	);
					// 	setLikeDislLike('like',value)
					// 	if(index != -1)store.commit("deleteDesignCollectionList", index);
					// }else{
					// 	if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
					// 	store.commit("addDesignCollectionList", [design]);
					// 	likeDesignCollectionList.value.forEach((item:any)=>{
					// 		if(item.sort > design.sort){
					// 			item.sort-=1
					// 		}
					// 	})
					// }
					designData.likeLoading = false;
				}
			).catch(res=>{
				designData.likeLoading = false;
			});
		}
		const upDataLikeListType = ()=>{

		}
		const upDataSuccess = (element)=>{
			if(designData.isUnfold){
				designData.selectLikeDesign.forEach((item:any,index:any) => {
					if(element.taskId == item.taskId){
						designData.selectLikeDesign[index].status = element?.status
						designData.selectLikeDesign[index].id = element?.id
						if(element?.videoUrl){
							designData.selectLikeDesign[index].firstFrameUrl = element.firstFrameUrl
							designData.selectLikeDesign[index].videoUrl = element.videoUrl
							designData.selectLikeDesign[index].gifUrl = element.gifUrl
						}else{
							designData.selectLikeDesign[index].url = element?.url
							designData.selectLikeDesign[index].elementType = element?.elementType
							designData.selectLikeDesign[index].elementId = element?.elementId
						}
					}
				});	
			}
			likeDesignCollectionList.value.forEach((likeItem:any,index:any)=>{
				if(likeItem?.childList?.length > 0){
					likeItem.childList.forEach((childItem:any,index:any)=>{
						if(childItem.taskId == element.taskId){
							childItem.status = element?.status
							childItem.id = element?.id
							if(element?.videoUrl){
								childItem.firstFrameUrl = element.firstFrameUrl
								childItem.videoUrl = element.videoUrl
								childItem.gifUrl = element.gifUrl
							}else{
								childItem.url = element?.url
								childItem.elementId = element?.elementId
								childItem.elementType = element?.elementType
							}
						}
					})
				}
			})
			nextTick(()=>{
				setSystemDesigner(0)
			})
		}
		const upDataSort = (generateCourseItem:any,likeIndex:number)=>{
			let list = likeDesignCollectionList.value
			if(list[likeIndex].childList.length == 0)return
			list[likeIndex].childList.forEach((likeItem:any,index:any)=>{
				if(likeItem.sort >= generateCourseItem.sort){
					likeItem.sort += 1
				}
				// if(generateCourseItem.sort >= likeItem.sort && str == 'batch'){
				// 	likeItem.sort += 1
				// }
			})
		}
		const generateLoad = async (data:any,str:string)=>{
			// return
			let list = likeDesignCollectionList.value
			//添加元素
			if(data.addList){
				data.addList.forEach((generateCourseItem:any)=>{
					let oldData = generateCourseItem.oldData
					if(oldData?.resultType == "Design"){
						let index = list.findIndex((item:any)=>(item.userLikeSortId == generateCourseItem.parentId && item.resultType == "Design"))
						if(!list[index]?.childList)list[index].childList = []
						generateCourseItem.oldSort = generateCourseItem.sort
						generateCourseItem.sort = list[index]?.childList.length + 1
						if(data.status == 'add'){
							if(list[index]?.childList.filter((item:any)=>(item.id == generateCourseItem?.id)).length == 0){
								if(str == 'noBatch')upDataSort(generateCourseItem,index,str)
								// list[index]?.childList.push(generateCourseItem)
								list[index]?.childList.push(generateCourseItem)
							}
						}
					}else{
						let index = list.findIndex((item:any)=>(item.userLikeSortId == generateCourseItem.parentId))
						if(index != -1){
							if(!list[index]?.childList){
								list[index].childList = []
							}
							if(data.status == 'add'){
								if(list[index]?.childList.filter((item:any)=>(item.id == generateCourseItem?.id)).length == 0){
									if(str == 'noBatch')upDataSort(generateCourseItem,index,str)
									list[index]?.childList.push(generateCourseItem)
								}
							}else{
								upDataSuccess(generateCourseItem)
								// let childIndex = list[index].childList.findIndex((item:any)=>(item.id == generateCourseItem?.oldId || generateCourseItem?.id))
								// console.log(childIndex)
								// console.log(list[index].childList)
								// list[index].childList[childIndex] = generateCourseItem
							}
						}
					}
				})
			}
			if(data.deleteList){
				data.deleteList.forEach((generateCourseItem:any)=>{
					let oldData = generateCourseItem.oldData
					if(oldData?.resultType == "Design"){
					}else{
						let index = list.findIndex((item:any)=>(item.userLikeSortId == generateCourseItem.parentId))
						if(index != -1){
							if(!list[index]?.childList){
								list[index].childList = []
							}
							let childIndex = list[index].childList.findIndex((item:any)=>(item.id == generateCourseItem.id))
							list[index].childList.forEach((childItem)=>{
								if(childItem.sort > list[index].childList[childIndex].sort){
									childItem.sort -= 1
								}
							})
							list[index].childList.splice(childIndex,1)
						}
					}
				})
			}
			

			await nextTick().then(()=>{
				designData.isUnfold = true
				uploadLikeDom()
			})
			setPrductimgAll()
		}
		const setPrductimgAll = ()=>{
			clearInterval(prductimgTime.ToProductImage)
			clearInterval(prductimgTime.PoseTransfer)
			clearInterval(prductimgTime.Relight)
			let list = likeDesignCollectionList.value
			let toProductImage = []
			let poseTransfer = []
			let relight = []
			list.forEach((item:any)=>{
				if(!item?.childList)item.childList = []
				item.childList.forEach((childItem:any)=>{
					if(childItem.resultType == 'PoseTransfer'){
						if((!childItem.status || childItem.status != "Success") && !childItem?.firstFrameUrl){
							poseTransfer.push(childItem.taskId)
						}
					}else if(childItem.resultType == 'ToProductImage'){
						if((!childItem.status || childItem.status != "Success") && (!childItem?.url)){
							toProductImage.push(childItem.taskId)
						}
					}else if(childItem.resultType == 'Relight'){
						if((!childItem.status || childItem.status != "Success") && (!childItem?.url)){
							relight.push(childItem.taskId)
						}
					}
				})
			})
			setPrductimg(toProductImage,'ToProductImage')
			setPrductimg(poseTransfer,'PoseTransfer')
			setPrductimg(relight,'Relight')
		}
		let prductimgTime = {
			ToProductImage:null,
			PoseTransfer:null,
			Relight:null,
		}
		const setFail = (list:any)=>{
			list.forEach((listItem)=>{
				if(designData.isUnfold){
					let index = designData.selectLikeDesign.findIndex((item:any)=>{return item.taskId == listItem})
					designData.selectLikeDesign.splice(index,1)
				}
				likeDesignCollectionList.value.forEach((likeItem:any,index:any)=>{
					if(likeItem?.childList?.length > 0){
						let index = likeItem.childList.findIndex((item:any)=>{return item.taskId == listItem})
						likeItem.childList.splice(index,1)
					}
				})
			})
			nextTick().then(()=>{
				uploadLikeDom()
			})
		}
		let setPrductimg = (dataList:any,type:string)=>{
			if(dataList.length == 0)return
			let data = dataList
			let state = true
			let url = Https.httpUrls.relightResult
			if(type == 'ToProductImage'){
				url = Https.httpUrls.toProductImageResult
			}else if(type == 'PoseTransfer'){
				url = Https.httpUrls.poseTransformResult
			}
			// url = Https.httpUrls.poseTransformResult
			// data = {taskId: "00169296-220e-4032-bfce-ca8ff67d6468-83"}
			prductimgTime[type] = setInterval(()=>{
				if(!state)return
				state = false
				Https.axiosPost(url, data).then((rv) => {
						state = true
						rv.forEach((element:any) => {
							if(element?.status == 'Success'){
								upDataSuccess(element)
								data = data.filter((item:any) => item !== element.taskId);
								store.dispatch('getCredits')
							}else if(element?.status == 'Fail' || element?.status == 'Invalid'){
								data = data.filter((item:any) => item !== element.taskId);
								setFail([element.taskId])
								message.info(element?.errorMessage || t('Generate.everyTimeEffectPoor'));
							}
						});
						if(data.length == 0){
							store.dispatch('getCredits')
							clearInterval(prductimgTime[type])
						}
				}).catch(res=>{
					clearInterval(prductimgTime[type])
					setFail(data)
				});
			},type == 'PoseTransfer'?10000:3000)
		}
		const gifPlay = (e:any,item:any)=>{
			e.target.src = item.gif || item.gifUrl//使用gif图片
		}
		const gifPause = (e:any,item:any)=>{
			e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
		}
		const startHover = (e:any,item:any)=>{
		}
		const endHover = (e:any,item:any)=>{

		}
		const setUnfold = ()=>{
			if(!designData.isUnfold){
				designData.selectLikeDesign = []
			}
			uploadLikeDom()
		}
		const getSelectList = ()=>{
			let list = [] as any
			let childLength = 0
			likeDesignCollectionList.value.sort((a:any,b:any)=>{return a.sort - b.sort})
			likeDesignCollectionList.value.forEach((likeItem:any,index:any)=>{
				let item = JSON.parse(JSON.stringify(likeItem))
				item.oldSort = item.sort
				if(item?.childList?.length > 0){
					item.childList.forEach((childItem:any,childIndex:number)=>{
						childItem.oldSort = childItem.sort
						childItem.oldSort = childItem.sort
						childItem.sort = childItem.sort + childLength + index
						// childItem.sort = childIndex + item.sort + childLength
						list.push(childItem)
					})
					childLength = item.childList.length + childLength
				}
				item.sort = childLength + item.sort
				list.push(item)
			})
			return list
		}
		const uploadLikeDom = ()=>{
			if(designData.isUnfold){
				// const parents = designData.selectLikeDesign.filter((item:any) => item.type === 'design');
				designData.selectLikeDesign = getSelectList()
				designData.resultType = 'All'
			}else{
				if(designData.selectLikeDesign.length == 0){
					designData.selectLikeDesign = likeDesignCollectionList.value
					nextTick(()=>{
						setSystemDesigner(0)
					})
					return
				}
				const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design');
				parents.map((parent:any) => {
					parent.sort = parent.oldSort||parent.sort
					delete parent.oldSort
					return {
					...parent,
					childList: designData.selectLikeDesign.filter((item:any) => 
						item.parentId === parent.userLikeSortId && item.resultType !== 'Design'
					)
					};
				});
				designData.selectLikeDesign = parents
			}
			nextTick(()=>{
				setSystemDesigner(0)
			})
		}
		const changeResultType = ()=>{
			if(designData.resultType == 'Design'){
				designData.isUnfold = false
				setUnfold()
			}else{
				designData.isUnfold = true
				// setUnfold()
			}
			if(designData.resultType != 'All'){
				if(designData.resultType == 'Product'){
					designData.selectLikeDesign = getSelectList().filter((item:any) => (item.resultType === 'ToProductImage' || item.resultType === 'Relight'));
				}else{
					designData.selectLikeDesign = getSelectList().filter((item:any) => item.resultType === designData.resultType);
				}
				designData.selectLikeDesign.forEach((item:any,index:number) => {
					item.sort = index + 1
				})
			}else{
				designData.selectLikeDesign = getSelectList()
				designData.selectLikeDesign.forEach((item:any,index:number) => {
					item.sort = index + 1
				})
			}
			nextTick(()=>{
				setSystemDesigner(0)
			})
		}
		const onLike = async (generate,selectType)=>{
			await setNoDesignLike(generate,null,selectType,'onLike')
		}
		return {
			store,
			locale,
			...toRefs(editDesignType),
			likeDesignCollectionList,
			deleteDesignCollectionList,
			designCollectionList,
			userGroupId,
			userDetail,
			bindEmail,
			setPortfolio,
			designCollectionId,
			designId,
			contentImgMax,
			contentImg,
			exportNav,
			isShowOperate,
			t,
			driver__,
			likeDesignItemIdList,
			workspacePosition,
			allBoardData,
			isMannequinShow,
			chooseIsDesign,
			portfolio,
			setSystemDesigner,
			setDesignItemStyle,
			showDesignMark,
			...toRefs(collItemSize),
			...toRefs(designData),
			...toRefs(dataDom),
			//编辑tools相关
			...toRefs(speed),
			openSpeed,
			setSpeed,
			openEditTools,
			openCanvas,
			uploadLikeDom,

			likeItemDom,
			collItemDom,
			domHidden,
			recycleDomHidden,
			getDesignTime,

			setDeleteDesign,
			cancelDeleteDesign,
			designMousedown,
			sortDesignCollection,
			getMousePosition,
			mouseenter,
			setLikeDislLike,
			posiitonData,
			moveItem,
			openCollection,
			setEditDesignType,
			openEditBtn,
			setNoDesignLike,
			upDataLikeListType,
			generateLoad,
			gifPlay,
			gifPause,
			startHover,
			endHover,
			setUnfold,
			changeResultType,
			addGenerateImg,
			onLike,
		};
	},
	data() {
		return {
			isFinishLoading: false,
			isShowMark: false, //导出的loading蒙层
			indicator: h(LoadingOutlined, {
				style: {
					fontSize: "4.8rem",
					marginTop: "3rem",
					color:"#341e57",
				},
				spin: true,
			}),
			designProgress: 0,
			startDesignType: "design", //设计类型 design 和 resdesign
			disLikeLoading: false, //不喜欢防抖
			dragIdx:0,
			designRandom:'',
			detailDestroy:false,//销毁detail
			designFailure:{
				num:0,
				currentNum:0,
			},//获取20次都为空的话就停止获取
			observerData:{
				time:false as any,
				observer:null as any,
			},
		};
	},
	watch: {
		workspacePosition:{
			handler(newVal:any,oldVal:any){
				this.isMannequin()
			},
		},
		allBoardData:{
			handler(newVal:any,oldVal:any){
				this.isMannequin()
			},
		},
	},
	
	beforeUnmount(){
		clearTimeout(this.getDesignTime);
		sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
		sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
		sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
		if(this.$props.isState)this.sortDesignCollection()
		// window.removeEventListener('resize', this.setItemPosition)
		if(this.observerData?.observer)this.observerData.observer.unobserve(this.$refs.rightContentBlockBox);
	},
	
	async mounted() {
		// window.addEventListener('beforeunload', (event)=>{
		// 	this.store.commit("clearAllCollection");
		// });
		this.init()
	},
	directives:{
		mousewheel:{
			mounted (el) {
				let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
				let dom:any = document.getElementsByClassName('right_content_body')
				let mouseover = ()=>{
					bodyDom.classList.add('active')
				}
				let mouseleave = ()=>{
					bodyDom.classList.remove('active')
				}
				dom.forEach((item:any) => {
					item.addEventListener('mouseover',mouseover)
					item.addEventListener('mouseleave',mouseleave)
				});
				
			
				el.addEventListener('wheel',(e:WheelEvent)=>{
					let num = 0
					if(e.deltaY > 0){
						num = 25
					}else{
						num = -25
					}
					el.scrollBy(num, 0);
				},{ passive: true })
			}
		}
	},
	methods: {
		// addTeam (team:any) {
		// this.likeDesignCollectionList.push(team)
		// },
		openSetData(){
			nextTick(()=>{
				this.setItemPosition()	
			})
		},
		setItemPosition(){
			this.setSystemDesigner(0)
			this.setDesignItemStyle()
		},
		affiche(text:any){
			nextTick(()=>{
			    let affiche:any = this.$refs.affiche
				affiche.init(text)
			})
		},
		init(){
			
			this.$refs.rightContentBlockBox
			this.observerData.observer = new ResizeObserver(entries => {
				for (let entry of entries) {
					if(entries[0].contentRect.width == 0)return
					clearTimeout(this.observerData.time)
					if(entries[0].contentRect.width > 800){
						this.likeDesignTools = true
					}else{
						this.likeDesignTools = false
					}
					this.observerData.time = setTimeout(()=>{
						
						this.setSystemDesigner(0)
						this.setDesignItemStyle()
					},100)
					// const { width } = entry.contentRect;
				}
			});
			this.observerData.observer.observe(this.$refs.rightContentBlockBox);
			if(this.designCollectionList?.length > 0){
				nextTick(()=>{
					this.setDesignItemStyle()
					this.setShowHide('recycleDomHidden')
				})
			}
			this.isUnfold = true
			this.setUnfold()
		},
		//判断模特和当前start的sketch是否匹配
		isMannequin(){
			this.isMannequinShow = false
			let num = 0
			this.allBoardData?.sketchboardFiles?.forEach((sketchItem:any) => {
				
				this.workspacePosition.forEach((positionItem:any) => {

					if(positionItem.value == sketchItem.categoryValue){
						num ++ 
					}
				});
				
			});
			if(this.allBoardData?.sketchboardFiles?.length && this.allBoardData?.sketchboardFiles?.length>0){
				if(num != this.allBoardData?.sketchboardFiles?.length){
					this.isMannequinShow = true
				}
			}else{
				this.isMannequinShow = false
			}
		},
		//设计新的collection
		async designNewCollection() {
			clearTimeout(this.getDesignTime);
			let probjects = this.store.state.Workspace.probjects
								
			if(probjects.type == "seriesDesign" && probjects?.model?.length == 0)return message.info(this.t('collectionModal.jsContent7'));
			let data = await this.getDesignData("");
			this.isShowMark = true
			// this.store.commit("setLikeDesignCollectionList", []);
			Https.axiosPost(Https.httpUrls.designCollection, data)
			
				.then((rv: any) => {
					if (rv) {
						let value = {
							objectSignList:data.requestIdList.join(),
							requestId:rv
						}
						this.posiitonData.generateElList.forEach((item:any) => {
							item.sort -= 1
						})
						this.moveItem('disLike')

						this.getDesignResult(value,'newDesign')
						this.startDesignType = "design";
						// this.posiitonData.likeSelectIndex = 0
						// this.posiitonData.likeElList = []
					}
					this.isShowMark = false;
				})
				.catch((res) => {
					this.isShowMark = false;
				})
		},
		getDesignResult(data:any,str:any){
			this.showDesignMark = true
			this.recycleDomHidden = true
			this.setSystemDesigner(0)
			Https.axiosGet(Https.httpUrls.getDesignResult,{params:data})
			.then(async (rv)=>{
				if(rv.designCollectionItems){
					let arr:any = []
					if(this.designCollectionList.length == 0){
						arr.push(...rv.designCollectionItems)
					}else{
						arr = rv.designCollectionItems.filter((itemA:any) => 
							!this.designCollectionList.some((itemB:any) => itemA.objectSign === itemB.objectSign)
						);
					}
					for (let index = 0; index < arr.length; index++) {
						const item = arr[index];
						await new Promise((resolve, reject) => {
							setTimeout(() => {
								this.designCollectionList.unshift(item)
								nextTick().then(()=>{
									let dom:any = this.$refs.collItemDom
								    let elArr:any = dom.querySelectorAll(".content_img_GetWidth");
									this.posiitonData.generateElList.push({
										el: elArr[0], 
										sort: elArr.length - 2, 
										index: elArr.length - 1,
										userLikeSortId:item.designItemId
									});
									this.moveItem('disLike')
								})
								resolve('')
							}, 200);
						})
					}
				}
				if(rv.unfinishedList.length == 0){
					this.showDesignMark = false
					if(str == 'newDesign'){
						if(rv.designCollectionItems){
							// this.store.commit("deleteUserGroupId");
							this.store.commit(
								"setDesignCollectionId",
								rv.collectionId
							);
							this.store.commit("setDesignId", rv.designId);
						}
					}else{
						// this.designProgress = 0,
						this.store.commit("setDesignId", rv.designId);
					}
					nextTick().then(()=>{
						driverObj__.moveNext();
						this.posiitonData.generateElList.forEach((item:any) => {
							item.sort += 1
						});
						this.moveItem('disLike')

					})
				}else{
					data.objectSignList = rv.unfinishedList.join()
					this.getDesignTime = setTimeout(()=>{
						if(this.designFailure.currentNum == rv.unfinishedList.length){
							this.designFailure.num++
							if(this.designFailure.num >= 10)data.objectSignList=''
						}else{
							this.designFailure.num = 0
						}
						this.getDesignResult(data,str)
					},1000)
				}
			}).catch(()=>this.showDesignMark = false)
		},
		//重新设计collection
		async resDesignCollection() {
			if(this.driver__.driver){
				nextTick().then(()=>{
					driverObj__.moveNext();
				})
			}
			clearTimeout(this.getDesignTime);
			this.isShowMark = true
			let data = await this.getDesignData(this.designCollectionId);
			Https.axiosPost(Https.httpUrls.reDesignCollection, data)
				.then((rv: any) => {
					if (rv) {
						let value = {
							objectSignList:data.requestIdList.join(),
							requestId:rv
						}
						this.posiitonData.generateElList.forEach((item:any) => {
							item.sort -= 1
						})
						this.moveItem('disLike')
						this.getDesignResult(value,'resDesign')
						this.startDesignType = "resDesign";
						this.isShowMark = false
					}
				})
				.catch((res) => {
					this.isShowMark = false;
				});

		},
 
		async getDesignData(designCollectionId: any) {
			let {
				moodboardFiles,
				printboardFiles,
				disposeMoodboard,
				// generatePrintFiles,
				colorBoards,
				sketchboardFiles,
				marketingSketchFiles,
				moodboardPosition,
			} = this.store.state.UploadFilesModule.allBoardData;
			this.randomNum()
			let modelList = [] as any;
			let workspace:any = this.store.state.Workspace.probjects
			workspace.model.forEach((item:any)=>{
				let obj = {
					id:item.id,
					type:item.type,
					collectionElementId:item.collectionElementId
				}
				modelList.push(obj)
			})
			let data: any = {
				colorBoards: await this.getColorBoard(colorBoards),
				// marketingSketchs: this.getBoardId(marketingSketchFiles),
				moodBoards: this.getBoardId(moodboardFiles),
				printBoards: this.getPrintId(printboardFiles),
				sketchBoards: this.getSkecthBoard(sketchboardFiles),
				moodboardPosition: moodboardPosition?JSON.stringify(moodboardPosition):null,
				switchCategory: workspace.type == "seriesDesign"?"": workspace.position.value,
				singleOverall: workspace.type == "seriesDesign" ? "overall" : 'single',
				systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
				templateId: '',
				// templateId: workspace.model.id,
				mannequins: modelList,
				modelType:'',
				modelSex:workspace?.sex,
				moodTemplateId: disposeMoodboard?.[0] ? String(disposeMoodboard[0].id) : null,
				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
				processId:this.designRandom,
				projectId:workspace.id
			};
			// data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
			this.setSystemDesigner(0)
			this.designFailure = {
				num:0,
				currentNum:0,
			}
			if(designCollectionId) {
				data.collectionId = designCollectionId;
			}
		
			let arr = []
			for (let index = 0; index < 8; index++) {
				let floor = Math.floor(Math.random() * 90000000) + 10000000
				arr.push(floor)
			}
			data.requestIdList = arr
			return data;
		},
		randomNum(){
			this.designRandom = String(Math.floor(Math.random() * 9000000000000000) + 1000000000000000)
		},
		getBoardId(boardData: any) {
			boardData = boardData || []
			let dataList = boardData.map((v: any) => {
				let data: any = {
					id: v.resData.id,
					designType: v.resData.designType,
				};
				return data;
			});
			return dataList;
		},

		getPrintId(boardData: any) {
			boardData = boardData || []
			let dataList = boardData.map((v: any) => {
				let data: any = {
					id: v.resData.id,
					designType: v.resData.designType,
					level2Type: v.categoryValue,
					isPin: v.pin ? 1 : 0,
				};
				return data;
			});
			return dataList;
		},

		getSkecthBoard(boardData: any) {
			boardData = boardData || []
			const mapB = new Map();
			boardData.forEach(item => {
				if (item.categoryValue !== undefined) {
					mapB.set(item.categoryValue, true);
				}
			});
			
			boardData.filter(item => 
				item.categoryValue !== undefined && mapB.has(item.categoryValue)
			);
			let sketchBoards = boardData.map((v: any) => {
				let data = {
					designType: v.resData.designType,
					isPin: v.pin ? 1 : 0,
					level2Type: v.categoryValue,
					sketchBoardId: v.resData.id,
				};
				return data;
			});
			return sketchBoards;
		},

		getColorBoard(boardData: any) {
			boardData = boardData || []
			let colorBoards = [] as any
			for (let index = 0; index < boardData.length; index++) {
				new Promise(async (resolve,reject)=>{
					const item = boardData[index];
					if(item.gradient){
						item.gradient.colorImg = await setGradual(item.gradient,320,700)
					}
					let data = {
						id: item.id,
						name: item.name,
						tcx: item.tcx,
						gradient:item.gradient,
						rgbValue: "",
					};
					data.rgbValue = `${item.rgbValue.r} ${item.rgbValue.g} ${item.rgbValue.b}`;
					colorBoards.push(data);
					resolve('')
				})
			}
			return colorBoards;
		},
		deleteDesignCollection(list:any,index:any){
			list.splice(index,1)
		},
		
		likeDesignCollection(design: any, index: any,type:any) {
			if (this.likeLoading) {
				return;
			}
			if(type != 'Design'){
				this.setNoDesignLike(design,index,type,'like')
				return
			}
			let data = {
				designItemId: design.designItemId,
				userGroupId: this.store.state.HomeStoreModule.userGroupId,
				projectId: this.store.state.Workspace.probjects.id,
				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
				designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
			};
			
			
			this.likeLoading = true;
			Https.axiosPost(Https.httpUrls.designLike, data)
				.then((rv: any) => {
					if (rv) {
						let value:any = {
							...design,
							id:rv.userLikeId,
							groupDetailId:rv.userLikeId,
							userLikeSortId:rv.userLikeSortId,
							userLikeGroupId:rv.userGroupId,
							sort:rv.sort,
						}
						this.store.commit("setUserGroupId", rv.userGroupId);
						design.groupDetailId = rv.groupDetailId;
						this.store.commit(
							"addLikeDesignCollectionList",
							value
						);
						this.setLikeDislLike('like',value)
						if(index != -1)this.store.commit("deleteDesignCollectionList", index);
						if (this.startDesignType === "resDesign") {
							this.getHistoryChoose(this.userGroupId, "like");
						}
					}
					this.likeLoading = false;
				})
				.catch((rv) => {
					this.likeLoading = false;
				});
		},

		//不喜欢设计
		async dislikeDesignCollection(design:any,type:string) {
			if(design?.childList?.length > 0){
				await new Promise((resolve, reject) => {
					Modal.confirm({
						title: this.t('HomeView.jsContent12'),
						icon: createVNode(ExclamationCircleOutlined),
						okText: 'Yes',
						cancelText: 'No',
						mask:false,
						zIndex:99999,
						centered:true,
						onOk() {
							resolve('')
						},
						onCancel(){
							return
						}
					});
				})
				
			}
			let data = {
				designId: design.designId || this.designId,
				designPythonOutfitId:design.designOutfitId,
				groupDetailId: design.groupDetailId || design.id,
				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
				projectId:this.store.state.Workspace.probjects.id,
			};
			if (this.disLikeLoading) {
				return;
			}
			this.disLikeLoading = true;
			Https.axiosPost(Https.httpUrls.designDislike, data)
				.then((rv: any) => {
					if (rv) {
						this.recycleDomHidden = true
						this.store.commit("addDesignCollectionList", [design]);
						let index = -1
						this.likeDesignCollectionList.forEach((item:any,likeIndex:number)=>{
							if(item.id == design.id){
								design.childList = []
								index = likeIndex
							}
							if((item?.oldSort || item.sort) > (design?.oldSort || design.sort)){
								item.sort-=1
							}
						})
						this.likeDesignCollectionList.splice(index,1)
						// this.store.commit(
						// 	"deleteLikeDesignCollectionList",
						// 	index
						// );
						design.childList = []
						nextTick(()=>{
							this.setLikeDislLike('disLike',design)
						})
					}
					this.disLikeLoading = false;
				})
				.catch((rv) => {
					this.disLikeLoading = false;
				});
		},


		//获取选择的组
		getHistoryChoose(userGroupId: any, type: any) {
			
			this.isShowMark = true;
			let url =
				Https.httpUrls.historyChoose + `?userGroupId=${userGroupId}`;
			Https.axiosGet(url)
				.then((rv: any) => {
					this.setPortfolio(rv.portfolioDTO)
					this.store.commit("setUserGroupId", rv.userGroupId);
					this.dealHistoryChooseData(rv, type);
					this.isShowMark = false;
				})
				.catch((rv) => {
					this.isShowMark = false;
				});
		},
		//处理选择组的数据
		dealHistoryChooseData(data: any, type: any) {
			let collectionData = {
				disposeMoodboard: data.collection.moodTemplateId?[{
					id:data.collection.moodTemplateId,
					imgUrl:data.collection.moodTemplateUrl,
					resData:{
						name:data.collection.moodTemplateName,
					}
				}]:[],
				moodboardPosition:data.collection.moodboardPosition?JSON.parse(data.collection.moodboardPosition):{},
				moodboardFiles: this.dealViewChooseData(
					data.collection.moodBoards,"Moodboard"
				),
				printboardFiles: this.dealViewChooseData(
					data.collection.printBoards,"Printboard"
				),
				generatePrintFiles: [],
				colorBoards: this.dealViewChooseColor(
					data.collection.colorBoards
				),
				sketchboardFiles: this.dealViewChooseData(
					data.collection.sketchBoards,"Sketchboard"
				),
				marketingSketchFiles: this.dealViewChooseData(
					data.collection.marketingSketchs,""
				),
				
			};
			this.store.commit("setAllBoardDataChoose", collectionData);
			// this.store.commit('clearShowSketchboard')
			this.store.commit("setShowSketchboard", data.collection.sketchBoards);
			this.store.commit(
				"setDesignCollectionId",
				data.collection.collectionId
			);
			if (type === "normal") {

				let likeDesignCollectionList = data.userLikeDetails.map(
					(v: any) => {
						let data = {
							...v,
							groupDetailId: v.id,
							designItemUrl: v.designOutfitUrl,
							designItemId: v.designItemId,
						};
						return data;
					}
				);
				this.store.commit(
					"setLikeDesignCollectionList",
					likeDesignCollectionList
				);
			}
			this.setSystemDesigner(100)
		},

		//统一处理选择组的渲染数据
		dealViewChooseData(data: any,str:string) {
			if (!data) {
				return [];
			}
			let filesList = data.map((v: any) => {
				let newData: any = {
					imgUrl: v.url?v.url:v.designOutfitUrl,
					id: v.id,
					status: "done",
					resData: v,
					type_:{
						type1:'material',
						type2:v.level1Type
					}
				};
				if (v.level1Type === "Sketchboard") {
					newData.pin = v.isPin;
					newData.categoryValue = v.level2Type;
					newData.level2Type = v.level2Type;
				}
				if (v.level1Type === "Printboard") {
					newData.pin = v.isPin;
					newData.level2Type = v.level2Type;
					newData.categoryValue = v.level2Type;
				}
				return newData;
			});
			return filesList;
		},

		//统一处理选择组的渲染数据
		dealViewChooseColor(data: any) {
			let colorList = data.map((v: any) => {
				let rgbValue = v.rgbValue.split(" ");
				let newData: any = {
					id: v.id,
					name: v.name,
					tcx: v.tcx || "",
					rgbValue: {
						r: rgbValue[0],
						g: rgbValue[1],
						b: rgbValue[2],
						a: 1,
					},
				};
				if(v.gradient){
					newData.gradient = v.gradient;
				}else{
					delete newData.gradient;
				}
				return newData;
			});
			return colorList;
		},
	
		//销毁图片详情
		setDetailDestroy() {
		    // let designDetail: any = this.$refs.designDetail;
			// designDetail.destroy();
			this.detailDestroy = false
			this.uploadLikeDom()
		},
		//打开图片详情
		designDetail(
			design: any,
			index: number,
			collectionList: any,
			type: string
		) {
			// if()
			if(this.isMove || this.isShowMark)return
			this.store.commit('setOpenChatStatus',false)
			if(design.resultType != "Design"){
				this.selectEditBtn = design
				this.setEditDesignType(collectionList,index,design.resultType,'edit',type)
				return
			}
			this.isShowMark = true
			design.designOutfitId = design.designPythonOutfitId?design.designPythonOutfitId:design.designOutfitId
			let data = {
				design: design,
				index: index,
				collectionList: collectionList,
				type: type,
			};
			this.detailDestroy = true
			nextTick(()=>{
				let designDetail: any = this.$refs.designDetail;
				designDetail.showDesignDetailModal(data).then(()=>{
					this.isShowMark = false
				})
			})
		},

		//完成单个图片设计
		finishRedesign(event: any) {
			let { design, index, type } = event;
			if (type === "disLike") {
				this.store.commit("setSingleDesignCollectionList", {
					index: index,
					design: design,
				});
			} else {
				this.store.commit("setSingleLikeDesignCollectionList", {
					index: index,
					design: design,
				});
			}
			this.setDetailDestroy()
		},
		setTask(data:any){
			this.$emit('setTask',data)
			// this.exportModel()
		},
		setShowHide(str:string){
			if(str == 'recycleDomHidden')this.recycleDomHidden = !this.recycleDomHidden
			if(str == 'domHidden')this.domHidden = !this.domHidden
			// this.setSystemDesigner(0)
		}
	},
});
</script>
<style lang="less" scoped>
.designPage {
	width: 100%;
	height: 100%;
	// padding-right:5rem;
	overflow: initial !important;
	position: relative;
	padding: .5rem 0;
	.page_content {
		position: relative;
		
		
		
		.page_content_body {
			position: absolute;
			width: 100%;
			height: 100%;
			// padding-bottom: 4rem;
			box-sizing: border-box;
			z-index:1;
			.right_content_header {
				display: flex;
				justify-content: space-between;
				height: 6.5rem;
				align-items: center;
				padding: 0 3.2rem 0 1.9rem;
				background: rgba(255, 255, 255, 0.2);
				position: relative;
				.right_content_export{
					display: flex;
					align-items: center; 
					position: relative;
					.icon-xiala{
						cursor: pointer;
						transition: .3s all;
						margin-left: 1rem;
					}
					.icon_rotate{
						-moz-transform: rotate(180deg);
						-webkit-transform: rotate(180deg);
						transform: rotate(180deg);
						animation-direction: 0.5s;
					}
					.export_nav{
						display: flex;
						flex-direction: column;
						position: absolute;
						top: 5.5rem;
						width: 100%;
						background: #fff;
						padding: 1rem;
						border: 2px solid;
						z-index: 2;
						label{
							margin: 0;
						}
					}
				}
				.content_header_left {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.icon-dangqianweizhi {
						font-size: 1.6rem;
						color: #000;
					}

					.content_header_des {
						font-size: 1.6rem;
						color: #000000;
						margin-left: 1rem;
						font-weight: 900;
					}
				}
			}
			.info{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				> img{
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
			.designPage_body {
				width: 100%;
				height: 100%;
				display: flex;
				box-sizing: border-box;
				.designPage_left {
					// width: 44.4rem;
					width: 33%;
					height: 100%;
					background: rgba(255, 255, 255, 0.2);
					position: relative;
					// overflow: hidden;
					
					&.active{
						width: 0;
						.designPage_left_content{
							padding-right: 0;
							width: 0;
						}
					}
					.designPage_left_content {
						height: 100%;
						// width: 50rem;
						width: 100%;
						overflow: hidden;
						padding-right: 1.2rem;
						
						.home_left_info {
							height: 100%;
							display: flex;
							background: #f6f6fa;
							border-radius: 2rem;
							flex-direction: column;
							.left_info_content {
								width: 100%;
								height: calc(100% - 6.9rem);
								overflow-y: auto;
								&.left_info_content::-webkit-scrollbar {
									display: none;
								}

								.left_info_content_body {
									width: 100%;
								}
							}
							.left_info_hint{
								display: flex;
								span{
									font-size: 1.3rem;
									display: inline-block;
								}
							}
						}
					}
				}

				.designPage_right {
					// width: calc(100% - 44.4rem);
					flex: 1;
					height: 100%;
					width: 100%;
					// overflow: hidden;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					position: relative;
					.designPage_left_bottom{
						position: absolute;
						width: 3rem;
						height: 7rem;
						background: #fff;
						border: 2px solid;
						border-right: none;
						border-radius: 2rem 0 0 2rem;
						top: 50%;
						transform: translate(-100%,-50%);
						left: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 2;
						cursor: pointer;
						transition: width .3s;
						&:hover{
							width: 4rem;
						}
						>span{
							transition: all .3s;
							transform: rotate(90deg);
							&.active{
								transform: rotate(270deg);
							}
						}
						&.right{
							border-radius: 0 2rem 2rem 0rem;
							left: 2rem;
							top: 50%;
							left: auto;
							right: 0;
							transform: translate(100%, -50%);
							// top: calc(50% - 10.4rem / 2);
							border: 2px solid;
							border-left: none;
							flex-direction: column;
							
							&.active{
								// left: 44rem;
							}
						}
					}
					
					.right_top {
						padding: 1rem 3.2rem 2rem 1.2rem;
						padding-right: 0;
						display: flex;
						justify-content: space-between;
						box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
						background: rgba(255, 255, 255, 0.4);
						transition: all .3s;
						&.active{
							overflow: hidden;
							padding-top: 0;
							padding-bottom: 0;
							height: 0;
						}
						.right_top_left {
							display: flex;
							align-items: center;
							width: 100%;
							.button_margin_14 {
								margin-left: 1.4rem;
							}
							.silder{
								display: flex;
								align-items: center;
								.text{
									font-weight: 600;
									font-size: 1.8rem;
								}
								.system_silder{
									margin: 0 3rem;
									width: 12rem;
								}
							}
						}
					}
					.right_content_block_box{
						flex: 1;
						display: flex;
					}
					.right_content_block {
						flex: 1;
						display: flex;
						position: relative;
						flex-direction: column;
						// min-width: 40%;
						width: 50%;
						&.recycleBin{
							flex: none;
							margin-left: 0;
							width: 0;
							overflow: hidden;
							&.recycleBinShow{
								width: auto;
								margin-left: 2rem;
								width: calc(50% - 2rem);
							}
							.right_content_body {
								width: 100%;
								// width: 55rem;
								.right_content_img_block{
									
									.content_img_block{
										width: 16rem;
										height: 23rem;
										position: relative;
										
									}
								}
							}
						}
						&.right_content_block::-webkit-scrollbar{display: none;}
						&.active{
							overflow: hidden;
						}
						
						.right_content_body {
							// padding: 0 1.8rem 0 1.2rem;
							// height: calc(50% - 4.5rem);
							flex: 1;
							overflow: auto;
							background: #f6f6fa;
							border-radius: 2rem;
							display: flex;
							flex-direction: column;
							.right_content_img_block {
								// overflow-y: auto;
								height: 100%;
								flex: 1;
								display: flex;
								width: auto;
								// overflow: hidden;
								align-items: center;
								// padding-bottom: 1rem;
								overflow-x: auto;
								justify-content: center;
								&.active::-webkit-scrollbar {
									display: none;
								}
								// &.active::-webkit-scrollbar-button:single-button{
								// 	display: none;
								// }
								// &.active::-webkit-scrollbar {
								// 	/* 竖轴的宽度 */
								// 	width: 1rem;
								// 	/* 横轴的高度 */
								// 	height: 1rem;
								// 	transition: all .3s;
								// }
								// /* 进度 */
								// &.active::-webkit-scrollbar-thumb {
								// 	border-radius: 1rem;
								// 	background: rgba(238, 238, 244, 0);
								// }
								// /* 轨道 */
								// &.active::-webkit-scrollbar-track {
								// 	border-radius: 1rem;
								// 	background: rgba(238, 238, 244, 0);
								// }
								// &.active:hover {
								// 	// overflow-x: scroll;
								// 	&.active::-webkit-scrollbar-thumb {
								// 		background: #543087;
								// 	}
								// 	/* 轨道 */
								// 	&.active::-webkit-scrollbar-track {
								// 		background: rgba(84, 48, 135,.2);
								// 	}
								// }
								>div{
									display: flex;
									flex-wrap: wrap;
									// padding: 0 2.8rem 0 0.9rem;
									width: 100%;
									height: 100%;
									// align-content: flex-start;
									overflow-x: hidden;
									position: relative;
									&::-webkit-scrollbar {
										display: none;
									}
								}
								.content_img_block {
									// width: 24rem;
									// height: 37rem;
									width: calc(33.33% - 30px);
									height: calc((33.33% - 30px) * 1.54);
									box-sizing: border-box;
									margin: 5px;
									// min-height: 271px;
									// max-height: 80%;

									display: inline-block;
									position: relative;
									vertical-align: top;
									flex-shrink: 0;
									display: flex;
									align-items: center;
									justify-content: center;
									position: absolute;
									transition: top,left .5s;
									// transition: top,left .3s;
									&:hover .btn{
										display: flex;
									}
									.content_img_flex {
										display: flex;
										justify-content: center;
										align-items: center;
										width: 100%;
										height: 100%;
										border-radius: 2rem;
										border: 2px solid #E0E0E0;
										overflow: hidden;
										background: #fff;
										.content_img_block_child{
											position: absolute;
											border-radius: 2rem;
											border: 2px solid #00000070;
											background: #fff;
											display: flex;
											left: -43%;
											transform: translateX(69%);
											top: 0rem;
											> .childItem{
												> .content_img_flex{
													object-fit: contain;
													border: 2px solid #00000070;
												}
												position: relative !important;
												>img{
												}
											}
										}
									}
									&.active{
										.icon_like,.icon_delete{
											display: block;
										}
										.content_img_flex {
											&.Design{
												border: 2px solid #000;
											}
											&.PoseTransfer{
												border: 2px solid #c7c7c7;
											}
											&.ToProductImage{
												border: 2px solid #c7c7c7;
											}
											&.Relight{
												border: 2px solid #c7c7c7;
											}
										}
									}
									.content_img {
										height: 100%;
										width: 100%;
										object-fit: contain;
										// object-fit: cover;
									}
									
									.btn{
										top: 1rem;
										right: 1rem;
										display: flex;
										position: absolute;
										flex-direction: column;
										align-items: center;
										@media (min-width: 1024px) {
											top: 1.5rem;
											right: 1.5rem;
										}
										> i{
											cursor: pointer;
											width: 3rem;
											height: 3rem;
											display: flex;
											align-items: center;
											justify-content: center;
											text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
											color: #fff;
											font-size: 1.7rem;
											@media (min-width: 1024px) {
												font-size: 2rem;
											}
										}
										
										.icon_like,.icon_delete {
											font-size: 1.4rem;
											cursor: pointer;
											text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
											color: #fff;
											font-size: 1.7rem;
										}
									}
									
									.icon_delete{
										top: 5rem;
									}
									.icon-jushoucang {
										color: #000;
									}
									.icon-jushoucanggift {
										// color: rgba(52, 53, 121, 1);
										color: #000;
									}
								}
							}
						}
					}
				}
			}
		}
		
		.page_content_bg {
			position: absolute;
			width: 100%;
			height: 100%;
		}
	}

	.progress_mark {
		background: #ffffff;
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;

		.mark_content {
			text-align: center;
		}
	}
	.btnOpen{
		position: absolute;
		width: max-content;
		left: 30px;
		top: 30px;
		transform: translateX(-100%);
		background: #e4e4e7;
		padding: 12px;
		border-radius: 12px;
		display: none;
		z-index: 999;
		&.active{
			display: block;
		}
		> .item{
			display: flex;
			align-items: center;
			margin-bottom: 8px;
			padding: 8px;
			border-radius: 8px;
			cursor: pointer;
			&:last-child{
				margin: 0;
			}
			> .text{
				font-size: 12px;
				margin-right: 10px;
			}
			&:hover{
				background: #efeff1;
			}
		}
	}
}
</style>