<template>
	<div class="patternMaking3D">
		<div class="selectModel">
			<div class="heard selectList">
				<div class="title" :class="{active:libraryOrModel == 'model'}" @click="setLibraryOrModel('model')">{{$t('patternMaking3D.Clothing')}}</div>
				<div class="title" :class="{active:libraryOrModel == 'print'}" @click="setLibraryOrModel('print')">{{$t('patternMaking3D.Print')}}</div>
				<div class="generalModel_state">
					<div class="generalModel_state_item smail">
						<a-select
							ref="select"
							v-model:value="sex"
							:options="sexList"
							size="large"
							:fieldNames="{ label: 'name', value: 'value' }"
							style="width:20rem"
							@change="sexChange"
						>
							<template #suffixIcon
								><span
									class="icon iconfont icon-xiala"
									style="color: #000"
								></span
							></template>
						</a-select>
					</div>
				</div>
			</div>
			<div class="list" v-show="libraryOrModel == 'model'" v-if="maskShow">
				<div v-for="item in modelList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setSelectModel(item)">
					<img :src="item.url" alt="">
				</div>
				<div v-show="!isNoData" class="material_content_list_loding">
					<span class="page_loading" v-show="!isShowLoading" v-observe></span>
					<span v-show="isShowLoading">
						<a-spin size="large" />
					</span>
				</div>
			</div>
			<div class="list printList" v-show="libraryOrModel == 'print'">
				<!-- <selectPrint ref="selectPrint" @setPrint="setPrint"></selectPrint> -->
				 <div v-for="item in allBoardData.printboardFiles" class="item" :class="{active:item.id == patternMaking3D.collectionElementId}" @click="setSelectPrint(item)">
					<img :src="item.imgUrl" alt="">
				</div>
				<div class="item add">
					<div class="icon" @click="openSetPrint">
						<i class="fi fi-br-plus"></i>
					</div>
				</div>
			</div>
		</div>
		<div class="model" v-show="selectModel.id != -1">
			<div class="heard">
				<div class="text">{{$t('patternMaking3D.TechnicalSketch')}}</div>
				<div class="switch" v-show="!imgOrThree">
					{{$t('patternMaking3D.front')}}
					<a-switch v-model:checked="isFront" />
					{{$t('patternMaking3D.back')}}
				</div>
			</div>
			<div class="modelBox">
				<div v-show="!imgOrThree" class="img">
					<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
					<img v-show="isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
				</div>
				<threeBox v-if="imgOrThree" @threeSaveProject="saveProject" ref="threeBox"></threeBox>
			</div>
			<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>			
			<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>			
		</div>
		<div class="flatPatterm" v-show="selectModel.id != -1">
			<div class="heard">{{$t('patternMaking3D.FlatPattern')}}</div>
			<div class="modelBox">
				<div class="img">
					<img :src="selectModel.threeDPatternLayoutUrl" alt="">
					<div class="btn">
						<i class="fi fi-bs-expand-arrows-alt" @click.stop="openScaleImage()"></i>
					</div>
				</div>
			</div>
			<div class="gallery_btn" @click="openDown()" v-if="userDetail.systemUser == 6 || userDetail.systemUser == 5">{{$t('DeReconstruction.Download')}}</div>	
		</div>
		<div class="download">
			<download ref="download"></download>
		</div>
		<collection ref="collection" :isNext="false"></collection>
		<scaleImage ref="scaleImage" :maxWidth="'100rem'"></scaleImage>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,nextTick,onMounted,toRefs, reactive, watch, onBeforeMount} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import threeBox from "./three.vue"
import download from "./download.vue"
import {getMinioUrl} from '@/tool/util'
import scaleImage from "@/component/HomePage/scaleImage.vue";
import collection from '@/component/home/design/collection.vue'
export default defineComponent({
	components:{
		threeBox,download,scaleImage,collection
	},
	props:{
	},
	emits:[],
	setup(props,{emit}) {
		const store = useStore();
		const data = reactive({
			selectModel:{
				id:-1,
			} as any,
			// printCatecoryList:computed(()=>{
			// 	return store.state.UserHabit.printType
			// }),
			userDetail:computed(()=>store.state.UserHabit.userDetail),//选择的项目
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			patternMaking3D:computed(()=>store.state.HomeStoreModule.patternMaking3D),//选择的项目
			modelList:[] as any,
			sex:'Female',
			allBoardData:computed(()=>store.state.UploadFilesModule.allBoardData),
			sexList:computed(()=>store.state.UserHabit.sex.value),
			isShowMark:false,
			isNoData:false,
			isShowLoading:false,
			currentPage:1,
			pageSize:10,
			imgOrThree:false,
			isFront:false,
			maskShow:false,
			libraryOrModel:'model'
		})
		watch(()=>data.patternMaking3D.threeDSimpleId,(newValue,oldValue)=>{
			if(newValue)openSetData()
		})
		const sexChange = ()=>{
			data.modelList = []
			data.currentPage = 0,
			data.isNoData = false
			data.isShowMark = false
		}
		const createProbject:any = inject('createProbject',()=>{}) as any
		const setSelectModel = async (item:any)=>{
			if(!data.selectObject?.id)await createProbject()
			data.isShowMark = true
			if(!item.threeDSimpleId)return
			const value = {
				threeDSimpleId:item.threeDSimpleId,
			}
			Https.axiosPost(Https.httpUrls.getLayoutDetail,{},{params:value}).then((res:any)=>{
				data.selectModel = res
				data.selectModel.id = item.id
				data.isShowMark = false
				data.imgOrThree = false
				// if(data.imgOrThree){
				// 	dataDom.threeBox.openSetData()
				// }
				let stateData = {
					threeDSimpleId:item.threeDSimpleId
				}
				store.commit('setPatternMaking3D',stateData)
				saveProject()
			}).catch((err:any)=>{
				data.isShowMark = false	
			})
		}
		const setSelectPrint = async (item:any)=>{
			if(!data.selectObject?.id)await createProbject()
			let patternMaking3DData = {
				collectionElementId:item.id,
				url:item.imgUrl,
				printMinioUrl:getMinioUrl(item.imgUrl),
			};
			store.commit('setPatternMaking3D',patternMaking3DData)
			if(!dataDom.threeBox)dataDom.threeBox.addMaterial({url:item.imgUrl})
			saveProject()
		}
		const dataDom = reactive({
			threeBox:null as any,
			download:null as any,
			scaleImage:null as any,
			collection:null as any,
		})
		const openSetData = ()=>{
			nextTick(()=>{
				let id = store.state.HomeStoreModule.patternMaking3D.threeDSimpleId
				if(id && data.selectModel.id == -1)setSelectModel({threeDSimpleId:id})
			})	
			setTimeout(()=>{
				data.maskShow = true	
			},500)
		}
		const getModelList = ()=>{
			if(data.isShowMark && !data.isNoData)return
            let value = {
                page: data.currentPage,
                size:data.pageSize,
				sex:data.sex,
            }
            data.isShowLoading = true
            Https.axiosPost(Https.httpUrls.threeDPage,value).then(
                (rv: any) => {
					if(rv.content.length == 0)data.isNoData = true
					data.modelList.push(...rv.content)
                    data.isShowLoading = false
                }
            ).catch((res)=>{
				data.isNoData = true
            });
		}
		const setImgOrThree = (boolean:boolean)=>{
			data.imgOrThree = boolean
			if(boolean){
				nextTick(()=>{
					dataDom.threeBox.openSetData(data.selectModel)
					// dataDom.threeBox.openSetData(data.selectModel.threeDPatternLayoutUrl)
				})
			}
		}
		const downList = ()=>{
			let value = {
				
			}
			Https.axiosGet(Https.httpUrls.threeDPage,value).then(
				
			)
		}
		const openDown = ()=>{
			dataDom.download.openDown(data.selectModel.id)
		}
		const setLibraryOrModel = (str:any)=>{
			// if(str == 'print' && data.selectModel.id == -1)return
			data.libraryOrModel = str
		}
		
		const openScaleImage = ()=>{
			let scaleImage:any = dataDom.scaleImage
			scaleImage.init([{imgUrl:data.selectModel.threeDPatternLayoutUrl}],0)
		}
		const setPrint = async (item:any)=>{
			if(dataDom.threeBox){
				if(!data.selectObject?.id)await createProbject()
				dataDom.threeBox.addMaterial(item)
				const stateData = {
					printMinioUrl:getMinioUrl(item.imgUrl || item.url)
				}
				store.commit('setPatternMaking3D',stateData)
				saveProject()
			}
			
		}
		let saveTime = null as any
		const saveProject = ()=>{
			clearTimeout(saveTime)
			saveTime = setTimeout(()=>{
				let value:any = {
					projectId:data.selectObject.id,
				}
				store.dispatch('setModularData',{type:'patternMaking3D'})
				const str = 'patternMaking3D'
				store.dispatch('getProjectData',str).then((data)=>{
					if(!data[str])return
					value[str] = data[str]
					Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
						if(rv?.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
					})
				})
			},2000)
		}
		onMounted(()=>{
		})
		const openSetPrint = ()=>{
			dataDom.collection.init('printBoard')
		}
		return{
			...toRefs(dataDom),
			...toRefs(data),
			sexChange,
			setSelectModel,
			setSelectPrint,
			openSetData,
			getModelList,
			setImgOrThree,
			openDown,
			setLibraryOrModel,
			openScaleImage,
			setPrint,
			openSetPrint,
			saveProject,
		}
	},
	directives:{
		observe:{
			mounted (el,binding) {
				// console.log(binding.instance);
				let this_:any = binding.instance
				this_.isShowMark = false
				this_.isNoData = false
				let parentDom = el.parentNode
				this_.getModelList()
				new IntersectionObserver(
				(entries, observer) => {
						// 如果不是相交，则直接返回
						// console.log(entries[0]);
						if (!entries[0].intersectionRatio) return;
						this_.currentPage += 1
						this_.getModelList()
					},
				).observe(el);
			},
		},
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.patternMaking3D{
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		display: flex;
		font-size: 1.4rem;
		> .selectModel,> .model,>.flatPatterm{
			padding: 3rem 2rem;
			display: flex;
			flex-direction: column;
			> .heard{
				font-size: 2rem;
				font-weight: 600;
				display: flex;
				justify-content: space-between;
				width: 100%;
				align-items: center;
				&.selectList{
					justify-content: flex-start;
					> .title{
						position: relative;
						margin-right: 2rem;
						cursor: pointer;
						// margin-bottom: 2rem;
					}
					> .generalModel_state{
						margin-left: auto;
					}
					> .title::before{
						position: absolute;
						content: "";
						display: block;
						background: #000;
						height: calc(.4rem*1.2);
						left: 50%;
						transform: translateX(-50%);
						bottom: -.5rem;
						width: 0px;
						transition: 0.3s all;
					}
					> .active {
						color: #000;
						font-weight: 600;
					}
					> .active::before {
						width: 100%;
					}
				}
				> .switch{
					font-weight: 400;
				}
			}
		}
		> .selectModel{
			width: 40%;
			// width: 70rem;
			flex-shrink: 0;
			height: 100%;
			background: #f7f8fa;
			border-radius: 3rem;
			> .list{
				flex: 1;
				display: flex;
			    flex-wrap: wrap;
				overflow-y: auto;
				align-content: flex-start;
				
				> .modelItem{
					width: calc(100% / 4 - 1rem);
					margin: .5rem;
					aspect-ratio: 1 / 1.2;	
					// height: 10rem;
					border-radius: 2rem;
					border: 2px solid #D4D4D4;
					cursor: pointer;
					> img{
						width: 100%;
						height: 100%;
						object-fit: contain;
						padding: 1rem;

					}
					&.active{
						border: 2px solid #000;
					}
				}
				&.printList{
					>.item{
						width: calc(100% / 4 - 1rem);
						margin:.5rem;
						aspect-ratio: 1 / 1;
						&.active{
							opacity: .7;
							transform: scale(.9);
							// border: 2px solid #000;
							// border-radius: 2rem;
							// overflow: hidden;
						}
						> img{
							width: 100%;
							height: 100%;
							object-fit: cover; 
							cursor: pointer;
						}
						&.add{
							display: flex;
							justify-content: center;
							align-items: center;
							>.icon{
								border: calc(0.3rem*1.2) solid #000;
								border-radius: calc(1rem*1.2);
								width: 6rem;
								height: 6rem;
								display: flex;
								justify-content: center;
								align-items: center;
								cursor: pointer;
								i{
									font-weight: 600;
									font-size: 2rem;
									display: flex;
								}
							}
						}
					}
				}
			}
		}
		> .model ,> .flatPatterm{
			flex: 1;
			overflow: hidden;
			align-items: center;
			> .modelBox{
				width: 100%;
				// height: 20rem;
				// height: 75rem;
				flex: 1;
				padding: 1rem 0;
				overflow: hidden;
				margin: auto;
				>.img{
					width: 100%;
					height: 100%;
					position: relative;
					> .btn{
						position: absolute;
						right: 2rem;
						top: 2rem;
						> i{
							cursor: pointer;
							font-size: 2rem;
						}
					}
					img{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
		}
		
		.material_content_list_loding{
			text-align: center;
			height: 50px;
			width: 100%;
			.page_loading{
				display: block;
				width: 50px;
				height: 50px;
				margin: 0 auto;
			}
		}
		.download{
			width: 0;
			height: 0;
		}
	}
</style>