<template>
	<div class="patternMaking3D">
		<div class="selectModel">
			<div class="heard">Clothing</div>
			<div class="list" 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>
		<div class="model" v-show="selectModel.id != -1">
			<div class="heard">
				<div class="text">Technical sketch</div>
				<div class="switch">
					front
					<a-switch v-model:checked="isFront" />
					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" 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">Flat pattern</div>
			<div class="modelBox">
				<div class="img">
					<img :src="selectModel.threeDPatternLayoutUrl" alt="">
				</div>
			</div>
			<div class="gallery_btn" @click="openDown()">Download</div>	
		</div>
		<div class="download">
			<download ref="download"></download>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} 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"
export default defineComponent({
	components:{
		threeBox,download
	},
	props:{
	},
	emits:[],
	setup(props,{emit}) {
		const store = useStore();
		const data = reactive({
			selectModel:{
				id:-1,
			} as any,
			modelList:[] as any,
			isShowMark:false,
			isNoData:false,
			isShowLoading:false,
			currentPage:1,
			pageSize:10,
			imgOrThree:false,
			isFront:false,
			maskShow:false,
		})
		const setSelectModel = (item:any)=>{
			data.isShowMark = true
			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()
				// }
				store.commit('setPatternMaking3D',item.id)
			}).catch((err:any)=>{
				data.isShowMark = false	
			})
		}
		const dataDom = reactive({
			threeBox:null as any,
			download:null as any,
		})
		const openSetData = ()=>{
			nextTick(()=>{
				let id =  store.state.HomeStoreModule.patternMaking3D
				if(id && data.selectModel.id == -1)setSelectModel({id})
			})	
			setTimeout(()=>{
				data.maskShow = true	
			},500)
		}
		const getModelList = ()=>{
			if(data.isShowMark && !data.isNoData)return
            let value = {
                page: data.currentPage,
                size:data.pageSize,
				
            }
            data.isShowLoading = true
            Https.axiosPost(Https.httpUrls.threeDPage,value).then(
                (rv: any) => {
					if(rv.content.length == 0)data.isNoData = true
                    data.isShowLoading = false
					data.modelList.push(...rv.content)
                }
            ).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)
		}
		return{
			...toRefs(dataDom),
			...toRefs(data),
			setSelectModel,
			openSetData,
			getModelList,
			setImgOrThree,
			openDown,
		}
	},
	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%;
				> .switch{
					font-weight: 400;
				}
			}
		}
		> .selectModel{
			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: cover;
					}
					&.active{
						border: 2px solid #000;
					}
				}
			}
		}
		> .model ,> .flatPatterm{
			flex: 1;
			overflow: hidden;
			align-items: center;
			> .modelBox{
				width: 100%;
				// height: 20rem;
				// height: 75rem;
				flex: 1;
				overflow: hidden;
				margin: auto;
				>.img{
					width: 100%;
					height: 100%;
					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>