aida_front/src/component/Detail/DesignDetail.vue

<template>
    <div>
		<!-- designDetailShow -->
        <a-modal class="design_detail_modal_component" 
            v-model:visible="designDetailShow" 
            :footer="null" 
            width="65%"
            :maskClosable="false"
            :centered="true"
			:closable="false"
        >
			<div class="design_title_text">
				<div>{{ $t('DesignDetail.Details') }}</div>
				<div class="design_title_text_intro">{{ $t('DesignDetail.EditDetails') }}</div>
			</div>
			<div class="design_closeIcon" @click.stop="closeModal()">
				<i class="fi fi-rr-cross-small"></i>
			</div>
            <div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
            <div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
			<!-- <div class="design_centent">
			</div> -->
            <div class="design_detail_modal_body" v-show="designShowPrview == 1">
				
                <div class="detail_modal_body_img">
                    <!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->

					<div v-show="imgDesignImg" class="detail_modal_body">
						<div class="detail_modal_body_nav">
							<div v-for="item,index in designItemDetail?.clothes" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
								<img :src="item?.path" alt="">
							</div>
						</div>
						<div class="detail_modal_model_content">
							<div class="detail_modal_item_back" :class="{active:body}" v-for="item,index in frontBack.back" :style="item.style">
								<img :src="item.imageUrl" alt="">
							</div>
							<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
							<div class="detail_modal_item_front" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
								<img :src="item.imageUrl" alt="">
							</div>
						</div>
						
					</div>
					<!-- <div v-else class="detial_img detial_img1" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
						<img :src="item.imageUrl" alt="">
					</div> -->
                    <!-- <img v-show="!imgDesignImg" class="detial_img" src="../../assets/images/homePage/111111.png"> -->

                    <img v-show="!imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
					<div class="detail_btn">
						<!-- 全屏 --> 
						<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
						<!-- 编辑 -->
						<i v-show="!body" class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
						<!-- 层 -->
						<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
						<i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
						<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
					</div>
					<div v-show="ifSubmit" class="subitOkPreviewBtn" @click="submit">
						{{ $t('DesignDetail.Submit') }}
					</div>
                </div>
                <div class="detail_modal_body_category">
                    <div v-show="designOrder" class="detail_modal_right_top scroll_style">
                        <div class="clothes_detail_item clothes_detail_item_apparel">
                            <div class="clothes_item_header">
								<i class="fi fi-rs-comments"></i>
								<div>{{ $t('DesignDetail.CurrentApparel') }}</div>
								<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
							</div>
							<img :src="designItemDetail?.clothes?.[currentIndex]?.path" alt="" class="centent" @click="openCurrent(1)">
                        </div>
						<div class="clothes_detail_item clothes_detail_item_print">
                            <div class="clothes_item_header">
								<i class="fi fi-rs-comments"></i>
								<div>{{ $t('DesignDetail.CurrentPrint') }}</div>
								<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
							</div>
							<div class="centent_div" v-if="designItemDetail?.clothes?.[currentIndex]?.printObject?.prints[0]?.path" @click="openCurrent(2)">
								<img :src="designItemDetail?.clothes?.[currentIndex]?.printObject?.prints[0]?.path" alt="">
							</div>
							<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
                        </div>
						<div class="clothes_detail_item clothes_detail_item_color">
                            <div class="clothes_item_header">
								<i class="fi fi-rs-comments"></i>
								<div>{{ $t('DesignDetail.CurrentColor') }}</div>
								<i class="fi fi-rr-edit" @click.stop="openCurrent(3)"></i>
							</div>
							<div class="img_block_item centent" @click.stop="openCurrent(3)">
								<div class="color_item">
									<div class="color_content" :style="{background:`rgba(${designItemDetail?.clothes?.[currentIndex].color?.r},${designItemDetail?.clothes?.[currentIndex].color?.g},${designItemDetail?.clothes?.[currentIndex].color?.b},${designItemDetail?.clothes?.[currentIndex].color?.a?designItemDetail?.clothes?.[currentIndex].color.a:1})`}"></div>
									<div class="color_content_body">
										<div class="color_des">{{designItemDetail?.clothes?.[currentIndex]?.color?.tcx}}</div>
										<div class="color_des">{{designItemDetail?.clothes?.[currentIndex]?.color?.name}}</div>
									</div>
								</div>
							</div>
                        </div>
						
                    </div>
                </div>
				<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>

            </div>
            <div class="design_detail_perview" v-show="designShowPrview == 2">
                <div class="design_detail_perview_content" >
					<magnifyingGlass ref="magnifyingGlass" :designItemDetailUrl='designItemDetailUrl'></magnifyingGlass>
                    <!-- <img class="perview_img"   v-lazy="designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl"> -->
                    <!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
                </div>
            </div>
			<div class="design_detail_perview" v-show="designShowPrview == 3">
                <div class="design_detail_perview_content" >
                    <!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
					<setDesignItem ref="setDesignItem" @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
                </div>

            </div>
        </a-modal>
         <div class="mark_loading" v-show="loadingShow">
            <a-spin size="large" />
        </div>
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide } from 'vue'
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex";
import GO from '@/tool/GO';
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
        Draggable,
		DesignDetailAlter,
		setDesignItem,
		magnifyingGlass,
    },
    setup() {
        const store = useStore();
        // let designItemDetail :any = computed(()=>{
		// 	return store.state.DesignDetailModule.designItemDetail
		// })
		let designItemDetail :any = computed(()=>{
			return store.state.DesignDetailModule.designItemDetail
		})
        let parentData:any = ref({
            design:{},
            index:0,
            collectionList:[],
            type:'',

        })//父组件传过来的数据
		let others:any = ref({
			left:200+'px',
			top:100+'px',
		})
		let currentIndex:any = ref(0)
		let current:any = ref({})//点击上衣或者下衣
		provide('current',current)
		let frontBack:any = ref({})
		let body = ref(false)
		let designItemId = ref()
		let designOutfitId = ref()
		let userInfo:any = {}
		let ifSubmit = ref(false)
		let designItemDetailUrl = ref({})
		let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张
		let oppositeRevocationShow:any = ref()
		let revocationShow:any = ref()

		let {t} = useI18n()
        return{
            designItemDetail,
            store,
            parentData,
			others,
			currentIndex,
			current,
			frontBack,
			body,
			designItemId,
			designOutfitId,
			userInfo,
			ifSubmit,
			designItemDetailUrl,
			setRevocationShow,
			oppositeRevocationShow,
			revocationShow,
			t,
        }
    },
    data(){
        return{
            loadingShow:false,//加载中
            designDetailShow:false,
            designShowPrview:1, //展示图片预览步骤
            generateHighDesignImg:'',//点击generate按钮生成的高级设计图
			imgDesignImg:true,
			designOrder:false,
        }
    },
	watch:{
		designItemDetail:{
			handler: async function(newVal,oldVal) {
				let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
				this.ifSubmit = designItemDetail.ifSubmit?designItemDetail.ifSubmit:false
				this.current = JSON?.parse(JSON?.stringify(designItemDetail?.clothes?.[this?.currentIndex]))
				if(designItemDetail.others[0].layersObject.length != 0){
					this.body = false
				}else{
					this.body = true
				}
				await this.setImgSize()
				this.designItemDetailUrl = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
			}
		},
		currentIndex:{
			handler: function(newval) {
			}
		},
	},
	provide() {
		return {
			setRevocation:this.setRevocation
		}
	},
	mounted(){
		let beforeunload =  () => {
			this.removeRevocation()
			window.removeEventListener('beforeunload',beforeunload)
		}
		window.addEventListener('beforeunload',beforeunload)
		let onresizeTime:any
		let this_ = this
		window.onresize = () => {
        return (() => {
			clearTimeout(onresizeTime)
			onresizeTime = setTimeout(async ()=>{
				await this_.setImgSize()
			},500)
			
			})()
		}

		let userInfo:any = getCookie("userInfo")
        this.userInfo = JSON.parse(userInfo);
		// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
        //     this.loadingShow = true
        //     Https.axiosGet(url).then(
		// 		async (rv: any) => {
		// 			rv.clothes.forEach((item:any)=>{
		// 				let a
		// 				if(item.layersObject[0].imageCategory.indexOf("back") == -1){
		// 					a = item.layersObject[0]
		// 					item.layersObject[0] = item.layersObject[1]
		// 					item.layersObject[1] = a
		// 				}
		// 				if(item.printObject.prints == null){
		// 					item.printObject.prints = [{}]
		// 				}
		// 			})
        //             this.store.commit('setDesignItemDetail',rv)
		// 			if(rv.others[0].printObject.path == null){
		// 				this.body = false
		// 			}else{
		// 				this.body = true
		// 			}
		// 			this.setImgSize()
        //             this.generateHighDesignImg = rv.highDesignUrl
        //             this.designShowPrview = 1
        //             this.designDetailShow = true
        //             this.loadingShow = false
        //         }
        //     ).catch(rv=>{
        //         this.loadingShow = false
        //     })
	},
    methods:{
		openCurrent(num: Number) {
			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			DesignDetailAlter.init(num)
			if(num ==2 ){
			}
        },
	
        closeModal(){
            if(this.designShowPrview == 1){
                this.designDetailShow = false
				this.designOrder = false
				let DesignDetailAlter:any = this.$refs.DesignDetailAlter
				DesignDetailAlter.terminate()
				// this.designItemDetail = {}
				this.frontBack = {}
				this.removeRevocation()
            }else{
                this.designShowPrview = 1;
				this.designItemDetailUrl = {}
            }
        },
		
        showDesignDetailModal(data:any,str:string){
			this.designItemId = data.design.designItemId
			this.designOutfitId = data.design.designOutfitId
            let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
            this.parentData = data
            this.loadingShow = true
            Https.axiosGet(url).then(
                (rv: any) => {
					rv.clothes.forEach((item:any)=>{
						let a
						if(item.layersObject[0].imageCategory.indexOf("back") == -1){
							a = item.layersObject[0]
							item.layersObject[0] = item.layersObject[1]
							item.layersObject[1] = a
						}
						if(item.printObject.prints == null){
							item.printObject.prints = [{}]
						}
					})
					
                    this.store.commit('setDesignItemDetail',rv)
					this.setRevocation(rv,'')
					if(rv.others[0].layersObject.length != 0){
						this.body = false
					}else{
						this.body = true
					}
					if(str == 'setDesignItem'){

					}else{
						this.designShowPrview = 1
					}
					this.setImgSize()
                    this.generateHighDesignImg = rv.highDesignUrl
                    this.designDetailShow = true
                    this.loadingShow = false
                }
            ).catch(rv=>{
                this.loadingShow = false
            })
        },
		async setImgSize(){
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			let front:any = []
			let back:any = []
			let body:any
			if(this.body){
				designItemDetail.clothes.forEach((v:any,index:number)=>{
					let zIndex = 3
					for (let i = v.layersObject.length-1; i >= 0; i--) {
						if(v.layersObject[i].imageCategory.indexOf("back") == -1){
							front[index] = v.layersObject[i]
						}else{
							back[index] = v.layersObject[i]
						}
					}
				})
			}else{
				designItemDetail?.others?.forEach((item:any) => {
					if(item.type == 'Body'){
						body = item
					}
				});
				console.log(body?.layersObject?.[0]?.imageUrl);
				
				let ratio:any = await this?.setPostition(body?.layersObject?.[0]?.imageUrl)
				let frontIndex = 6
				let backIndex = 3
				designItemDetail.clothes.forEach((v:any,index:any)=>{
					
					for (let i = v.layersObject.length-1; i >= 0; i--) {
						v.layersObject[i].style = {
							top:v.layersObject[i].position?.[0]*ratio+'px',
							left:v.layersObject[i].position?.[1]*ratio+'px',
							width:v.layersObject[i].imageSize?.[0]*ratio+'px',
							height:v.layersObject[i].imageSize?.[1]*ratio+'px',
							// zIndex:zIndex-=1
						}
						v.layersObject[i].centers={
							left:0,
							top:0,
						}
						v.layersObject[i].designOpenrtionBtn = false
						if(v.layersObject[i].imageCategory.indexOf("back") == -1){
							front[index] = v.layersObject[i]
							front[index].style.zIndex = frontIndex-=1
						}else{
							back[index] = v.layersObject[i]
							back[index].style.zIndex = backIndex-=1
							// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
						}
					}
				})
				body.style = {
					width:body.layersObject[0].imageSize?.[0]*ratio+'px',
					height:body.layersObject[0].imageSize?.[1]*ratio+'px',
				}
			}
			this.frontBack = {
				front:front,
				back:back,
				body:body,
			}
		},
		setDesignCoverage(str:string){
			let {design,index,collectionList} = this.parentData
            let newIndex = 0
            let newDesign = {}
			collectionList.forEach((item:any,index:number) => {
				if(item.designItemId === this.designItemId){
					newIndex = index
				}
			});
			newDesign = collectionList[newIndex]
			newIndex = this.parentData.index
            let data = {
                design:newDesign,
                index:newIndex,
                collectionList:collectionList
            }
			this.designShowPrview = 1
            // this.showDesignDetailModal(data,str)
		},
		removeRevocation(){
			sessionStorage.removeItem('oppositeRevocation')
			sessionStorage.removeItem('revocation')
			this.setRevocationShow = false
		},
		setRevocation(designItemDetail:any,data:any){//设置撤销
			let itemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			// let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
			if(revocation?.[0]?.designItemDetail.designItemId != itemDetail.designItemId || sessionStorage.getItem("revocation") == null){
				// sessionStorage.setItem('revocation', JSON.stringify([]));
				// sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
				revocation = []
			}
			let detail = {
				designItemDetail:designItemDetail,
				data:data?data:''
			}
			revocation.push(detail)
			this.revocationShow = revocation?.length
			this.oppositeRevocationShow = 0
			sessionStorage.setItem('revocation', JSON.stringify(revocation));
			sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
		},
		revocation(){//撤回
			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
			oppositeRevocation.push(revocation[revocation.length-1])
			this.oppositeRevocationShow = oppositeRevocation.length
			revocation.splice(revocation.length-1,1)
			this.revocationShow = revocation.length
			if(this.revocationShow > 1){
				this.store.commit('setDesignPreviewData',revocation[revocation.length-1].data)
			}
			this.store.commit("setDesignItemDetail", revocation[revocation.length-1].designItemDetail);
			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
			sessionStorage.setItem('revocation', JSON.stringify(revocation));
		},
		oppositeRevocation(){//反撤回
			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
			this.store.commit('setDesignPreviewData',oppositeRevocation[oppositeRevocation.length-1].data)
			this.store.commit("setDesignItemDetail", oppositeRevocation[oppositeRevocation.length-1].designItemDetail);
			revocation.push(oppositeRevocation[oppositeRevocation.length-1])
			this.revocationShow = revocation.length
			oppositeRevocation.splice(oppositeRevocation.length-1,1)
			this.oppositeRevocationShow = oppositeRevocation.length
			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
			sessionStorage.setItem('revocation', JSON.stringify(revocation));
		},
		setSubmitItem(str:any){
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			let clothes:any = []
			
			designItemDetail.clothes.forEach((item:any) => {
				let clothesItem = {
					color: `${item.color.r} ${item.color.g} ${item.color.b}`,
					id:item.id,
					path:item.minIOPath,
					offset:item.layersObject[1].offset == null?[0,0]:item.layersObject[1].offset,
					scale:item.layersObject[1].scale?item.layersObject[1].scale:1,
					printObject:{
						ifSingle:item.printObject.ifSingle == null ? false : item.printObject.ifSingle,
						// path:item.printObject.path?item.printObject.path :'',
						prints:item?.printObject?.prints[0]?.minIOPath?item?.printObject?.prints:[]
					},
					type:item.type,
				}
				clothes.push(clothesItem)
				
			});
			let data = {
                designItemId:designItemDetail.designItemId,
				// designItemId:designItemDetail.designItemId,
				designSingleItemDTOList:clothes,
				isPreview:false,
				ifSubmit:designItemDetail.isPreview,
				processId:String(this.userInfo?.userId),
				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            }
			if(str == 'preview'){
				data.isPreview = true
			}else{
				data.isPreview = false
				delete data.ifSubmit
			}
			this.store.commit('setDesignPreviewData',data)
			return data
		},
		setSubmit(str:any){
			let setDesignItem:any = this.$refs.setDesignItem	
			let data = this.setSubmitItem(str)
			setDesignItem.setPreview(data)
		},
		async submit(){
			let data = this.setSubmitItem('')
            this.loadingShow = true
            Https.axiosPost(Https.httpUrls.designSingle, data).then(
                (rv: any) => {
                    this.loadingShow = false
					let designCollectionList = this.store.state.HomeStoreModule.designCollectionList
					let likeDesignCollectionList = this.store.state.HomeStoreModule.likeDesignCollectionList
					designCollectionList.forEach((item:any) => {
						if(item.designItemId == rv.designItemId){
							item.designOutfitUrl = rv.designItemUrl
						}
					});
					likeDesignCollectionList.forEach((item:any) => {
						if(item.designItemId == rv.designItemId){
							item.designOutfitUrl = rv.designItemUrl
						}
					});
					this.closeModal()
					this.store.commit('setDesignCollectionList',designCollectionList)
					this.store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
					
                }
            ).catch(res=>{
                this.loadingShow = false
            });
			
		},
		//按比设置单件衣服宽高位置
		async setPostition(url:any){
			let img:any = await loadImage(url)
			let modal_body = <HTMLImageElement>document.getElementsByClassName('detail_modal_model')[0]
				console.log(modal_body);
				
			const num = modal_body?.offsetWidth / img.width;
			function loadImage(url:any) {
				return new Promise((resolve, reject) => {
					
					const img = new Image();
					img.onload = () => {
						resolve(img)
					};
					img.onerror = reject;
					img.src = url;
				});
			}
			return num
		},
        //切换上一张或下一张图的详情
        changeDesignItem(type:string){
            let {design,index,collectionList} = this.parentData
            let newDesign = {}
            let newIndex = 0
			this.designOrder = false
			this.removeRevocation()
			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			DesignDetailAlter.terminate()
            if(type === 'last'){
                if(index>0){
                    newIndex = this.parentData.index - 1
                }else{
                    newIndex = this.parentData.collectionList.length - 1
                }
            }else{
                if(index <  this.parentData.collectionList.length - 1){
                    newIndex = this.parentData.index + 1
                }else{
                    newIndex = 0
                }
            }
            newDesign = collectionList[newIndex]
            let data = {
                design:newDesign,
                index:newIndex,
                collectionList:collectionList
            }
            this.showDesignDetailModal(data,'')
        },

        //显示图片详情
        showDesignImgDetail(num:any){
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			this.designShowPrview = num
			let setDesignItem:any = this.$refs.setDesignItem

			if(this.designShowPrview == 3){
				setDesignItem.init()
			}
			// this.others = designItemDetail.others

            // if(this.generateHighDesignImg){
            //     this.designShowPrview = 3
            // }else{
            //     this.designShowPrview = 2
            // }
        },
		//图片按下样子
		mousedownDesignImg(){
			this.imgDesignImg = false
		},
		//图片抬起样子
		mouseupDesignImg(){
			this.imgDesignImg = true
		},
		clothesOpen(index:any){
			this.clothesDetail('',index)
		},
		clothesOpenActive(index:any){
			this.designItemDetail.clothes.forEach((item:any)=>{
				item.clothesOpen = false
			})
			this.designItemDetail.clothes[index].clothesOpen = true
		},
        //元素替换
        clothesDetail(clothes:any, index:number){
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			this.currentIndex = index
			this.designOrder = true
			this.current = designItemDetail.clothes[this.currentIndex]
			this.clothesOpenActive(index)
			let data:any = this.setSubmitItem('preview')
			data.designSingleItemDTOList[this.currentIndex] = {
				color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
				id:this.current.id,
				path:this.current.minIOPath?this.current.minIOPath:'',
				offset:this.current.layersObject[1].offset?this.current.layersObject[1].offset:[0,0],
				scale:this.current.layersObject[1].scale?this.current.layersObject[1].scale:1,
				printObject:{
					ifSingle:this.current?.printObject?.ifSingle == null ? false : this.current?.printObject?.ifSingle,
					// prints:this.current?.printObject[0]?.path == null ? [] : [{
					// 	location:[0,0],
					// 	angle:0,
					// 	priority:1,
					// 	path:this.current?.printObject?.path?this.current.printObject.path :'',
					// 	minIOPath:this.current?.printObject?.minIOPath?this.current.printObject.minIOPath :'',
					// }],
					prints:this.current?.printObject?.prints[0]?.minIOPath?this.current?.printObject?.prints:[]
				},
				type:this.current.type,
			}
			this.store.commit('setDesignPreviewData',data)
			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			DesignDetailAlter.changePlace()
        },
        //重新设计
        redesignItem(){
            let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
            delete designItemDetail.designItemUrl
            let priority = designItemDetail.clothes.map((v:any)=>{
                return v.type
            })
            let data = {
                ...designItemDetail,
                priority:priority,
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            }
            this.loadingShow = true
            Https.axiosPost(Https.httpUrls.designSingle, data).then(
                (rv: any) => {
                    this.parentData.design.designItemUrl = rv.designItemUrl
                    this.$emit('finishRedesign',this.parentData)
                    this.closeModal()
                    this.loadingShow = false
                }
            ).catch(res=>{
                this.loadingShow = false
            });
        }



        
    }
})
</script>
<style lang="less">
.design_detail_modal_component{
    color: #000;
	// max-width: 1440px ;
	
		
	.ant-modal-content{
		border-radius: 1rem;
		// overflow: hidden; 
		.ant-modal-header{
			background-color: #fff;
			border-bottom: none;
		}
		.ant-modal-body{
			padding: 4rem 5rem 0rem!important;
			// height: calc(65vh - 6.4rem);
			height: 65rem;
			display: flex;
			overflow-y: hidden;
			flex-direction: column;
		}
	}
    .ant-modal-close{
        width: 3.6rem;
        height: 3.6rem;
        position: absolute;
        top: -1.8rem;
        right: -1.8rem;
    }

    .ant-modal-header{
        display: none;
    }


    

    .turn_button{
        width: 3.6rem;
        height: 3.6rem;
        background: #000000;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 1.8rem);
        cursor: pointer;
        line-height: 3.6rem;
        text-align: center;

        &.turn_left_button{
            left: -8rem;
        }

        &.turn_right_button{
            right: -8rem;
        }

        .icon_turn{
            font-size: 2.4rem;
            color: #ffffff;
        }
    }

    

    .design_detail_modal_body{
		flex: 1;
        display: flex;
        justify-content: space-between;
        width: 100%;
		overflow: hidden;
        // padding: 1.5rem 1rem 2.5rem;
        box-sizing: border-box;
        .detail_modal_body_img{
			overflow: hidden;
            // width: 43.3rem;
			width: 23%;
            height: 100%;
            background: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
			position: relative;
			flex-direction: column;
				// height: 50%;
			.detail_modal_body{
				position: relative;
				// max-width: 245px;
				width: 100%;
				height: 100%;
				.detail_modal_body_nav{
					display: flex;
					position: absolute;
					top: 0;
					left: 50%;
					z-index: 999;
					transform: translate(-50%,-120%);
					transition: all .3s;
					>div{
						width: 4rem;
						height: 4rem;
						cursor: pointer;
						text-align: center;
						img{
							// width: 100%;
							height: 100%;
							max-width: 100%;
							object-fit: cover;
						}
						&.active{
							border: 2px solid rgba(0,0,0,0.4);
							img{
								transform: scale(.8);
								opacity: .8;
							}
						}
					}
					>div:nth-child(1){
						margin-right: 1rem;
					}
				}
				.detail_modal_item_front:last-child{ 
					z-index: 1 !important;
				}
				>img{
					width: 100%;
				}
				.detail_modal_model_content{
					top: 50%;
					transform: translate(-50%, -50%);
					left: 50%;
					position: relative;
					height: 80%;
					display: inline-block;
					.detail_modal_model{
						z-index: 1;
						position: relative;
						width: auto;
						max-height: 100%;
					}
					.detail_modal_item_front,.detail_modal_item_back{
						cursor: pointer;
						position: absolute;
						img{
							// width: 100%;
							max-height: 100%;
							width: auto;
						}
						&.active{
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
						}
					}
					.detail_modal_item_back{
						z-index: 1 !important;
					}
					.detail_modal_item_front{

					}
				}
				
			}
			.subitOkPreviewBtn{
				bottom: 2rem;
				z-index: 999;
			}
			.clothes_item_img_block{
				display: flex;
			}
            .detial_img{
                max-width: 100%;
                max-height: 80%;
            }
			.detail_btn{
				z-index: 9999;
			}
			.detial_img1{
				position: absolute;
			}
			div{
				i{
					position: absolute;
					cursor: pointer;
					zoom: 1.2;
					transition: all .3s;
					&.fi-bs-expand-arrows-alt{
						top: 0;
						left: 0;
						transform: translateX(-120%);
					}
					&.fi-rr-edit{
						left: 0;
						top: 3rem;
						transform: translateX(-120%);
					}
					&.fi-rr-copy{
						top: 0;
						right: 0;
						transform: translateX(120%);
					}
					&.icon-fanchehui{
						top: 6rem;
						right: 0;
						transform: translateX(120%);
					}
					&.icon-chehui{
						top: 3rem;
						right: 0;
						transform: translateX(120%);
					}
				}
				i:hover{

				}
			}
			&.detail_modal_body_img:hover{
				.detail_modal_body{
					.detail_modal_body_nav{
						transform: translate(-50%,0%);
					}
				}
				div{
					i{
						transform: translateX(0);
					}
				}
			}
        }

        .detail_modal_body_category{
			width: 17%;
            height: 100%;
			position: relative;
            .detail_modal_right_top{
                width: 100%;
				height: 100%;
                background: #fff;
                overflow-y: auto;
				display: flex;
				flex-direction: column;
                .clothes_detail_item{
					// margin-bottom: 5rem;
					flex: 1;
					.centent_div{
						display: flex;
						cursor: pointer;
						justify-content: center;
					}
					.centent{
						cursor: pointer;

						left: 50%;
						transform: translateX(-50%);
						position: relative;
						display: inline-block;
					}
                    .clothes_item_header{
                        // height: 6.4rem;
						margin-bottom: 1rem;
						display: flex;
                        font-size: 1.8rem;
                        color: #000000;
						justify-content: space-between;
                        .icon-dangqianweizhi{
                            font-size: 1.8rem;
                            color: #000000;
                            margin-right: 1rem;
                        }
						i{
							font-size: 1.8rem;
							display: block;
							&.fi-rr-edit{
								cursor: pointer;
							}
						}
                    }
					img{
						width: 10rem;
						height: 10rem;
					}
					&.clothes_detail_item_apparel{
						img{
							max-height: 100%;
							width: auto;
						}
					}
					.color_item{
						display: inline-block;
						vertical-align: top;
						border: 1px solid #ebe9e9;
						.color_content{
							width: 8rem;
							height: 4rem;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.color_content_body{
							.color_des{
								font-size: 1.2rem;
								font-weight: 600;
								white-space: nowrap;
								width: 8rem;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
						&:nth-child(4n){
							margin-right: 0;
						}
					}
					&.clothes_detail_item_print{
						.fi-rr-picture{
							display: flex;
							align-items: center;
							justify-content: center;
							zoom: 3;
							margin: 1rem 0;
						}
					}
					&.subitOkPreviewBtn{
						position: relative;
						margin-top: 2rem;
					}
                }
            }
        }
		.detail_modal_body_select{
			width:  20%;
			.switch_type_list {
            display: flex;
            align-items: center;
            position: relative;
			justify-content: space-around;

            .switch_type_item {
                display: flex;
                align-items: center;
                // padding: 0 2rem;
                height: 4rem;
                background: #fff;
                border-radius: 0.8rem;
                line-height: 4rem;
                font-size: 1.6rem;
                // margin-right: 2.2rem;
                color: #000;
                cursor: pointer;
                position: relative;
                text-align: center;
                transform-origin: left;
                transform: scale(1);
                transition: 0.3s all;
                &.switch_type_item::before {
                    position: absolute;
                    content: "";
                    display: block;
                    background: #000;
                    height: 3px;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 6px;
                    width: 0px;
                    transition: 0.3s all;
                }
                &.select_swtich {
                    color: #000;
                    font-weight: 600;
                    transform: scale(1.15);
                }
                &.select_swtich::before {
                    width: 100%;
                }

                .switch_icon {
                    font-size: 1.8rem;
                    margin-right: 0.8rem;
                }
            }
        }
		}
		
    }

    .design_detail_perview{
        width: 100%;
        height: 100%;
		flex: 1;
		overflow: hidden;
        &.design_detail_perview_second{
            width: 100%;
            height: 100%;
            padding: 0.7rem 9.1rem 0.6rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .design_detail_perview_content{
            height: 100%;
            background: #fff;
            position: relative;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;

            .perview_img{
                max-width: 100%;
                max-height: 100%;
            }
            .generate_button{
                position: absolute;
                top: 0;
                right: -20.2rem;
                padding: 0 1.5rem;
                text-align: center;
                height: 3.6rem;
                line-height: 3.6rem;
                background: #343579;
                font-size: 1.4rem;
                font-family: Roboto;
                color: #FFFFFF;
                cursor: pointer;
            }

             &:hover .img_item_hover{
                display: block;
            }

            .img_item_hover{
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top:0;
                background: rgba(0,0,0,0.4);
                display: none;

                .img_operate_block{
                    width: 3.6rem;
                    height: 3.6rem;
                    background: rgba(0,0,0,0.6);
                    border-radius: 50%;
                    position: absolute;
                    right: 2.2rem;
                    text-align: center;
                    line-height: 3.6rem;
                    cursor: pointer;

                    &.delete_img_block{
                        top: 2rem;
                    }

                    .operate_icon{
                        font-size: 1.8rem;
                        color: #fff;
                    }
                }
            }
        }

        
    }

   
    
}
</style>