<template>
    <div ref="designDetailModal" class="designDetailModal" v-if="designDetailShow">
		<!-- designDetailShow -->
		<!-- :class="[driver__.driver?'hideEvents':'']" -->
        <a-modal class="Guide_1_18 generalModel fullScreen" 
            v-model:visible="designDetailShow" 
            :footer="null" 
			:get-container="() => $refs.designDetailModal"
            width="100%"
			height="100%"
            :maskClosable="false"
			:mask="false"
            :centered="true"
			:keyboard="false"
			:destroyOnClose="true"
			:closable="false"
        >
			<div class="content">
				<div class="nav" :class="{isEditPattern:isEditPattern.value}">
					<div class="back_home">
						<div class="gallery_btn" @click="closeModal()">
							<i class="fi fi-rs-house-chimney"></i>
						</div>
					</div>
					<div class="nav_list">
						<div class="nav_item" :class="{active:currentDetailType == 'sketch'}" @click="setCurrentDetail('sketch')">
							<img src="@/assets/images/icon/details_sketch.png" alt="">
							<div class="detailText">Apparel</div>
						</div>
						<div class="nav_item" :class="{active:currentDetailType == 'print'}" @click="setCurrentDetail('print')">
							<img src="@/assets/images/icon/details_print.png" alt="">
							<div class="detailText">Print</div>
						</div>
						<div class="nav_item" :class="{active:currentDetailType == 'color'}" @click="setCurrentDetail('color')">
							<img src="@/assets/images/icon/details_color.png" alt="">
							<div class="detailText">Color</div>
						</div>
						<div class="nav_item" :class="{active:currentDetailType == 'element'}" @click="setCurrentDetail('element')">
							<img src="@/assets/images/icon/details_elements.png" alt="">
							<div class="detailText">Elements</div>
						</div>
					</div>
				</div>
				<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
					<detailLeft v-if="currentDetailType"></detailLeft>
					<!-- <detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft> -->
				</div>

				<div class="item model">
					<model 
						ref="model" 
						@canvasReload="canvasReload" 
						@detailEdit="detailEdit" 
						@addSketch="()=>isEditPattern.value=false"
						@revocation="revocation"
						@oppositeRevocation="oppositeRevocation"
					></model>
					<div class="btn">
						<div class="gallery_btn" @click="submit">Submit</div>
						<div class="gallery_btn" @click="previwe">Preview</div>
					</div>
				</div>
				<div class="item detailRight">
					<div class="submit">
					</div>
					<div class="contentRight" v-if="currentDetailType && !isEditPattern.value">
						<detailRight ref="detailRight"></detailRight>
					</div>
					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
						<canvasBox ref="canvasBox" :key="childKey"></canvasBox>
					</div>
					<!-- 画布 -->
					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
					</div> -->
					<div class="submit bottom">
					</div>
				</div>
			</div>
			
        </a-modal>
         <div class="mark_loading" v-show="loadingShow">
            <a-spin size="large" />
        </div>
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import detailLeft from './detailLeft/index.vue'
import model from './model/index.vue'
import detailRight from './detailRight/index.vue'
import canvasBox from './canvas/index.vue'

// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
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 { useI18n } from 'vue-i18n'
import addDetails from '@/component/Detail/addDetails.vue'
export default defineComponent({
    components:{
		detailLeft,model,detailRight,canvasBox
    },
	emits:['destroy'],
    setup(props,{emit}) {
        const store = useStore();
      
		const detailDom = reactive({
			model:null,
			canvasBox,
			detailRight,
		})
		const userDetail = computed(()=>{
			return store.state.UserHabit.userDetail
		})
		const detailData = reactive({
			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
			designDetailShow:false,
			loadingShow:false,
			oppositeRevocationShow:-1,
			revocationShow:-1,
			isEditPattern:{
				value:false,
			},// 是否编辑图案
			childKey:0,
			singleOveral:{
				value:'overall'
			},
			getCanvasIfEdit:{
				fun:null,
			},
		})
		provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
		provide('singleOveral',detailData.singleOveral)
		provide('isEditPattern',detailData.isEditPattern)
		const closeModal = ()=>{
			sessionStorage.removeItem('oppositeRevocation')
			sessionStorage.removeItem('revocation')
			detailData.designDetailShow = false
			emit('destroy')
		}
		
		const showDesignDetailModal = (data:any,str:any)=>{
            // let url = Https.httpUrls.getDesignDetail + `?designItemId=${77770}&designPythonOutfitId=${77423}`
            let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
            detailData.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.color){
							item.color.rgba = {
								r:item.color.r,
								g:item.color.g,
								b:item.color.b,
							}
						}else{
							item.color = {
								rgba:{
									r:255,
									g:255,
									b:255,
								}
							}
						}
						if(item.gradient){
							item.color.gradient = item.gradient
						}
						if(item.printObject.prints == null)item.printObject.prints = []
						item.printObject.prints.forEach((element:any) => {
							if(!element.designType){
								element.designType = 'Library'
							}
						});
					})
					detailData.singleOveral.value = rv.singleOverall
					detailData.designDetailShow = true
                    store.commit('DesignDetailCopy/setDesignDetail',rv)
					// this.deleteShow = false

					setRevocation()
                    detailData.loadingShow = false

					store.commit('DesignDetailCopy/setDesignColthes',rv.clothes[0].id)
                }
				
            ).catch(rv=>{
                detailData.loadingShow = false
            })
		}
		const initialize = ()=>{//design后初始化

			
			sessionStorage.removeItem('oppositeRevocation')
			sessionStorage.removeItem('revocation')
		}
		//撤回
		const setRevocation = ()=>{//设置撤销
			let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
			let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
			// let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
			if(revocation?.[0]?.designItemId != itemDetail.designItemId || revocation?.[0]?.designItemId == undefined){
				// sessionStorage.setItem('revocation', JSON.stringify([]));
				// sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
				revocation = []
			}
			revocation.push(itemDetail)
			detailData.revocationShow = revocation?.length
			detailData.oppositeRevocationShow = 0
			sessionStorage.setItem('revocation', JSON.stringify(revocation));
			sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
		}
		provide('setRevocation',setRevocation)

		const revocation = ()=>{//撤回
			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
			if(detailData.revocationShow <= 1)return
			oppositeRevocation.push(revocation[revocation.length-1])
			detailData.oppositeRevocationShow = oppositeRevocation.length
			revocation.splice(revocation.length-1,1)
			detailData.revocationShow = revocation.length
			store.commit("DesignDetailCopy/setDesignDetail", revocation[revocation.length-1]);
			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
			sessionStorage.setItem('revocation', JSON.stringify(revocation));
			// clearSelect()
		}
		const oppositeRevocation = ()=>{//反撤回
			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
			if(!oppositeRevocation[oppositeRevocation.length-1])return
			store.commit("DesignDetailCopy/setDesignDetail", oppositeRevocation[oppositeRevocation.length-1]);
			revocation.push(oppositeRevocation[oppositeRevocation.length-1])
			detailData.revocationShow = revocation.length
			oppositeRevocation.splice(oppositeRevocation.length-1,1)
			detailData.oppositeRevocationShow = oppositeRevocation.length
			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
			sessionStorage.setItem('revocation', JSON.stringify(revocation));
			// this.clearSelect()
		}
		const setCurrentDetail = (str:string)=>{
			store.commit('DesignDetailCopy/setCurrentDetailType',str)
		}
		const setClothes = async (list:any)=>{
			let clothesList:any = []
			for(let i = 0;i<list.length;i++){
				detailData.selectDetail
			    let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
				if(detailDom.canvasBox?.privewDetail)await (detailDom.canvasBox as any).privewDetail()
				if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
				let gradient = null
				let newData = list[i]?.newDetail?.[detailData.currentDetailType]
				let isCurrent = list[i].id == detailData?.selectDetail?.id
				
				let data:any = {
					changed:false,
					color:(newData && detailData.currentDetailType == 'color' && isCurrent)?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`,
					designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.designType:list[i].designType,
					id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
					// maskMinioUrl:'',
					// maskUrl:'',
					maskUrl:list[i].maskUrl,
					offset,
					partialDesign:list[i].partialDesign,
					path:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.minIOPath:list[i].minIOPath,
					printObject:(newData && detailData.currentDetailType == 'print' && isCurrent)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
					priority,
					scale,
					type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type:list[i].type,
					sketchString:'',
					trims:(newData && detailData.currentDetailType == 'element' && isCurrent)?{prints:newData}:list[i].trims?list[i].trims:{prints:[]},
				}
				if((list[i].color?.gradient || list[i].newDetail?.color?.gradient)){
					gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
					gradient.colorImg = await setGradual(gradient,320,700)
					data.gradient = gradient
				}
				clothesList.push(data)
			}
			return clothesList
		}
		const getSubmitData = async (str:string)=>{
			let workspace = store.state.Workspace.probjects
			if(!detailData.selectDetail.path && !detailData.selectDetail.newDetail?.sketch?.minIOPath)return
			let clothes:any = await setClothes([detailData.selectDetail])
			let data = {
				designItemId:detailData.designDetail.designItemId,
				designSingleItemDTOList:clothes,
				isPreview:true,
				// ifSubmit:designItemDetail.isPreview,
				gender:workspace?.sex == 'Male'?1:0,
				sketchString:'',
				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
				processId:userDetail.value.userId,
			}
			detailData.loadingShow = true
			Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
				let value = {
					currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)),
					rv:rv
				}
				store.commit('DesignDetailCopy/setPraeview',value)
				detailData.loadingShow = false
			}).catch(res=>{ 
				detailData.loadingShow = false
            });
		}
		const submit = async ()=>{
			let workspace = store.state.Workspace.probjects
			let clothes:any = await setClothes(detailData.designDetail.clothes)
			let data = {
				designItemId:detailData.designDetail.designItemId,
				designSingleItemDTOList:clothes,
				isPreview:false,
				// ifSubmit:designItemDetail.isPreview,
				gender:workspace?.sex == 'Male'?1:0,
				sketchString:'',
				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
				processId:userDetail.value.userId,
			}
			detailData.loadingShow = true
			Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
				// store.commit('DesignDetailCopy/setPraeview',rv)
				let designCollectionList = store.state.HomeStoreModule.designCollectionList
				let likeDesignCollectionList = 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
					}
				});
				store.commit('setDesignCollectionList',designCollectionList)
				store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
				closeModal()
				detailData.loadingShow = false
			}).catch(res=>{ 
				detailData.loadingShow = false
            });
		}
		const previwe = ()=>{
			let data = getSubmitData('preview')
			store.dispatch('DesignDetailCopy/setSubmit',data)
		}
		const detailEdit = (str:any)=>{
			if(str == 'edit'){
				detailData.isEditPattern.value = !detailData.isEditPattern.value 
			}
		}
		const canvasReload = ()=>{
			detailData.childKey += 1
		}
		onBeforeUnmount(()=>{
			sessionStorage.removeItem('oppositeRevocation')
			sessionStorage.removeItem('revocation')
			store.commit('DesignDetailCopy/clearDesignDetail')
		})
        return{
			...toRefs(detailDom),
			...toRefs(detailData),
            closeModal,
			showDesignDetailModal,
			setCurrentDetail,
			previwe,
			submit,
			revocation,
			oppositeRevocation,
			detailEdit,
			canvasReload,
        }
    },
	provide() {
		return {
		}
	},
	mounted(){
		let beforeunload =  () => {
			window.removeEventListener('beforeunload',beforeunload)
		}
		window.addEventListener('beforeunload',beforeunload)
		// 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
        //     })
	},
		
})
</script>
<style lang="less" scoped>
	:deep(.detailText){
		font-size: 1.8rem;
		font-weight: 600;
		
	}
    .designDetailModal{
		position: absolute;
		// top: -100%;
		width: 100%;
		height: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 2;
		:deep(>div){
			> .ant-modal-root{
				> .ant-modal-centered{
					> .fullScreen{
						> .ant-modal-content{
							> .ant-modal-body{
								padding: 0;
							}
						}
					}
				}
			}
			:deep(.ant-modal-wrap){
				.ant-modal-body{
					// padding: 0;
				}
				// position: absolute;
				// top: 0;
				// left: 0;
			}
		}
		.content{
			display: flex;
			align-items: flex-start;
			height: 100%;
			width: 100%;
			> .item{
				height: 100%;
				overflow: hidden;
				&.detailLeft{
					width: 34rem;
				}
				&.isEditPattern{width: 0px;}
				&.model{
					width: 50rem;
					margin: 0 10rem;
					display: flex;
					flex-direction: column;
				}
				&.detailRight{
					flex: 1;
					display: flex;
					flex-direction: column;
					padding-bottom: calc(6rem + 1rem);
					overflow: hidden;
					> .contentRight{
						display: flex;
						flex: 1;
						overflow: hidden;
					}
				}
				> .submit{
					display: flex;
					justify-content: flex-end;
					margin-bottom: 1rem;
					&.bottom{
						margin-top: 1rem;
						margin-bottom: 0;
					}
				}
				> .btn{
					display: flex;
					justify-content: center;
					margin-left: 12rem;
					> div{
						margin-right: 2rem;
					}
					> div:last-child{
						margin-right: 0rem;
					}
				}
			}
			> .nav{
				margin-right: 5rem;
				overflow: hidden;
				// transition: all .3s;
				&.isEditPattern{width: 0px;margin: 0;}
				> .back_home{
					width: 9rem;
					text-align: center;
					> .gallery_btn{
						width: 6rem;
						height: 6rem;
						border-radius: 50%;
					}
				}
				> .nav_list{
					margin-top: 2.7rem;
					height: 38rem;
					width: 9rem;
					background: #f4f4f4;
					border-radius: 1.4rem;
					padding: 1.4rem 0;
					> .nav_item{
						text-align: center;
						width: 100%;
						height: calc((38rem - 1.4rem * 2) / 4);
						cursor: pointer;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
						> img{
							width: 4rem;
							height: 3.6rem;
							object-fit: contain;
						}
						&.active{
							background: #bdbdbd;
						}
					}
				}
			}
			
		}
		
	}
</style>