aida_front/src/component/Detail/DesignDetail.vue

<template>
    <div>
		<!-- designDetailShow -->
        <a-modal class="design_detail_modal_component Guide_1_18" 
		:class="[driver__.driver?'hideEvents':'']"
            v-model:visible="designDetailShow" 
            :footer="null" 
            width="78%"
            :maskClosable="false"
            :centered="true"
			:keyboard="false"
			:closable="false"
        >
			<div class="modal_title_text">
				<div>{{ $t('DesignDetail.Details') }}</div>
				<div class="modal_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" :style="[(driver__.index == 35|| driver__.index == 36)?'transform: translate(-50%,0%)':'']">
							<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:item.clothesOpen,Guide_1_19:(index == 0 && (driver__.index == 35|| driver__.index == 36))}" @click="clothesOpen(index)">
								<img :src="item?.path" alt="">
								<i v-show="deleteShow" class="fi fi-br-cross" @click.stop="setDelete(index)"></i>
							</div>
							<div v-show="designItemDetailNum < 5 && !body" class="detail_modal_body_Set" @click="setClothesOpen()">
								+
							</div>
						</div>
						<div class="detail_modal_model_content" :class="{active:body}">
							<img class="detail_modal_model" :src="designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl" alt="">
							<!-- <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 Guide_1_19" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesOpen(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 class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
						<i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
						<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i>

						<!-- 层 -->
						<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="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 Guide_1_26" @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>
								<i v-show="current?.id" :title="$t('DesignDetail.editSketchTitle')" class="fi fi-rs-pencil-paintbrush" @click.stop="addDetail"></i>
							</div>
							<div class="centent_div" v-if="current?.id" @click="openCurrent(1)">
								<img :src="current?.path" alt="" class="" @click="openCurrent(1)">
							</div>
							<i v-else class="fi fi-rr-picture centent clothes_item_icon" @click="openCurrent(1)"></i>

                        </div>
						<div class="clothes_detail_item clothes_detail_item_print" :class="[current?.id?'':'hideCursor']">
                            <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="Guide_1_20 clothes_item_icon" :class="[driver__.driver?'showEvents':'']">
								<div class="centent_div centent_print" v-if="exhibitionList.print && exhibitionList.print.length > 1" @click="openCurrent(2)">
									<img v-for="item in exhibitionList.print" :key="item.id" :src="item.path" alt="">
								</div>
								<div v-else-if="exhibitionList.print && exhibitionList.print.length == 1" class="centent_div" @click="openCurrent(2)">
									<img :src="exhibitionList.print[0]?.path" alt="">
								</div>
								<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
							</div>
                        </div>
						<div class="clothes_detail_item clothes_detail_item_color" :class="[current?.id?'':'hideCursor']">
                            <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 v-if="!current?.gradient" class="color_content" :style="{background:`rgba(${current?.color?.r},${current?.color?.g},${current?.color?.b},${current?.color?.a?current?.color.a:1})`}"></div>
									<div class="color_content" v-else :style="{height:'10rem','background-image':current?.gradient?`linear-gradient(${current?.gradient.angle}deg,${setGradient(current?.gradient)}`:'none'}"></div>
									<div v-if="!current?.gradient" class="color_content_body">
										<div class="color_des">{{current?.color?.tcx}}</div>
										<div class="color_des">{{current?.color?.name}}</div>
									</div>
								</div>
							</div>
                        </div>
						<div class="clothes_detail_item clothes_detail_item_elements" :class="[current?.id?'':'hideCursor']">
                            <div class="clothes_item_header">
								<i class="fi fi-rs-comments"></i>
								<div>{{ $t('DesignDetail.CurrentElements') }}</div>
								<i class="fi fi-rr-edit" @click.stop="openCurrent(4)"></i>
							</div>
							<div class="Guide_1_20 clothes_item_icon" :class="[driver__.driver?'showEvents':'']">
								<div class="centent_div centent_print" v-if="exhibitionList.elements && exhibitionList.elements.length > 1" @click="openCurrent(4)">
									<img v-for="item in exhibitionList.elements" :key="item.id" :src="item.path" alt="">
								</div>
								<div v-else-if="exhibitionList.elements && exhibitionList.elements.length == 1" class="centent_div" @click="openCurrent(4)">
									<img :src="exhibitionList.elements[0]?.path" alt="">
								</div>
								<i v-else class="fi fi-rr-picture centent" @click="openCurrent(4)"></i>
							</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" :isBody="body" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
					<!-- <setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile> -->
                </div>

            </div>
			<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
        </a-modal>
         <div class="mark_loading" v-show="loadingShow">
            <a-spin size="large" />
        </div>
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode} from 'vue'
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import setDesignItemMobile from '@/component/Detail/setDesignItemMobile.vue'
import Draggable from 'vuedraggable'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
import addDetails from '@/component/Detail/addDetails.vue'
export default defineComponent({
    components:{
        Draggable,
		DesignDetailAlter,
		setDesignItem,
		magnifyingGlass,
		setDesignItemMobile,
		addDetails,
    },
    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)
		provide('designItemDetail',designItemDetail)
		provide('currentIndex',currentIndex)
		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 driver__:any = computed(()=>{
			return store.state.Guide.guide
		})
		provide('driver__',driver__)
		provide('body',body)
		let moible:any = isMoible()
		provide('moible',moible)
		let exhibitionList:any = ref({
			print:[],
			elements:[],
		})
		provide('exhibitionList',exhibitionList)
		let {t} = useI18n()
		//创建单件衣服
		let setClothes:any = ref()
		//点击删除按钮
		let deleteShow:any = ref(false)
		let deleteItemShow:any = ref(false)
		let designItemDetailNum:any = ref(0)
		
        return{
            designItemDetail,
            store,
            parentData,
			others,
			currentIndex,
			current,
			frontBack,
			body,
			designItemId,
			designOutfitId,
			userInfo,
			ifSubmit,
			designItemDetailUrl,
			setRevocationShow,
			oppositeRevocationShow,
			revocationShow,
			driver__,
			moible,
			exhibitionList,
			t,
			setClothes,
			deleteShow,
			deleteItemShow,
			designItemDetailNum,
        }
    },
    data(){
        return{
            loadingShow:false,//加载中
            designDetailShow:false,
            designShowPrview:1, //展示图片预览步骤
            generateHighDesignImg:'',//点击generate按钮生成的高级设计图
			imgDesignImg:true,
			designOrder:false,
        }
    },
	computed:{
		setGradient(){
			return (gradient:any)=>{
				let gradientStr = ''
				gradient.gradientList.sort((a:any, b:any) => {
					let aArr = a.left.split('%')[0]
					let bArr = b.left.split('%')[0]
					return aArr - bArr;
				});
				gradient.gradientList.forEach((item:any,index:any)=>{
					let str = ','
					if(gradient.gradientList.length == index+1)str = ''
					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 

				})
				return `${gradientStr}`
			}
		},
	},
	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
				if(newVal.clothes.length == 0){
					this.current = ''					
				}else{
					if(newVal.clothes.length-1 < this.currentIndex){
						this.currentIndex = newVal.clothes.length-1
						
					}
					this.current = JSON?.parse(JSON?.stringify(designItemDetail?.clothes?.[this?.currentIndex]))
				}
				// if(designItemDetail.others?.[0]?.layersObject?.length != 0){
				// 	this.body = false
				// }else{
				// 	this.body = true
				// }
				if(designItemDetail.singleOverall == 'overall'){
						this.body = false
					}else{
						this.body = true
					}
				let num = 0
				newVal.clothes.forEach((item:any) => {
					if(item.id){
						num++
					}
				});
				
				this.designItemDetailNum = num
				await this.setImgSize()
				let url = ''
				if(designItemDetail.currentFullBodyView){
					url = designItemDetail.currentFullBodyView
				}else{
					url = designItemDetail.designItemUrl
				}
				this.designItemDetailUrl = url
				// console.log(designItemDetail.currentFullBodyView,designItemDetail.designItemUrl);
				
			}
		},
		designDetailShow:{
			handler: function(newval) {
				// this.removeRevocation()
			}
		},
		'current.printObject.prints':{
			handler(newVal,oldVal){
				if(newVal && newVal.length > 0){
					this.exhibitionList.print = this.setExhibitionList(newVal)
				}else{
					this.exhibitionList.print = []
				}
			}
		},
		'current.trims.prints':{
			handler(newVal,oldVal){
				if(newVal && newVal.length > 0){
					this.exhibitionList.elements = this.setExhibitionList(newVal)
				}else{
					this.exhibitionList.elements = []
				}
			}
		},
	},
	provide() {
		return {
			setRevocation:this.setRevocation
		}
	},
	mounted(){
		let beforeunload =  () => {
			this.removeRevocation()
			window.removeEventListener('beforeunload',beforeunload)
		}
		window.addEventListener('beforeunload',beforeunload)
		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
			if(num == 2 || num == 3){
				if(!this.current.id){
					return
				}
			}
			DesignDetailAlter.init(num)
			if(num ==2 ){
				if(this.driver__.driver){
					nextTick().then(()=>{
						driverObj__.moveNext();
					})
				}
			}
        },
		addDetail(){
			let addDetails:any = this.$refs.addDetails
			addDetails.init(this.current,this.currentIndex)
		},
        closeModal(submit:any){
            if(this.designShowPrview == 1){
				if(this.ifSubmit && submit == ''){
					let _this = this
					Modal.confirm({
						title: this.t('DesignPrintOperation.jsContent1'),
						icon: createVNode(ExclamationCircleOutlined),
						okText: 'Yes',
						cancelText: 'No',
						mask:false,
						centered:true,
						onOk() {
							_this.designDetailShow = false
							_this.designOrder = false
							let DesignDetailAlter:any = _this.$refs.DesignDetailAlter
							DesignDetailAlter.terminate()
							// _this.designItemDetail = {}
							_this.frontBack = {}
						}
					});
				}else{
					this.designDetailShow = false
					this.designOrder = false
					let DesignDetailAlter:any = this.$refs.DesignDetailAlter
					DesignDetailAlter.terminate()
					// this.designItemDetail = {}
					this.frontBack = {}
					let setDesignItem:any = this.$refs.setDesignItem
					// let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
					setDesignItem.clear()
				}
                
				
            }else{
                this.designShowPrview = 1;
				this.frontBack = {}
				let setDesignItem:any = this.$refs.setDesignItem
				setDesignItem.clear()
				// this.designItemDetailUrl = {}
            }
        },
		//切换当前展示的是印花还是elements
		setExhibitionList(arr:any){
			const seen = new Map();
			return arr.filter((obj:any, index:any, self:any) => {
				const key = obj.minIOPath; // 替换成你想要去重的属性名
				if (seen.has(key)) {
					return false;
				} else {
					seen.set(key, true);
					return true;
				}
			});
		},
        showDesignDetailModal(data:any,str:string){
			this.moible = isMoible()
			this.designItemId = data.design.designItemId
			this.designOutfitId = data.design.designOutfitId
            let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
            // let url = Https.httpUrls.getDesignDetail + `?designItemId=61204&designPythonOutfitId=60908`
            this.parentData = data
            this.loadingShow = true
            Https.axiosGet(url).then(
                async (rv: any) => {
					rv.clothes.forEach((item:any)=>{
						let a
						item.designType='Library'
						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 = []
						item.printObject.prints.forEach((element:any) => {
							if(!element.designType){
								element.designType = 'Library'
							}
						});
					})
					this.currentIndex = 0
                    this.store.commit('setDesignItemDetail',rv)
					this.removeRevocation()
					this.deleteShow = false

					this.setRevocation(rv,'')
					// if(rv.others[0].layersObject.length != 0){
					// 	this.body = false
					// }else{
					// 	this.body = true
					// }
					if(rv.singleOverall == 'overall'){
						this.body = false
					}else{
						this.body = true
					}
					if(str == 'setDesignItem'){ 

					}else{
						this.designShowPrview = 1
					}
					// await this.setImgSize()
                    this.generateHighDesignImg = rv.highDesignUrl
                    this.designDetailShow = true
                    this.loadingShow = false
					await this.setImgSize() 
					if(this.driver__.driver){
						nextTick().then(()=>{  
							// driverObj__.moveNext();
							driverObj__.moveTo(36);
						})
					}
                }
				
            ).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
						this.frontBack.body = item
					}
				});
				let ratio:any = await this?.setPostition(body?.layersObject?.[0]?.imageUrl)
				if(Number.isNaN(ratio) || ratio == 0){
					this.setImgSize()
					return
				}
				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',
						}
						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 = v.priority
						}else{
							back[index] = v.layersObject[i]
							back[index].style.zIndex = v.priority
							// 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',
				}
			}
			let onresizeTime:any
			let this_ = this
			this.frontBack = {
				front:front,
				back:back,
				body:body,
			}
			await new Promise((resolve, reject) => {
					nextTick().then(()=>{
						resolve('')
					})
				});
			window.onresize = () => {
			return (() => {
				clearTimeout(onresizeTime)
				onresizeTime = setTimeout(async ()=>{
					await this_.setImgSize()
					
				},500)
				
				})()
			}
			
			
		},
		setParentLoadingShow(){
			this.loadingShow=false
		},
		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)
            this.loadingShow = false
			this.clearSelect()
		},
		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:any = JSON.parse((sessionStorage.getItem("revocation") as any))
			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
			if(revocation?.[0]?.designItemDetail.designItemId != itemDetail.designItemId || revocation?.[0]?.designItemDetail.designItemId == undefined){
				// 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([]));
		},
		clearSelect(){//清除选中
			this.designOrder = false
			this.designItemDetail.clothes.forEach((item:any)=>{
				item.clothesOpen = false
			})
			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			DesignDetailAlter.changePlace()
			DesignDetailAlter.terminate()
		},
		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));
			this.clearSelect()
		},
		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));
			this.clearSelect()
		},
		setSubmitItem(str:any,sub:any){
			//sub判断是不是点击新增图层又直接点击删除
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			let clothes:any = []
			let num = -1
			// let zIndex = 10
			designItemDetail.clothes.forEach((item:any,index:number) => {
				let clothesItem:any = {
					color: `${item.color.r} ${item.color.g} ${item.color.b}`,
					id:item.id,
					path:item.minIOPath,
					gradient:{},
					trims:item.trims,
					sketchString:item.sketchString,
					changed:item.changed?item.changed:false,
					designType:item.designType?item.designType:"Library",
					offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
					maskMinioUrl:item.layersObject[1]?.maskMinioUrl?item.layersObject[1].maskMinioUrl:'',
					maskUrl:item.layersObject?.[1]?.maskUrl?item.layersObject[1].maskUrl:'',
					scale:item.layersObject?.[1]?.scale?item.layersObject[1].scale:[1,1],
					printObject:{
						// path:item.printObject.path?item.printObject.path :'',
						prints:item?.printObject?.prints[0]?.minIOPath?item?.printObject?.prints:[]
					},
					undividedLayer:item?.undividedLayer,
					priority:item.priority,
					type:item.type,
				}
				if(item.gradient){
					let gradient = item.gradient
					gradient.colorImg = setGradual(item.gradient,320,700)
					clothesItem.gradient = item.gradient
				}else{
					delete clothesItem.gradient
				}
				if(!item.id && sub){
					num = index
				}else{
					clothes.push(clothesItem)
				}
			});
			if(num != -1){
				designItemDetail.clothes.splice(num,1)
				this.store.commit("setDesignItemDetail", designItemDetail);
			}
			this.currentIndex = 0
			let workspace = this.store.state.Workspace.workspace
			let data = {
                designItemId:designItemDetail.designItemId,
				// designItemId:designItemDetail.designItemId,
				gender:workspace?.sex,
				designSingleItemDTOList:clothes,
				isPreview:false,
				sketchString:'',
				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
			}
			return data
		},
		async setSubmit(str:any){
			let setDesignItem:any = this.$refs.setDesignItem
			let data = this.setSubmitItem(str,true)
            this.loadingShow = true
			await setDesignItem.setPreview(data)
		},
		async submit(){
			let data = this.setSubmitItem('',true)
            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('submit')
					this.store.commit('setDesignCollectionList',designCollectionList)
					this.store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
					if(this.driver__.driver){
						nextTick().then(()=>{
							driverObj__.moveNext();
						})
					}
                }
            ).catch(res=>{
                this.loadingShow = false
            });
			
		},
		//按比设置单件衣服宽高位置
		async setPostition(url:any){
			let num:any
			await nextTick().then(async ()=>{
				let modal_body:any= document.getElementsByClassName('detail_modal_model')[0]
				let imgWidth:any
				await new Promise((resolve, reject) => {
					const img = new Image();
					img.onload = () => {
						imgWidth = img.width
						resolve(img)
						img.remove()
					};
					img.onerror = reject;
					img.src = url;
				});
				// await loadImage(url).then((img:any)=>{
				// 	console.log(2);
				// 	// modal_body = document.getElementsByClassName('detail_modal_model')[0]
				// 	if(modal_body == undefined){
				// 		this.setPostition(url)
				// 	}
				// 	console.log( modal_body?.offsetWidth,imgWidth, img.width);
				// 	return num
				// })
				num = modal_body?.offsetWidth / imgWidth;
			})
			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.setImgSize()
			}else if(this.designShowPrview == 2){
				let magnifyingGlass:any = this.$refs.magnifyingGlass
				// magnifyingGlass.showGlass = true
				magnifyingGlass.imageUrl = this.designItemDetailUrl
				
			}
			// this.others = designItemDetail.others

            // if(this.generateHighDesignImg){
            //     this.designShowPrview = 3
            // }else{
            //     this.designShowPrview = 2
            // }
        },
		deleteNav(num:number){
			if(num == 0){
				this.deleteShow = true
				this.designItemDetail.clothes.forEach((item:any)=>{
					item.clothesOpen = false
				})
				this.designOrder = false
				
			}else{
				this.deleteShow = false
				
				let data:any = this.setSubmitItem('preview',true)
				if(!this.deleteItemShow){
					return	
				}
				this.setDesignSingle(data)
			}
			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			DesignDetailAlter.changePlace()
			DesignDetailAlter.terminate()
		},
		setDesignSingle(data:any){
			this.loadingShow = true
			let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
			Https.axiosPost(Https.httpUrls.designSingle, data).then(
				(rv) => {
					// this.current.minIOPath = rv.clothes[this.currentIndex].minIOPath
					designItemDetail.clothes[this.currentIndex].minIOPath = rv.clothes[this.currentIndex].minIOPath
					this.current.path = rv.clothes[this.currentIndex].minIOPath
					designItemDetail.clothes[this.currentIndex].path = rv.clothes[this.currentIndex].path
					designItemDetail.clothes[this.currentIndex].layersObject = rv.clothes[this.currentIndex].layersObject
					designItemDetail.clothes[this.currentIndex].sketchString = ''
					data.designSingleItemDTOList[this.currentIndex].sketchString =''
					data.designSingleItemDTOList[this.currentIndex].path =rv.clothes[this.currentIndex].minIOPath
					designItemDetail.currentFullBodyView = rv.currentFullBodyView
					designItemDetail.ifSubmit = true
					this.loadingShow = false
					// if(this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1] && !this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1].id){
					// 	this.designItemDetail.clothes.split(this.designItemDetail.clothes.legnth-1,1)
					// }
					if(data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1] && !data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1].id){
						data.designSingleItemDTOList.split(data.designSingleItemDTOList.legnth-1,1)
					}
					this.store.commit("setDesignItemDetail", designItemDetail);
					this.store.commit("setDesignPreviewData", data);
					this.setRevocation(designItemDetail,data)
					this.deleteItemShow = false
				}
			).catch(res=>{
				this.loadingShow = false
			});
		},
		setDelete(num:number){
			this.designItemDetail.clothes.splice(num,1)
			this.deleteItemShow = true
		},
		//图片按下样子
		mousedownDesignImg(){
			this.imgDesignImg = false
		},
		//图片抬起样子
		mouseupDesignImg(){
			this.imgDesignImg = true
		},
		clothesOpen(index:any){
			if(this.deleteShow) return
			this.clothesDetail('',index)
			this.clothesOpenActive(index)
		},
		clothesOpenActive(index:any){
			this.designItemDetail.clothes.forEach((item:any)=>{
				item.clothesOpen = false
			})
			this.designItemDetail.clothes[index].clothesOpen = true
		},
		setClothesOpen(){
			if(this.deleteShow) return
			// if(this.designItemDetail?.clothes.length==0){
			// }else{
			// 	return
			// }
			this.designItemDetail.clothes.forEach((item:any)=>{
				item.clothesOpen = false
			})
			let color,gradient
			if(this.designItemDetail.clothes[0]){
				color = this.designItemDetail.clothes[0].color
				gradient = this.designItemDetail.clothes[0].gradient
			}else{
				color = {
					"id": '',
					"name": "Brilliant White New",
					"tcx": "11-1123",
					"r": 255,
					"g": 255,
					"b": 255,
					"h": 0,
					"s": 0,
					"v": 100
				}
			}
			let aa = {
				"id": '',
				"type": "",
				"level1Type": null,
				"path": "",
				"minIOPath": "",
				"color": color,
				gradient:gradient,
				priority:10,
				trims:{
					"ifSingle": null,
					"prints":null,
				},
				"printObject": {
					"prints": [
					]
				},
				undividedLayer:'',
				sketchString:'',
				"layersObject": [
					{
						maskMinioUrl:'',
						maskUrl:'',
					},{
						maskMinioUrl:'',
						maskUrl:'',
					},
				]
			}
			// this.designOrder = true
			// let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			// DesignDetailAlter.changePlace()
			this.designOrder = true
			if(this.designItemDetail.clothes?.[this.designItemDetail?.clothes.length-1]?.id || this.designItemDetail.clothes?.length == 0){
				this.designItemDetail.clothes.push(aa)
			}else{
				return
			}
			this.clothesDetail(aa,this.designItemDetail.clothes.length-1)
			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			DesignDetailAlter.init(1)
			// if(this.designItemDetail.clothes?.[this.designItemDetail.clothes.length-1]?.id){
			// 	// this.current = aa
			// 	// this.designOrder = true
			// 	// let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			// 	// DesignDetailAlter.changePlace()
			// }else{
			// 	this.designItemDetail.clothes.push(aa)
			// 	this.clothesDetail(aa,this.designItemDetail.clothes.length-1)
			// 	let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			// 	DesignDetailAlter.init(1)
			// }
			
		},
        //元素替换
        clothesDetail(clothes:any, index:number){
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			
			this.designOrder = true
			if(clothes){
				this.current = clothes
			}else{
				this.current = designItemDetail.clothes[index]
			}
			if(!this.current) return
			if(this.current?.id && !designItemDetail?.clothes[designItemDetail.clothes.length-1].id){
				designItemDetail.clothes.splice(designItemDetail.clothes.length-1,1)
				this.store.commit('setDesignItemDetail',designItemDetail)
			}
			let data:any = this.setSubmitItem('preview',false)
			this.currentIndex = index?index:0
			if(this.current?.printObject?.prints[0]?.minIOPath){
				this.current?.printObject?.prints.forEach((element:any) => {
					if(!element.designType){
						element.designType = 'Library'
					}
				});
			}
			this.current.sketchString = ''
			this.currentIndex = this.currentIndex>0?this.currentIndex:0
			data.designSingleItemDTOList[this.currentIndex] = {
				color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
				id:this.current.id?this.current.id:'',
				changed:this.current.changed?this.current.changed:false,
				designType:this.current.designType?this.current.designType:'Library',
				path:this.current.minIOPath?this.current.minIOPath:'',
				offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
				maskMinioUrl:this.current.layersObject[1].maskMinioUrl,
				maskUrl:this.current.layersObject[1].maskUrl,
				priority:this.current.priority,
				trims:this.current.trims,
				scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:[1,1],
				sketchString:'',
				printObject:{
					// 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:[]
				},
				undividedLayer:this.current.undividedLayer,
				type:this.current.type,
			}
			// if(clothes && !clothes.id){
			// 	data.designSingleItemDTOList.push(clothes)
			// }
			this.store.commit('setDesignPreviewData',data)
			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			DesignDetailAlter.changePlace()

			if(this.driver__.driver){
				nextTick().then(()=>{
					driverObj__.moveNext();
				})
			}
        },
		setSloganData(data:any){
			this.current.sketchString = data
			
			// let designData:any = this.setSubmitItem('preview',true)
			let designData = this.store.state.DesignDetailModule.designPreviewData
			designData.designSingleItemDTOList[this.currentIndex].sketchString = data
			this.setDesignSingle(designData)
		}
        //重新设计
        // 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.closefModal('')
        //             this.loadingShow = false
        //         }
        //     ).catch(res=>{
        //         this.loadingShow = false
        //     });
        // }
        
    }
})
</script>
<style lang="less">
.design_detail_modal_component{
    color: #000;
	// max-width: 1440px ;
	.mark_loading{
		position: absolute;
	}
	.ant-modal-content{
		border-radius: calc(1rem*1.2);
		// overflow: hidden; 
		.ant-modal-header{
			background-color: #fff;
			border-bottom: none;
		}
		.ant-modal-body{
			padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
			// height: calc(65vh - 6.4rem*1.2));
			height: calc(65rem*1.2);
			display: flex;
			overflow-y: hidden;
			flex-direction: column;
		}
	}
    .ant-modal-close{
        width: calc(3.6rem*1.2);
        height: calc(3.6rem*1.2);
        position: absolute;
        top: calc(-1.8rem*1.2);
        right: calc(-1.8rem*1.2);
    }

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


    

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

        &.turn_left_button{
            left: calc(-8rem*1.2);
        }

        &.turn_right_button{
            right: calc(-8rem*1.2);
        }

        .icon_turn{
            font-size: calc(2.4rem*1.2);
            color: #ffffff;
        }
    }

    

    .design_detail_modal_body{
		flex: 1;
        display: flex;
        justify-content: space-between;
        width: 100%;
		overflow: hidden;
        // padding: 1.5rem*1.2) 1rem*1.2) 2.5rem*1.2);
        box-sizing: border-box;
        .detail_modal_body_img{
			overflow: hidden;
            // width: 43.3rem*1.2);
			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_Set{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: calc(3.4rem*1.2);
				}
				.detail_modal_body_nav{
					display: flex;
					position: absolute;
					top: 0;
					left: 50%;
					z-index: 999;
					transform: translate(-50%,-120%);
					transition: all .3s;
					>div{
						width: calc(4rem*1.2);
						height: calc(4rem*1.2);
						cursor: pointer;
						text-align: center;
						margin-left: calc(.3rem*1.2);
						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-left: calc(0rem*1.2);
					}
				}
				.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;
					// display: block;
					overflow: initial !important;
					// width: 100%;
					text-align: center;
					.detail_modal_model{
						z-index: 1;
						position: relative;
						width: auto;
						max-height: 100%;
						max-width: 100%;
						object-fit: contain;
						top: 50%;
						transform: translateY(-50%);
					}
					&.active{
						width: 100%;
						max-height: 100%;
					}
					.detail_modal_item_front,.detail_modal_item_back{
						cursor: pointer;
						position: absolute;
						img{
							// width: 100%;
							max-height: 100%;
							
						}
						&.active{
							top: 50%;
							left: 50%;
							max-width: 100%;
							max-height: 100%;
							
							transform: translate(-50%,-50%);
							img{
								max-width: 100%;
								width: auto;
								margin: 0 auto;
								display: flex;
							}
						}
					}
					.detail_modal_item_back{
						z-index: 1 !important;
					}
					.detail_modal_item_front{
						z-index: 2;
					}
				}
				
			}
			.subitOkPreviewBtn{
				bottom: calc(2rem*1.2);
				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: calc(3rem*1.2);
						transform: translateX(-120%);
					}
					&.fi-rr-trash{
						left: 0;
						top: calc(6rem*1.2);
						transform: translateX(-120%);
					}
					&.fi-br-check{
						left: 0;
						top: calc(6rem*1.2);
						transform: translateX(-120%);
					}
					&.fi-rr-copy{
						top: 0;
						right: 0;
						transform: translateX(120%);
					}
					&.icon-fanchehui{
						top: calc(6rem*1.2);
						right: 0;
						transform: translateX(120%);
					}
					&.icon-chehui{
						top: calc(3rem*1.2);
						right: 0;
						transform: translateX(120%);
					}
				}
				i:hover{

				}
			}
			&.detail_modal_body_img:hover{
				.detail_modal_body{
					.detail_modal_body_nav{
						transform: translate(-50%,0%);
						>div{
							position: relative;
							.fi{
								color: #fff;
								width: 100%;
								height: 100%;
								background: #00000033;
								left: 0;
								top: 0;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}
				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;
				overflow: hidden;
				overflow-y: auto;
				.hideCursor{
					*{
						cursor: not-allowed !important;
					}
				}
				&.detail_modal_right_top::-webkit-scrollbar{display: none;}
                .clothes_detail_item{
					// margin-bottom: 5rem*1.2);
					position: relative;
					height: 20rem;
					// flex: 1;
					flex-shrink: 0;
					.centent_div{
						display: flex;
						cursor: pointer;
						justify-content: center;
					}
					.centent_print{
						flex-wrap: wrap;
						justify-content: space-between;
						align-content: space-between;
						max-height: 10rem;
						overflow-y: auto;
						&.centent_print::-webkit-scrollbar{display: none;}
						img{
							width: 30%;
							height: 30%;
							margin-bottom: 1rem;
						}
					}
					.centent{
						cursor: pointer;

						left: 50%;
						transform: translateX(-50%);
						position: relative;
						display: inline-block;
					}
					
                    .clothes_item_header{
                        // height: 6.4rem*1.2);
						margin-bottom: calc(1rem*1.2);
						display: flex;
                        font-size: var(--aida-fsize1-8);
                        color: #000000;
						justify-content: space-between;
						position: relative;
                        .icon-dangqianweizhi{
                            font-size: calc(1.8rem*1.2);
                            color: #000000;
                            margin-right: calc(1rem*1.2);
                        }
						.fi-rs-pencil-paintbrush{
							position: absolute;
							right: 0;
							top: 4rem;
							cursor: pointer;
						}
						i{
							font-size: var(--aida-fsize1-8);
							display: flex;
							align-items: center;
							&.fi-rr-edit{
								cursor: pointer;
							}
						}
                    }
					.clothes_item_icon{
						top: 50%;
						position: absolute;
						left: 50%;
						transform: translate(-50%,-50%);
					}
					img{
						width: calc(10rem*1.2);
						height: calc(10rem*1.2);
					}
					&.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: calc(8rem*1.2);
							height: calc(4rem*1.2);
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.color_content_body{
							.color_des{
								font-size: calc(1.2rem*1.2);
								font-weight: 600;
								white-space: nowrap;
								width: calc(8rem*1.2);
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
						&:nth-child(4n){
							margin-right: 0;
						}
					}
					&.clothes_detail_item_print,
					&.clothes_detail_item_apparel,
					&.clothes_detail_item_elements{
						.fi-rr-picture{
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 1.4*3rem;
							margin: calc(1rem*1.2) 0;
						}
					}
					&.subitOkPreviewBtn{
						position: relative;
						margin-top: calc(2rem*1.2);
					}
                }
            }
        }
		.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*1.2);
                height: calc(4rem*1.2);
                background: #fff;
                border-radius: calc(0.8rem*1.2);
                line-height: calc(4rem*1.2);
                font-size: var(--aida-fsize1-8);
                // margin-right: 2.2rem*1.2);
                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: calc(.4rem*1.2);
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: calc(.6rem*1.2);
                    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: calc(1.8rem*1.2);
                    margin-right: calc(0.8rem*1.2);
                }
            }
        }
		}
		
    }

    .design_detail_perview{
        width: 100%;
        height: 100%;
		flex: 1;
		overflow: hidden;
        &.design_detail_perview_second{
            width: 100%;
            height: 100%;
            padding: calc(0.7rem*1.2) calc(9.1rem*1.2) calc(0.6rem*1.2);
            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: calc(-20.2rem*1.2);
                padding: 0 calc(1.5rem*1.2);
                text-align: center;
                height: calc(3.6rem*1.2);
                line-height: calc(3.6rem*1.2);
                background: #343579;
                font-size: calc(1.4rem*1.2);
                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:calc(3.6rem*1.2);
                    height: calc(3.6rem*1.2);
                    background: rgba(0,0,0,0.6);
                    border-radius: 50%;
                    position: absolute;
                    right: calc(2.2rem*1.2);
                    text-align: center;
                    line-height: calc(3.6rem*1.2);
                    cursor: pointer;

                    &.delete_img_block{
                        top: calc(2rem*1.2);
                    }

                    .operate_icon{
                        font-size: calc(1.8rem*1.2);
                        color: #fff;
                    }
                }
            }
        }

        
    }

   
    
}
</style>
<style lang="less">
.design_detail_modal_component{
	
}
</style>