<template>
	<div class="collectionModal" ref="collectionModal"></div>
	<a-modal
		class="collection generalModel"
		v-model:visible="habitSetStyle"
		:footer="null"
		width="75%"
		:get-container="() => $refs.collectionModal"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		:mask="true"
		:keyboard="false"
		:destroyOnClose="false"
		:zIndex="1000"
	>
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cleardata()">
				<svg width="100%" height="100%" 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="white"/>
					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
				</svg>
			</div>
		</div>
		<div class="collection_title">
			<div class="collection_title_text">
				<div v-show="collectionStep === 1">{{ $t('collectionModal.Moodboard') }}</div>
				<div v-show="collectionStep === 2">{{ $t('collectionModal.Printboard') }}</div>
				<div v-show="collectionStep === 3">{{ $t('collectionModal.Colorboard') }}</div>
				<div v-show="collectionStep === 4">{{ $t('collectionModal.Mannquinboard') }}</div>
				<div v-show="collectionStep === 5">{{ $t('collectionModal.Sketchboard') }}</div>
				<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
				<!-- <div  class="collection_title_text_intro" v-show="collectionStep === 1">{{ $t('collectionModal.MoodCollection') }}</div>
				<div  class="collection_title_text_intro" v-show="collectionStep === 2">{{ $t('collectionModal.PrinCollection') }}</div>
				<div  class="collection_title_text_intro" v-show="collectionStep === 3">{{ $t('collectionModal.ColorCollection') }}</div>
				<div  class="collection_title_text_intro" v-show="collectionStep === 4">{{ $t('collectionModal.SketchCollection') }}</div>
				<div  class="collection_title_text_intro" v-show="collectionStep === 4">{{ $t('collectionModal.SketchCollection') }}</div> -->
			</div>
		</div>
		<div class="designOpenrtion_content">
			<!-- <div class="modal_title_text">
				<div>Setting</div>
			</div> -->
			<div class="collectionBox">
				<MoodboardUpload ref="moodBoard" v-show="openType == 'moodBoard' || collectionStep == 1"></MoodboardUpload>
                <PrintboardUpload ref="printBoard" v-show="openType == 'printBoard' || collectionStep == 2"></PrintboardUpload>
                <ColorboardUpload ref="colorBoard" v-show="openType == 'colorBoard' || collectionStep == 3" :collectionStep="collectionStep"></ColorboardUpload>
                <mannequin ref="mannequin" v-show="openType == 'mannequin' || collectionStep == 4"></mannequin>
                <SketchboardUpload ref="sketchBoard" v-show="openType == 'sketchBoard' || collectionStep == 5"></SketchboardUpload>
			</div>
			<div class="collection_page" v-show="isNext">
				<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
				<i v-if="collectionStep < (selectObject.type == 'singleProductDesign'?4:5)" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
				<i v-else class="fi fi-rr-check Guide_1_14" @click.stop="cleardata()"></i>

			</div>
		</div>
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>
	</a-modal>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,inject,toRefs, reactive, 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 { rgbToHsv, setGradual } from "@/tool/util";
import { init } from 'echarts/core';
import MoodboardUpload from './collection/MoodboardUpload.vue';
import PrintboardUpload from './collection/PrintboardUpload.vue';
import ColorboardUpload from './collection/ColorboardUpload.vue';
import SketchboardUpload from './collection/SketchboardUpload.vue';
import mannequin from './mannequin/index.vue';

export default defineComponent({
	components:{
		MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,
	},
	props:{
		isNext:{
			type:Boolean,
			default:true,
		},
	},
	emits:['getHistory'],
	setup(props,{emit}) {
		const store = useStore();
		const data = reactive({
			habitSetStyle:false,
			isShowMark:false,
			openType:'',
			collectionStep:1,
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			createProbject:inject('createProbject',()=>{}) as any

		})
		let driver__:any = computed(()=>{
			return store.state.Guide.guide
		}) 
		provide('driver__',driver__) 
		const dataDom = reactive({
			moodBoard:null as any,
			printBoard:null as any,
			colorBoard:null as any,
			mannequin:null as any,
			sketchBoard:null as any,
		}) as any
		const init = (value:any)=>{
			data.habitSetStyle = true
			data.openType = value
			const keys = Object.keys(dataDom);
			data.collectionStep = keys.indexOf(value) + 1; // 1
			nextTick(()=>{
				dataDom[value].openSetData()
			})
		}
		let cleardata = async ()=>{
			data.habitSetStyle = false
			if(data.collectionStep == 3)await getPantongName()
			data.collectionStep = 1
			if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
			saveProject(data.openType)
		}
		const saveProject = async (str:any)=>{
			if(str == 'design')return
			if(!data.selectObject.id && data.createProbject)await data.createProbject()
			let value:any = {
				projectId:data.selectObject.id,
			}
			console.log(str)
			store.dispatch('getProjectData',str).then((data)=>{
				if(!data[str])return
				value[str] = data[str]
				// if(!value[str] || value[str]?.length == 0)return
				Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
					if(str == 'sketchBoard')store.commit('setShowSketchboard',rv.boundingBox)
				})
			})
		}
		let getPantongName = async ()=>{
			let colorBoards = store.state.UploadFilesModule.colorBoards;
			if(!colorBoards || colorBoards?.length == 0) return
			data.isShowMark = true
			let value: any = [];
			for (let v of colorBoards) {
				
			}
			for (let index = 0; index < colorBoards.length; index++) {
				// if(colorBoards[index].gradient){
				// 	colorBoards[index].gradient.colorImg = await setGradual(colorBoards[index].gradient,320,700)
				// }
				let color: any = [colorBoards[index].rgbValue.r, colorBoards[index].rgbValue.g, colorBoards[index].rgbValue.b];
				let hsv = rgbToHsv(color);
				colorBoards[index].hsv = hsv[0] + hsv[1] + hsv[2];
				value.push({
					h: hsv[0],
					s: hsv[1],
					v: hsv[2],
				});
			}
			return new Promise((resolve: any, reject: any) => {
				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, value)
					.then((rv: any) => {
						if (rv) {
							rv.forEach((ele: any, index: number) => {
								colorBoards[index].id = ele.id;
								colorBoards[index].tcx = ele.tcx;
								colorBoards[index].name = ele.name;
							});
							store.commit("setColorboardList", colorBoards);
							resolve();
						}
						data.isShowMark = false
					})
					.catch((res) => {
						reject();
						data.isShowMark = false
					});
			});
		}
		let lastStep = async ()=>{
			if(data.collectionStep == 3)await getPantongName()
			data.collectionStep = data.collectionStep - 1
			if(data.selectObject.type == 'singleProductDesign' && data.collectionStep == 4){
				data.collectionStep = data.collectionStep - 1
			}
			setOpenSetData()
		}
		let nextStep = async ()=>{
			if(data.collectionStep == 3)await getPantongName()
			data.collectionStep = data.collectionStep + 1
			if(data.selectObject.type == 'singleProductDesign' && data.collectionStep == 4){
				data.collectionStep = data.collectionStep + 1
			}
			setOpenSetData()
		}
		const setOpenSetData = ()=>{
			if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
			saveProject(data.openType)
		
			const keys = Object.keys(dataDom); 
			const key = keys[data.collectionStep - 1];
			data.openType = key
			nextTick(()=>{
				dataDom[key].openSetData()
			})
		}
		return{
			...toRefs(dataDom),
			...toRefs(data),
			cleardata,
			init,
			lastStep,
			nextStep,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.collectionModal{
		:deep(.collection){
			> .ant-modal-content{
				.ant-modal-body{
					padding-top: 10rem;
				}
			}
		}
		
		
		.collection_title{
			top: calc(4rem*1.2);
			display: flex;
			font-size: var(--aida-fsize2);
			font-weight: 900;
			color: rgba(0,0,0,.65);
			z-index: 999;
			align-items: center;
			width: calc(35rem*1.2);
			justify-content: space-between;
			.collection_progress{
				width: calc(8rem*1.2);
				height: calc(8rem*1.2);
				>div{
					width: 100% !important;
					height: 100% !important;
					:deep(.ant-progress-inner){
						width: 100% !important;
						height: 100% !important;
					}
				}
			}
			.collection_title_text{
				// margin-right: calc(4rem*1.2);
			}
			.collection_title_text_intro{
				font-size: var(--aida-fsize1-4);
				font-weight: 400;
				color: rgba(0,0,0,.45);
			}
			
		}
		:deep(.designOpenrtion_content){
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			position: relative;
			> .collection_page{
				left: 50%;
				transform: translateX(-50%);
				bottom: -4rem;
				display: flex;
				position: absolute;
				.fi-rr-arrow-small-left{
					margin-right: calc(10rem*1.2);
				}
				.fi{
					cursor: pointer;
					display: flex;
					height: 100%;
					font-size: 1.8rem;
				}
				.fi::before{
					padding: 5px;
					border-radius: 50%;
					color: rgba(0, 0, 0, 0.55);
					border: solid 2px rgba(0, 0, 0, 0.25);
					transition: 1s all;
				}
				.fi:hover.fi::before{
					border: solid 2px rgba(0, 0, 0, 0.55);
					color: rgba(0, 0, 0, 1);
				}
			}
			.collectionBox{
				width: 100%;
				height: 100%;
				display: flex;
				.collection_modal_item{
					overflow: hidden;
				}
			}
		}
	}
</style>