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" ref="hidden">
						<div class="designPage_left_content" :class="{'active':(domHidden)}">
							<!-- 有图状态 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" @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 class="designPage_left_bottom" @click="setShowHide('domHidden')" >
							<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
						</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()">
								<!-- <div class="gallery_btn white Guide_1_15" @click="designNewCollection()"> -->
									{{ $t('HomeView.Design') }}
								</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" v-show="domHidden || !recycleDomHidden">
											<div v-show="isUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
												<span>Type :</span>
												<a-select
													v-model:value="resultType"
													size="large"
													style="width: 15rem"
													placeholder="Please select"
													:options="resultTypeList"
													@change="changeResultType"
												>
												</a-select>
											</div>
											<div class="generalModel_state_item smail" style="margin-right: 1rem;">
												<span>Unfold :</span>
												<a-switch v-model:checked="isUnfold" @change="setUnfold" />
											</div>
											<div class="generalModel_state_item smail" style="margin-right: 0;">
												<span>Size :</span>
												<a-select
													v-model:value="widthValue.value"
													size="large"
													style="width: 15rem"
													placeholder="Please select"
													:options="widthList"
													@change="setSystemDesigner(500)"
												>
												</a-select>
											</div>
										</div>
									</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'" 
														:src="design.firstFrameUrl" alt="" 
														@mouseenter.stop="gifPlay($event,design)"
														@mouseleave.stop="gifPause($event,design)" >
													<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl||design.url"
														:key="design.designOutfitUrl" designType="like" :index="index"/>
													<a-spin v-show="design?.generateAwait" 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-show="!design?.generateAwait">
													<i @click.stop="openEditBtn(design,index,$event)" class="fi fi-br-menu-dots-vertical"></i>
													
												</div>
											</div>
										</div>
									</div>
								</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.designItemId || design.id,'disLike')" 
													@touchstart.passive="designMousedown(getMousePosition($event,true),design.designItemId || design.id,'disLike')"
														@click="
														designDetail(
															design,
															index,
															designCollectionList,
															'disLike'
														)">
														<img class="content_img" 
															v-if="design.resultType == 'PoseTransfer'" 
															:src="design.firstFrameUrl" alt="" 
															@mouseenter.stop="gifPlay($event,design)"
															@mouseleave.stop="gifPause($event,design)" >
														<img class="content_img" v-show="!design?.generateAwait" :src="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 class="designPage_left_bottom" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
								<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
							</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" @click="dislikeDesignCollection(selectEditBtn,selectEditBtn?.resultType,selectEditBtnIndex)">
				<div class="text">Delete</div>
				<i class="fi fi-rr-trash icon_delete">
				</i>
			</div>
			<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'PoseTransfer','add','like')">
				<div class="text">Transfer Pose</div>
				<i class="fi fi fi-rr-play-alt"></i>
			</div>
			<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'Relight','add','like')">
				<div class="text">Relight</div>
				<i class="fi fi fi-br-keyboard-brightness"></i>
			</div>
			<div class="item" v-show="selectEditBtn?.resultType == 'Design'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'ToProductImage','add','like')">
				<div class="text">To Product Image</div>
				<i class="fi fi fi-ss-box-open"></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"
			:productData="{
				upload:upload,
				RelightDirection:RelightDirection,
				RelightDirectionList:RelightDirectionList,
			}" 
			@setGenerateAwait="setGenerateAwait"
			:isProductimg="true"></editDesignType>
	</div>

</template>

<script lang="ts">
import { defineComponent, h, ref, computed, toRefs, inject,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/DetailCopy/designDetail.vue";
import html2canvas from "html2canvas";
import { message,Modal } from "ant-design-vue";
import { useStore } from "vuex";
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'
const FileSaver = require("file-saver");

export default defineComponent({
	name: "homePage",
	components: {
		collectionModal,
		// HeaderComponent,
		NewCollectionReview,
		affiche,
		generalCanvas,
		DesignDetailcopy,
		editDesignType,
	},
	emits:['setTask'],
	 activated() {
  },
  deactivated() {
  },
  props:['isState'],
	setup(props,{emit}) {
		const store = useStore();
		const editDesignType = reactive({
			upload:{id:store.state.Workspace.probjects.id},
			RelightDirectionList:[
				{
					value:'Right Light',
					label:useI18n().t('ProductImg.RightLight')
				},{
					value:'Left Light',
					label:useI18n().t('ProductImg.LeftLight')
				},{
					value:'Top Light',
					label:useI18n().t('ProductImg.TopLight')
				},{
					value:'Bottom Light',
					label:useI18n().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,
		})
		const designData = reactive({
			openEditBtnId:-1,
			selectEditBtn:null as any,
			selectEditBtnIndex:-1,
			likeLoading: false, //喜欢防抖
			widthList:[
				{
					label:'Medium',
					value:170,
				},{
					label:'Large',
					value:250,
				},{
					label:'Extra-large',
					value:400,
				}
			],
			selectDesign:null as any,//当前选择的design
			isUnfold:false,
			selectLikeDesign:[] as any,

			//类型
			resultTypeList:[
				{
					label:'All',
					value:'All',
				},{
					label:'Design',
					value:'Design',
				},{
					label:'Product',
					value:'Product',
				},
				// ,{
				// 	label:'To Product Image',
				// 	value:'ToProductImage',
				// },{
				// 	label:'Relight',
				// 	value:'Relight',
				// },
				{
					label:'Pose Transfer',
					value:'PoseTransfer',
				},
			],
			resultType:'All',
			oldSelectLikeDesign:null as any
		})
		watch(()=>likeDesignCollectionList.value.length,(val)=>{
			if(val>0)uploadLikeDom()
		})
		provide('exportNav',exportNav)
		let isShowOperate = ref(false)
		let {t} = useI18n()
		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

				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 = []
			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-=1
				}
			})
			moveItem('')
		}
		const cancelDeleteDesign = (index:any)=>{
			store.commit("cancelDeleteDesignCollectionList",index);
		}
		const designMousedown = (e:any,design:any,str:string)=>{
			if(design.resultType != 'Design' || designData.isUnfold)return
			if(str != 'like' && showDesignMark.value) return
			let Id = design.userLikeSortId || design.id
			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)=>{
			designData.selectLikeDesign = []
			posiitonData.value.likeSelectIndex = 0
			nextTick(()=>{
				if(str == 'like'){
					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
					});
				}
				setDesignItemStyle()
				setSystemDesigner(100)
				// 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))
			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
			dataDom.editDesignType.init(arr,index,null,status,listType)
			dataDom.editDesignType.isLike = false
			dataDom.editDesignType.productimgRelightDirection = editDesignType.RelightDirection
			dataDom.editDesignType.isComparison = true
		}
		const addGenerateImg = (data:any)=>{
			if(!data.id)return
			let obj = {
				id:data.id,
				designItemId:data.id,
				// designItemId:data.elementId,
				designOutfitId:'',
				designOutfitUrl:data.designOutfitUrl,
				sourceUrl:data.sourceUrl,
				resultType:data.resultType,
				elementId:data.elementId,
				elementType:data.elementType,
				userGroupId:data.userGroupId || data.id,
				firstFrameUrl:data.firstFrameUrl,
				gifUrl:data.gifUrl,
				userLikeSortId:data.userLikeSortId,	
			}
			let list = []
			if(data.listType == 'disLike'){
				list = designCollectionList.value
			}else{
				list = likeDesignCollectionList.value
			}
			if(list[data.isIndex]?.generateAwait)list[data.isIndex].generateAwait = false;
			if(data.status == 'add'){
				if(data.listType == 'like'){
					likeDesignCollection(obj,-1,data.resultType)
				}else{
					list.unshift(obj)
				}
			}else if(data.status == 'cove'){
				// collectionLikeUpdate
				// Https
				if(data.listType == 'like'){
					let value = {
						"oldRelationId": data.oldId,
						"relationId": data.id,
						"relationType": data.resultType,
					}
					Https.axiosPost(Https.httpUrls.collectionLikeUpdate,value).then((rv:any)=>{
						if(rv){
						}
					})
				}
				list[data.isIndex].designOutfitUrl = obj.designOutfitUrl
				list[data.isIndex].resultType = obj.resultType
				list[data.isIndex].id = obj.id
				list[data.isIndex].designItemId = obj.designItemId
				list[data.isIndex].sourceUrl = obj.sourceUrl
			}
			// nextTick().then(()=>{
			// 	// setDesignItemStyle()
			// 	// setSystemDesigner(100)
			// 	uploadLikeDom()
			// })
		}
		const setNoDesignLike = (design:any,index:any,type:any,str:string) => {
			let url
			let data = {
				toProductImageResultId:[(design.designItemId || design.id)],
				projectId: store.state.Workspace.probjects.id,
				collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.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:design.id,
						projectId:store.state.Workspace.probjects.id,
						collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
					}
				}else{
					params = {
						likeOrDislike:'dislike',
						transformedId:design.id,
						projectId:store.state.Workspace.probjects.id,
						collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
					}
				}
			}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(
				(rv) => {
					if(str == 'like'){
						likeDesignCollectionList.value.forEach((item:any)=>{
							if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
								if(!item?.childList)item.childList = []
								item.childList.push(design)
							}
						})
					}else{
						likeDesignCollectionList.value.forEach((item:any)=>{
							if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
								item.childList = item.childList.filter((item:any)=>{
									return item.id != design.id
								})
							}
						})
					}
					nextTick().then(()=>{
						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;
			});
		}
		let likeDesignCollection = (design:any,index:any,type:any) => {
			if (designData.likeLoading) {
				return;
			}
			if(type != 'Design'){
				setNoDesignLike(design,index,type,'like')
				return
			}
			let data = {
				designItemId: design.designItemId,
				userGroupId: store.state.HomeStoreModule.userGroupId,
				projectId: store.state.Workspace.probjects.id,
				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
				designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
			};
			
			
			designData.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,
						}
						store.commit("setUserGroupId", rv.userGroupId);
						design.groupDetailId = rv.groupDetailId;
						store.commit(
							"addLikeDesignCollectionList",
							value
						);
						setLikeDislLike('like',value)
						if(index != -1)store.commit("deleteDesignCollectionList", index);
					}
					designData.likeLoading = false;
				})
				.catch((rv) => {
					designData.likeLoading = false;
				});
		}
		const upDataLikeListType = ()=>{

		}
		const setGenerateAwait = (data:any)=>{
			let list = []
			if(data.listType == 'disLike'){
				list = designCollectionList.value
			}else{
				list = likeDesignCollectionList.value
			}
			list[data.index].generateAwait = true;

		}
		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 = designData.oldSelectLikeDesign || []
			}
			uploadLikeDom()
		}
		const uploadLikeDom = ()=>{
			if(designData.isUnfold){
				// const parents = designData.selectLikeDesign.filter((item:any) => item.type === 'design');
				designData.selectLikeDesign = []
				likeDesignCollectionList.value.sort((a:any,b:any)=>{return a.sort - b.sort})
				let childLength = 0
				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.sort = childIndex + item.sort + childLength
							designData.selectLikeDesign.push(childItem)
						})
						childLength = item.childList.length + childLength
					}
					item.sort = childLength + item.sort
					designData.selectLikeDesign.push(item)
				})
				designData.oldSelectLikeDesign = []
				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
					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 != 'All'){
				if(designData.oldSelectLikeDesign.length == 0)designData.oldSelectLikeDesign = designData.selectLikeDesign
				if(designData.resultType == 'Product'){
					designData.selectLikeDesign = designData.oldSelectLikeDesign.filter((item:any) => (item.resultType === 'ToProductImage' || item.resultType === 'Relight'));
				}else{
					designData.selectLikeDesign = designData.oldSelectLikeDesign.filter((item:any) => item.resultType === designData.resultType);
				}
				designData.selectLikeDesign.forEach((item:any,index:number) => {
					item.sort = index + 1
				})
			}else{
				designData.selectLikeDesign = designData.oldSelectLikeDesign
				designData.selectLikeDesign.forEach((item:any,index:number) => {
					item.sort = index + 1
				})
			}
			nextTick(()=>{
				setSystemDesigner(0)
			})
		}
		return {
			store,
			...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),
			likeItemDom,
			collItemDom,
			domHidden,
			recycleDomHidden,
			getDesignTime,

			setDeleteDesign,
			cancelDeleteDesign,
			designMousedown,
			sortDesignCollection,
			getMousePosition,
			mouseenter,
			setLikeDislLike,
			posiitonData,
			moveItem,
			openCollection,
			setEditDesignType,
			openEditBtn,
			addGenerateImg,
			setNoDesignLike,
			upDataLikeListType,
			setGenerateAwait,
			gifPlay,
			gifPause,
			startHover,
			endHover,
			setUnfold,
			changeResultType,
		};
	},
	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)
		this.observerData.observer.unobserve(this.$refs.rightContentBlockBox);
	},
	async mounted() {
		if(window.innerWidth < 1200){
			this.widthList = [
				{
					label:'Medium',
					value:70,
				},{
					label:'Large',
					value:150,
				},{
					label:'Extra-large',
					value:200,
				}
			]	
			this.widthValue = {
					label:'Medium',
					value:70,
				}
		}
		window.addEventListener('beforeunload', (event)=>{
			this.store.commit("clearAllCollection");
		});
		// window.addEventListener('resize', this.setItemPosition)
		
		this.$refs.rightContentBlockBox
		this.observerData.observer = new ResizeObserver(entries => {
			for (let entry of entries) {
				clearTimeout(this.observerData.time)
				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')
			})
		}
	},
	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(){
			this.setItemPosition()	
		},
		setItemPosition(){
			this.setSystemDesigner(0)
			this.setDesignItemStyle()
		},
		affiche(text:any){
			nextTick(()=>{
			    let affiche:any = this.$refs.affiche
				affiche.init(text)
			})
		},
		
		//判断模特和当前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
		designNewCollection() {
			clearTimeout(this.getDesignTime);
			let data = this.getDesignData("");
			if(this.driver__.driver){
				nextTick().then(()=>{
					driverObj__.moveNext();
				})
			}
			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
		resDesignCollection() {
			if(this.driver__.driver){
				nextTick().then(()=>{
					driverObj__.moveNext();
				})
			}
			clearTimeout(this.getDesignTime);
			this.isShowMark = true
			let data = 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;
				});

		},
 
		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: 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 || []
			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 = boardData.map((v: any) => {
				let data = {
					id: v.id,
					name: v.name,
					tcx: v.tcx,
					gradient:v.gradient,
					rgbValue: "",
				};
				data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
				return data;
			});
			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;
				});
		},

		//不喜欢设计
		dislikeDesignCollection(design:any,type:string, index: any) {
			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(type != 'Design'){
				this.setNoDesignLike(design,index,type,'disLike')
				return
			}
			if (this.disLikeLoading) {
				return;
			}
			this.disLikeLoading = true;
			Https.axiosPost(Https.httpUrls.designDislike, data)
				.then((rv: any) => {
					if (rv) {
						// this.store.commit("addDesignCollectionList", [design]);
						this.likeDesignCollectionList.forEach((item:any)=>{
							if(item.sort > design.sort){
								item.sort-=1
							}
						})
						this.store.commit(
							"deleteLikeDesignCollectionList",
							index
						);
						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;
				});
		},
		getWorks(userGroupId: any, type: any) {
			let data:any = {
				"accountId": 0,
				"collectionId": 0,
				"coverId": 0,
				"createDate": "",
				"id": userGroupId,
				"isDeleted": 0,
				"portfolioDes": "",
				"portfolioName": "",
				"portfolioType": "",
				"status": 0,
				"updateDate": "",
				"userLikeGroupId":'' 
			}
			this.isShowMark = true;
			Https.axiosPost(Https.httpUrls.setPorfolioChoose, data).then(
					(rv: any) => {
						this.setPortfolio(rv.portfolioDTO)
						this.store.commit("setUserGroupId", rv.userGroupId);
						this.dealHistoryChooseData(rv, type);
						this.isShowMark = false;
					}
				).catch((res)=>{
					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
		},
		//打开图片详情
		designDetail(
			design: any,
			index: number,
			collectionList: any,
			type: string
		) {
			// if()
			if(this.isMove)return
			if(design.resultType != "Design"){
				this.setEditDesignType(collectionList,index,design.resultType,'edit',type)
				return
			}
			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);
			})
		},

		//完成单个图片设计
		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;
	.page_content {
		position: relative;
		
		
		.designPage_left_bottom{
			position: absolute;
			width: 4rem;
			height: 7rem;
			background: #fff;
			border: 2px solid;
			border-right: none;
			border-radius: 2rem 0 0 2rem;
			top: 50%;
			transform: translate(-100%,-50%);
			left: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 2;
			cursor: pointer;
			>span{
				transition: all .3s;
				transform: rotate(90deg);
				&.active{
					transform: rotate(270deg);
				}
			}
			
		}
		.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;
					}
				}
			}
			
			.designPage_body {
				width: 100%;
				height: 100%;
				display: flex;
				// padding-left: 0.7rem;
				box-sizing: border-box;
				// overflow: hidden;

				.designPage_left {
					// width: 44.4rem;
					height: 100%;
					background: rgba(255, 255, 255, 0.2);
					position: relative;
					// overflow: hidden;
					
					
					.designPage_left_content {
						height: 100%;
						width: 50rem;
						// width: 55rem;
						overflow: hidden;
						// transition: all .3s;
						padding-right: 1.2rem;
						&.active{
							padding-right: 0;
							width: 0;
						}
						.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{
						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;
						background: #000;
						color: #fff;
						flex-direction: column;
						&.active{
							right: 53rem;
							transform: translate(0, -50%);
						}
					}
					.right_top {
						padding: 1rem 3.2rem 2rem 1.2rem;
						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;
						overflow: hidden;
					}
					.right_content_block {
						flex: 1;
						display: flex;
						width: 0;
						flex-direction: column;
						&.recycleBin{
							flex: none;
							margin-left: 0;
							width: 0;
							overflow: hidden;
							&.recycleBinShow{
								width: auto;
								margin-left: 2rem;
							}
							.right_content_body {
								width: 55rem;
								// 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{
													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 #f0d9d0;
											}
											&.ToProductImage{
												border: 2px solid #ccece5;
											}
											&.Relight{
												border: 2px solid #ccece5;
											}
										}
									}
									.content_img {
										height: 100%;
										// object-fit: contain;
										object-fit: cover;
									}
									
									.btn{
										top: 1rem;
										right: 1rem;
										display: flex;
										position: absolute;
										flex-direction: column;
										align-items: center;
										> i{
											cursor: pointer;
											width: 3rem;
											height: 3rem;
											display: flex;
											align-items: center;
											justify-content: center;
										}
										
										.icon_like,.icon_delete {
											font-size: 1.4rem;
											cursor: pointer;
										}
									}
									
									.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>