<template>
	<div class="threeDownPage" ref="threeDownPage">
		<!-- height="65rem" -->
		<a-modal class="generalModel" 
            v-model:visible="threeDown" 
            :footer="null" 
            width="77rem"
			height="35rem"
            :maskClosable="false"
			:mask="true"
            :centered="true"
			:closable="false"
			:get-container="() => $refs.threeDownPage"
			wrapClassName="#app"
			:keyboard="false"
        >
			<div class="generalModel_btn">
				<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
					<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="black"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="black"/>
					</svg>
				</div>
			</div>
			<div style="display: flex; flex-direction: column; height: 100%;">
				<div class="modal_title_text" style="text-align: center;">
					<div>Please select the size of the clothing</div>
				</div>
				<div class="content">
					<div class="downItem" v-for="item,key in loadList">
						<div class="title">{{ key }}</div>
						<div class="keyList">
							<div class="item" :class="{active:(DSizeItem == select?.size && key == select?.sizeType)}" v-for="DSizeItem in item" @click="downloadIamge(DSizeItem,key)">
								{{ DSizeItem  }}
							</div>
						</div>
					</div>
				</div>
				<div style="width: 100%; display: flex; margin-top: auto;">
					<div class="gallery_btn" :class="{btnActive:!select.sizeType}" @click="setDown" style="width: 13rem; margin-left: auto;">Download</div>
				</div>
			</div>
			
			<div class="mark_loading" v-show="isShowMark">
				<a-spin size="large" />
			</div>
		</a-modal>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { getCookie } from "@/tool/cookie";
import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'

export default defineComponent({
	components:{
	},
	props:{
	},
	emits:['submitBrandAdd'],
	setup(props,{emit}) {
		const {t} = useI18n()
		const store = useStore();
		const data = reactive({
			threeDown:false,
			isShowMark:Object(''),
			loadList:{
				aa:[{a:1}],
				bb:[{a:1}],
				cc:[{a:1}]
			},
			select:{
				sizeType:'',
				size:'',
				threeDSimpleId:-1,
			},
		})
		const dataDom = reactive({
		})
		const cancelDsign = ()=>{
			data.threeDown = false;
			data.select.sizeType = ''
			data.select.size = ''
		}
		const getDowList = (id:any)=>{
			data.isShowMark = true
			let value = {
				threeDSimpleId:id,
				// threeDSimpleId:id,
			}
			Https.axiosPost(Https.httpUrls.getThreeDSize,{},{params:value}).then((res:any)=>{
				data.loadList = res.sizeTypeMap
				data.isShowMark = false
				data.select.threeDSimpleId = id
			}).catch((err:any)=>{
				data.isShowMark = false	
			})
		}
		const setDown = ()=>{
			data.isShowMark = true
			let value = {
				...data.select,
			}
			let config = {
				params:value
			}

			Https.axiosGet(Https.httpUrls.downloadZip,config).then((res:any)=>{
				let a = document.createElement('a');
				a.href = res;
				a.download = 'model.zip'; // 设置下载的文件名
				a.click(); // 触发下载
				URL.revokeObjectURL(a.href); // 释放 URL 对象

				data.isShowMark = false
			}).catch((err:any)=>{
				data.isShowMark = false	
			})
		}
		const openDown = (id:any)=>{
			data.threeDown = true;
			getDowList(id)
		}
		const downloadIamge = (DSizeItem:any,key:any)=>{
			data.select.sizeType = key
			data.select.size = DSizeItem
		}

		return{
			...toRefs(dataDom),
			...toRefs(data),
			cancelDsign,
			setDown,
			openDown,
			downloadIamge,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	:deep(.ant-modal-mask){
		background: rgba(0,0,0,0.3);
	}
	.threeDownPage{
		width: 100%;
		height: 100%;
		position: relative;
		:deep(.generalModel){
			.gallery_btn{
				&.btnActive{
					pointer-events: none;
					background: rgba(0, 0, 0, .4);
					border: none;
				}
			}
			.content{
				display: flex;
				flex-direction: column;
				flex: 1;
				padding-left: 6rem;
				// width: 55rem;
				// margin: 0 auto;
				
				> .downItem{
					display: flex;
					font-size: 2rem;
					font-weight: 600;
					margin-bottom: 1rem;
					text-align: center;
					align-items:center;
					> .title{
						margin-right: 1.5rem;
						width: 3.5rem;
						text-align: right;
						white-space: nowrap;
					}
					> .keyList{
						display: flex;
						flex-wrap: wrap;
						> .item{
							font-weight: 300;
							width: 5.5rem;
							height: 5.5rem;
							border: 1px solid #000;
							display: flex;
							align-items: center;
							justify-content: center;
							transition: all .3s;
							&.active{
								background: #000;
								color: #fff;
							}
							&:hover{
								background: #000;
								color: #fff;
							}
						}
					}
				}
			}
		}
	}
</style>