<template>
  <el-menu :collapse="props.collapse" :background-color="props.backgroundColor" :text-color="props.textColor"
    :active-text-color="props.activeTextColor" :default-active="props.defaultActive"
    :default-openeds="props.defaultOpeneds" :unique-opened="props.uniqueOpened" :menu-trigger="props.menuTrigger"
    :router="props.router" :collapse-transition="props.collapseTransition" :popper-effect="props.popperEffect" @select="customLinkCallBackFn" >
    <menuItem :menuList="props.menuList" :isCustomLink="props.isCustomLink"     >
    </menuItem>
  </el-menu>
</template>

<script lang="ts" setup>
import menuItem from "./menuItem.vue"
 
const props: any = defineProps({
  collapse: {
    type: Boolean,
    default: false,
  },
  backgroundColor: {
    type: String,
    default: "#fff"
  },
  textColor: {
    type: String,
    default: "#303133"
  },
  activeTextColor: {
    type: String,
    default: "#409EFF"
  },
  defaultActive: {
    type: String,
    default: "0"
  },
  defaultOpeneds: {
    type: Array,
    default: []
  },
 
  menuTrigger: {
    type: String,
    default: "hover"//hover / click
  },
  router: {
    type: Boolean,
    default: false,
  },
  collapseTransition: {
    type: Boolean,
    default: false,
  },
  popperEffect: {
    type: String,
    default: "dark"//dark / light
  },
  menuList: {
    type: Array,
    default: []
  },
  isCustomLink:{
    type: Boolean,
    default: false,
  },
  customLinkCallBack:{
    type:Function,
    default:()=>{}
  }
})

const customLinkCallBackFn =(ev:any)=>{
  console.log("2342423",ev)
  const current = ev.split("&&")
  let currentItem = {
    title:current[1],
    path:current[0]
  }
  props.customLinkCallBack(currentItem)
}
 
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
