<template>
    <div v-if="showCollectionModal">
		<div ref="collection_modal"></div>
         <a-modal class="modal_component collection_modal generalModel Guide_1_2" 
            v-model:visible="showCollectionModal" 
            :footer="null" 
            width="78%"
            :maskClosable="false"
            :centered="true"
			:closable="false"
			:get-container="() => $refs.collection_modal"
			wrapClassName="#app"
			:keyboard="false"
        >
            <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.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>
				<div class="collection_progress">
					<a-progress :strokeWidth= 13 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
				</div>
         
            </div>
			<div class="generalModel_btn" :class="[driver__.driver?'hideEvents':'']">
				<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
					<!-- <i class="fi fi-rr-cross-small"></i> -->
					<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="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_page" :class="[driver__.driver?'hideEvents':'']">
				<!-- <div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> -->
				<!-- <div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div> -->
				<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
				<i v-if="collectionStep < 4" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
				<!-- <i v-else  class="fi fi-rr-arrow-small-right" @click.stop="finishCollection()"></i> -->
				<i v-else class="fi fi-rr-check Guide_1_14" @click.stop="finishCollection()"></i>
				<!-- <span  class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span> -->

			</div>
            <div class="collection_modal_body">
                <MoodboardUpload ref="MoodboardUpload" v-show="collectionStep === 1"></MoodboardUpload>
                <PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
                <ColorboardUpload ref="ColorboardUpload" :collectionStep="collectionStep" v-show="collectionStep === 3"></ColorboardUpload>
                <SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload>
                <!-- <MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload> -->
            </div>
			<div class="mark_loading" v-show="isShowMark">
				<a-spin size="large" />
			</div>
        </a-modal>
    </div>
</template>
<script lang="ts">
import { defineComponent ,createVNode, ref,onUnmounted , computed,provide } from 'vue'

import Generate from '@/component/HomePage/Generate.vue'
import MoodboardUpload from '@/component/HomePage/MoodboardUpload.vue'
import PrintboardUpload from '@/component/HomePage/PrintboardUpload.vue'
import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue'
import SketchboardUpload from '@/component/HomePage/SketchboardUpload.vue'
import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https";
import {useStore} from 'vuex'
import { openGuide,driverObj__ } from "@/tool/guide";
import GO from "@/tool/GO";
import {setGradual} from '@/tool/util'
import { useI18n } from 'vue-i18n'
// import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
export default defineComponent({
    components:{
        Generate,
        MoodboardUpload,
        PrintboardUpload,
        ColorboardUpload,
        SketchboardUpload,
        MarketingSketchUpload
    },
	props:{
		getDesignData: {
			type: Function,
			required: true
		}
	},
	setup(props){
		const store = useStore()
		let {t} = useI18n()
		let driver__:any = computed(()=>{
			return store.state.Guide.guide
		})
		let workspace:any = computed(()=>{
			return store.state.Workspace.workspace
		})
		let position:any = computed(()=>{
			return store.state.Workspace.workspacePosition
		})
		let showCollectionModal:any=ref(false)
		let collectionStep=ref(1)
		provide('driver__',driver__)
		let isShowMark = ref(false)
		let styleRecommend = ref([])
		provide('styleRecommend',styleRecommend)
		onUnmounted(()=>{
			let data = {
				showCollectionModal:showCollectionModal.value,
				collectionStep:collectionStep.value
			}
			sessionStorage.setItem('collectionData', JSON.stringify(data));
		})
		return {
			driver__,
			workspace,
			t,
			isShowMark,
			position,
			showCollectionModal,
			collectionStep,
			styleRecommend,
		}
		
	},
	// activated () {
	// 	let data:any = JSON.parse((sessionStorage.getItem('collectionData') as any));
	// 	if(!data){
	// 		return
	// 	}
	// 	this.showCollectionModal = data.showCollectionModal
	// 	this.collectionStep = data.collectionStep
	// },
    data(){
        return{
            
            store:useStore()
        }
    },
    methods:{
        nextStep(){
			let colorBoards = this.store.state.UploadFilesModule.colorBoards
			if(this.collectionStep == 1){
				let disposeMoodboard = this.store.state.UploadFilesModule.disposeMoodboard
				let moodboard = this.store.state.UploadFilesModule.moodboard
				if(moodboard.length > 1){
					if (!disposeMoodboard || disposeMoodboard.length == 0) {
						message.info(this.$t('collectionModal.jsContent1'))
						return
					}
				}
				
				
			}
			
			if(this.collectionStep == 3){
				if(colorBoards.length >= 1){
					colorBoards.forEach((colorItem:any) => {
						if(colorItem.gradient){
							colorItem.gradient.colorImg = setGradual(colorItem.gradient,320,700)
						}
					});
					this.store.commit('setColorboardList',colorBoards)
				}else{
					message.info(this.$t('collectionModal.jsContent3'))
					return
				}
			}
			if(this.driver__.driver){
				driverObj__.moveNext()
			}
			this.collectionStep = this.collectionStep + 1
        },

        lastStep(){
            this.collectionStep = this.collectionStep - 1
        },
        changeCollectionModal(type:boolean){
            this.showCollectionModal = type
        },

        recollection(){
            setTimeout(()=>{
                let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload']
                // let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload','MarketingSketchUpload']
                for(let child of childredCom){
                    let childRef:any = this.$refs[child]
                    childRef.recollection()
                }
            },200)
            
        },


        //取消
        cancelDsign(){
            let _this = this
            Modal.confirm({
                title: this.$t('collectionModal.jsContent2'),
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
					GO.id = 0
                    _this.showCollectionModal = false
                    _this.store.commit('clearAllData')
                    _this.collectionStep = 1
					_this.styleRecommend = []
                }
            });
        },
		isPin(str:any,resolve:any){
			let _this = this
            Modal.confirm({
                title: this.t('collectionModal.jsContent5',{str:str}),
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
					resolve(true)
					// return true
                },
				onCancel(){
					_this.isShowMark = false
					resolve(false)
				}
            });
			// message.warning(this.t('SketchboardUpload.jsContent1',str:str));
		},
		async isPinOpen(list:any){
			this.workspace
			let numTop = 0
			let numBottom = 0
			let top:any
			let bottom:any
			if(this.workspace.sexEnum.value == "Female"){
				top = ['Outwear','Dress','Blouse']
				bottom = ['Trousers','Skirt']
			}else{
				top = ['Outwear','Tops']
				bottom = ['Bottoms']
			}
			let topStr:any = []
			let bottomStr:any = []
			this.position.forEach((item:any) => {
				let topBor
				let botBor
				topBor = top.includes(item.value)
				botBor = bottom.includes(item.value)
				if(topBor){
					topStr.push(item.value)
				}
				if(botBor){
					bottomStr.push(item.value)
				}
			});
			list.forEach((item:any,index:number) => {
				top.forEach((positionItem:any) => {
					if(item.categoryValue == positionItem && item.pin){
						numTop++
					}
				});
				bottom.forEach((positionItem:any) => {
					if(item.categoryValue == positionItem && item.pin){
						numBottom++
					}
				});
			});
			let bor 
			await new Promise(async (resolve:any)=>{
				let str
				if(numTop >= 8){
					str = `top ${topStr.join(' and ')}`
						this.isPin(str,resolve)
					return 
				}else if(numBottom >= 8){
					str = `bottom ${bottomStr.join(' and ')}`
					this.isPin(str,resolve)
				}else{
					resolve(true)
				}
			}).then((v:any)=>{
				bor = v
			})
			return bor
		},
		getPantongName() {
			let colorBoards = this.store.state.UploadFilesModule.colorBoards;
			let data: any = [];
			for (let v of colorBoards) {
				let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
				let hsv = rgbToHsv(color);
				v.hsv = hsv[0] + hsv[1] + hsv[2];
				data.push({
					h: hsv[0],
					s: hsv[1],
					v: hsv[2],
				});
			}
			
			return new Promise((resolve: any, reject: any) => {
				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
					.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;
							});
							this.store.commit("setColorboardList", colorBoards);
							resolve();
						}
					})
					.catch((res) => {
						reject();
					});
			});
		},
        //完成
        async finishCollection(){
			this.isShowMark = true
			this.store.commit('clearAllId')
			this.$emit('finishCollection')
			await this.getPantongName()
			this.store.commit("setAllBoardData");

			let sketchList = this.store.state.UploadFilesModule.sketchboard
			let arr:any = []
			sketchList.forEach((item:any) => {
				let obj = {
					designType:item.resData.designType,
					isPin:item.pin ? 1 : 0,
					level2Type:item.categoryValue,
					sketchBoardId:item.id?item.id:item.resData.id
				}
				arr.push(obj)
			});
			// let data = {sketchBoards:arr}
			let data = this.getDesignData(-1)
			data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
			data.collectionId = this.store.state.HomeStoreModule.designCollectionId?this.store.state.HomeStoreModule.designCollectionId:null
			if(!await this.isPinOpen(sketchList)){
				this.isShowMark = false
				return
			}
			let elList = document.querySelectorAll('.img_block_item_sketch img')
			Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
				.then((rv: any) => {
					this.isShowMark = false
					this.store.commit('clearAllId')
					this.store.commit('setShowSketchboard',rv)
					GO.id = 0
					this.showCollectionModal =false
					this.collectionStep = 1
					if(this.driver__.driver){
						driverObj__.moveNext()
					}
				})
				.catch((res) => {
					this.isShowMark = false
				});

        }
    }
})
</script>
<style lang="less" scoped>
:deep(.ant-modal-body){
	padding: calc(8rem*1.2) calc(5rem*1.2) !important;
	// height: calc(65vh - 6.4rem);
	height: calc(65rem*1.2);
	.ant-progress-circle .ant-progress-text{
		color:rgba(0, 0, 0, 0.55);
		font-size: calc(1.6rem*1.2);
	}
}
.collection_modal{
	// max-width: 120rem;
	
	.ant-upload-select-picture-card{
        background: #FFFFFF;
		width: calc(6rem*1.2);
		height: calc(6rem*1.2);
		border: calc(0.3rem*1.2) solid #ededed;
		border-radius: calc(1rem*1.2);
		margin: 0;
        .upload_tip_block{
            .icon-jiahao{
                font-size: calc(3.2rem*1.2);
                color: #B7B7B7;
            }
        }

        .ant-upload-text{
            font-size: calc(1.6rem*1.2);
            color: #B7B7B7;
        }
    }
    .ant-upload-list-picture-card-container{
        display: none !important;
    }
    .ant-upload-picture-card-wrapper{
        width: auto;
        vertical-align: top;
    }
	.collection_title,.collection_closeIcon,.collection_page{
		position: absolute;
	}
	.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);
		}
		
	}
	.collection_closeIcon{
		
	}
	.collection_page{
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(3rem*1.2);
		display: flex;
		.fi-rr-arrow-small-left{
			margin-right: calc(10rem*1.2);
		}
		.fi{
			cursor: pointer;
			display: flex;
			height: 100%;
		}
		.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);
		}
	}
    .header_icon_fanhui{
        margin-right: calc(1rem*1.2);
        font-size: calc(2rem*1.2);
        cursor: pointer;
    }
    .header_right_block{
        display: flex;
        align-items: center;
        position: absolute;
        right: calc(2.1rem*1.2);
        height: 100%;

        .next_step_button{
            padding:  0 calc(1.2rem*1.2);
            height: calc(3.2rem*1.2);
            background: #343579;
            font-size: calc(1.4rem*1.2);
            color: #FFFFFF;
            line-height: calc(3.2rem*1.2);
            margin-right: calc(1.6rem*1.2);
            white-space: nowrap;
            cursor: pointer;
        }

        .header_cancel_button{
            padding:  0 calc(2.1rem*1.2);
            height: calc(3.2rem*1.2);
            background: #E4E5EB;
            font-size: calc(1.4rem*1.2);
            color: #030303;
            line-height: calc(3.2rem*1.2);
            white-space: nowrap;
            cursor: pointer;
        }
    }

    .collection_modal_body{
        height: 100%;
		background-color: #fff;
    }
}
</style>
