<template>
    <div class="homeNav" :class="{active:isUnfold}">
		<div class="navList unfold" @click="setUnfold" :title="'Expand the sidebar'" :class="{active:isUnfold}">
			<!-- <i class="fi fi-rr-window-maximize"></i> -->
			<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 24 24">
				<path fill-rule="evenodd" d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clip-rule="evenodd"></path>
			</svg>
			<span v-show="isUnfold">Module</span>
		</div>
		<div class="border"></div>
		<div class="navList unfold" @click="goHome">
			<i class="fi fi-sr-home"></i>
			<span v-show="isUnfold">Home</span>
		</div>
		<div class="navList" :class="{active:selectKey == 'workspace'}" @click="setNav('workspace', $event)">
			<i class="fi fi-rr-settings-sliders"></i>
			<span v-show="isUnfold">Settings</span>
		</div>
		<div class="border"></div>
		<div class="navList list" :class="{active:selectKey == item.value,exist:navListData.some((navListItem:any) => navListItem.value === item.value)}" v-for="item in navList" :key="item.value"  @click="setNav(item.value, $event)">
			<i :class="item.icon"></i>
			<span v-show="isUnfold">{{ item.name }}</span>
		</div>
    </div>
</template>
<script lang="ts">
import { defineComponent,watch,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'
import {projectList} from '@/tool/listData'

export default defineComponent({
    components:{
    },
	props:{
		selectKey:{type:String,default:''},
		navListData:{type:Array,default:()=>[]},
	},
	emits:['setSelectKey','unfold','goHome'],
    setup(props,{emit}) {
        const store = useStore();
		const data = reactive({
			isUnfold:false,
			navList:[] as any,
		})
		
		const dataDom = reactive({
		})
		const setNav = (str:any,event:any)=>{
			let data = {
				str:str == props.selectKey?'':str,
				dom:event.target,
				posiiton:'nav',
			}
			
			emit("setSelectKey", data);
			// emit("update:selectKey", str);
		}
		watch(()=>props.navListData,(newVal:any)=>{
			let list:any = projectList.all
			const combined = [...newVal, ...list];
			const seen = new Set();
			data.navList = combined.filter((item:any) => {
				if (seen.has(item.value)) {
					return false; // 如果value已经出现过，跳过当前对象
				} else {
					seen.add(item.value); // 如果value没有出现过，保留当前对象
					return true;
				}
			});
			
		})
		const setUnfold = ()=>{
			data.isUnfold = !data.isUnfold
			emit("unfold");
		}
		const goHome = ()=>{
			store.commit('createProbject')
			emit("goHome");
		}
        return{
			...toRefs(dataDom),
			...toRefs(data),
			setNav,
			setUnfold,
			goHome,
			projectList,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .homeNav{
		padding: 5rem 0rem;
		background: #f7f8fa;
		transition: all .3s;
		width: 7rem;
		overflow: hidden;
		&.active{
			width: 25rem;
		}
		> div{
			display: flex;
			cursor: pointer;
			border-radius: 1rem;
			margin: 0 1rem;
			&.list{
				color: #bfbfbf;
				pointer-events: none;
			}
			&.active{
				background: #ebebeb;
			}
			&.unfold{
				&.active{
					border: 1px solid #000000;
				}
			}
			&.list{
				&.exist{
					color: #000000;
					pointer-events: auto;
				}
			}
			
			> i,> svg{
				font-size: 2rem;
				margin-right: 1rem;
				display: flex;
				width: 5rem;
				height: 5rem;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}
			> svg{
				padding: 1rem;
			}
			> span{
				font-size: 1.8rem;
				line-height: 5rem;
				white-space: nowrap;
			}
		}
		.border{
			border-bottom: 1px solid #D9D9D9;
			margin: 1rem 0;
		}
	}
</style>