<template>
    <div class="homeNavBox">
		<div class="navList">
			<img :class="workflowType" v-if="workflowType == 'seriesDesign'" src="@/assets/images/homePage/seriesDesign.png" alt="">
			<img :class="workflowType" v-if="workflowType == 'singleProductDesign'" src="@/assets/images/homePage/singleProductDesign.png" alt="">
			<img :class="workflowType" v-if="workflowType == 'printDesign'" src="@/assets/images/homePage/3DPrintingDesign.png" alt="">
			<img :class="workflowType" v-if="workflowType == 'productDrawingDesign'" src="@/assets/images/homePage/productDrawingDesign.png" alt="">
			<img :class="workflowType" v-if="workflowType == 'printingDesign3D'" src="@/assets/images/homePage/3DPrintingDesign.png" alt="">
			<img :class="workflowType" v-if="workflowType == 'sketchDesign'" src="@/assets/images/homePage/sketchDesign.png" alt="">
			<div class="navListItem" 
				v-for="item in navListData" :key="item.value"
				:class="[
					(item?.select || (selectObject.model.id > -1 && item.value == 'mannequin'))?'active':'',
					`item${item.task}`,
					workflowType,
					]" 
			 @click.stop="setNav(item.value,$event)" >
			  <!-- @click.stop="setSelect(item)" -->
				<div class="background"></div>
				<div class="text">
					<i :class="[item.icon,]" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }}
					<!-- <i :class="[item.icon,item.value == 'design'?'active':'']" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }} -->
				</div>
				<!-- <div class="designIcon" v-if="item.value == 'design'"><i class="fi fi-rr-magic-wand"></i></div> -->
			</div>
		</div>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'

export default defineComponent({
    components:{
    },
	props:{
		selectKey:{type:String,default:''},
		isShowMark:{type:Boolean,default:false},
		workflowType:{type:String,default:''},
	},
	emits:['setSelectKey','setModule'],
    setup(props,{emit}) {
        const store = useStore();
		const data = reactive({
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			navListData:computed(()=>store.state.Workspace.projectList),
		})
		const dataTime = reactive({
			clickTime:null as any,
		})
		const dataDom = reactive({
			navList:null as any
		})
		const setNav = async (str:any,event:any,button:string)=>{
			clearTimeout(dataTime.clickTime)
			let data = {
				str:str == props.selectKey?'':str,
				dom:event.target,
				posiiton:'navBox',
				button,
			}
			emit("setSelectKey", data);
			// emit("update:selectKey", str);
		}
		const setSelect = (item:any)=>{
			clearTimeout(dataTime.clickTime)
			dataTime.clickTime = setTimeout(async ()=>{//防止双击和单机都执行的问题
				if (item.select) {
					let data = {
						select:false,
						value:item.value
					}
					emit('setModule',data)
					item.select = false
				}else{
					let data = {
						select:true,
						value:item.value
					}
					emit('setModule',data)
					item.select = true
				}
				
			},200)
		}
        return{
			...toRefs(dataDom),
			...toRefs(data),
			setNav,
			setSelect,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .homeNavBox{
		width: 100%;
		height: 100%;
		position: relative;
		> .navList{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			img{
				&.seriesDesign{width: 98rem;height: 58rem;}
				&.singleProductDesign{width: 98rem;height: 43rem;}
				&.printDesign{width: 8rem;height: 1.3rem;}
				&.printingDesign3D{width: 8rem;height: 1.3rem;}
				&.productDrawingDesign{width: 38rem;height: 23rem;}
				&.sketchDesign{width: 38rem;height: 23rem;}
			}
			> .navListItem{
				width: 22rem;
				height: 10rem;
				border-radius: 2rem;
				border: 2px solid #000;
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all .2s;
				overflow: hidden;
				cursor: pointer;
				padding: 2rem;
				&.seriesDesign{
					&.item1-1{top: -5rem;left: -22rem;}
					&.item1-2{top: 9rem;left: -22rem;}
					&.item1-3{top: 23rem;left: -22rem;}
					&.item1-4{top: 37rem;left: -22rem;}
					&.item1-5{top: 51rem;left: -22rem;}
					&.item2-1{top: 23rem;left: 8rem;}
					&.item3-1{top: 23rem;left: 38rem;}
					&.item4-1{top: 12rem;left: 68rem;}
					&.item4-2{top: 34rem;left: 68rem;}
					&.item5-1{top: 23rem;left: 98rem;}
				}
				&.singleProductDesign{
					&.item1-1{top: -5rem;left: -22rem;}
					&.item1-2{top: 9rem;left: -22rem;}
					&.item1-3{top: 23rem;left: -22rem;}
					&.item1-4{top: 37rem;left: -22rem;}
					&.item1-5{top: 51rem;left: -22rem;}
					&.item2-1{top: 16.5rem;left: 8rem;}
					&.item3-1{top: 16.5rem;left: 38rem;}
					&.item4-1{top: 16.5rem;left: 68rem;}
					&.item5-1{top: 16.5rem;left: 98rem;}
				}
				&.printDesign,&.printingDesign3D{
					&.item1-1{top: -3rem;left: -22rem;}
					&.item2-1{top: -3rem;left: 8rem;}
				}
				&.productDrawingDesign{
					&.item1-1{top: 6.5rem;left: -22rem;}
					&.item2-1{top: -4rem;left: 8rem;}
					&.item2-2{top: 17rem;left: 8rem;}
					&.item3-1{top: 6.5rem;left: 38rem;}
				}
				&.sketchDesign{
					&.item1-1{top: -5rem;left: -22rem;}
					&.item1-2{top: 18rem;left: -22rem;}
					&.item2-1{top: 6.5rem;left: 8rem;}
					&.item3-1{top: 6.5rem;left: 38rem;}
				}
				.background{
					// background: #e8e8e8;
					background: #e8e8e8;
					transition: all .3s;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
				.text{
					position: relative;
					display: flex;
					align-items: center;
					> i{
						font-size: 2rem;
						margin-right: 1rem;
						display: flex;
						&.active{
							box-shadow: #000 0px 0px 10px;
							border-radius: 1rem;
							padding: .5rem;
						}
					}
				}
				> .designIcon{
					opacity: 1;
					position: absolute;
					bottom: 1rem;
					right: 1rem;
					cursor: pointer;
					box-shadow: #000 0px 0px 2px;
					border-radius: 1rem;
					> i{
						display: flex;
						padding: .5rem;
						font-size: 2rem;
						
					}
				}
				&.active{
					border: 3px solid #000;
					.background{
						opacity: .5;
					}
				}
				&:hover{
					border: 3px solid #000;
					.background{
						opacity: .5;
					}
				}
			}
		}
		
	}
</style>