<template>
  <el-menu-item class="custom-base-menu-item" :index="path" ref="menuItemRef" @click="clickMenu">
    <template v-if="meta.icon || defaultIcon">
      <svg-icon class="custom-base-icon" :class="meta.icon && 'animated'" :icon-name="meta.icon || defaultIcon"></svg-icon>
    </template>
    <template #title>{{ meta.title }}</template>
  </el-menu-item>
</template>

<script setup lang="ts">
import { useLink } from './useLink'

defineProps({
  path: {
    type: String
  },
  meta: {
    type: Object,
    default: function () {
      return {}
    }
  },
  defaultIcon: {
    type: String,
    default: ''
  }
})
// 界面跳转
const goPage = useLink()
function clickMenu({ index: path }: { index: string }) {
  goPage(path)
}
</script>
<style lang="scss" scoped>
.custom-base-menu-item {
  min-width: auto;
  color: var(--custom-base-color-text) !important;
  .custom-base-icon {
    font-size: 16px;
    margin-right: 10px;
  }
  &:hover {
    // background-color: inherit;
    .custom-base-icon {
      animation-name: swing;
    }
    color: var(--custom-base-color-text-selected) !important;
  }
  &.is-active {
    background-color: var(--custom-base-color-background-selected) !important;
    color: var(--custom-base-color-text-selected) !important;
    border-right: 2px solid var(--custom-base-color-text-selected);
  }
}
</style>
