<template>
  <el-sub-menu :index="menu?.path" :class="subMenuClass" v-if="menu?.children?.length">
    <template #title>
      <el-icon>
        <Icon :name="menu?.meta?.icon" v-if="menu?.meta?.icon" class="text-sm" />
      </el-icon>
      <span>{{ menu?.meta?.title }}</span>
    </template>
    <slot />
  </el-sub-menu>

  <el-menu-item v-else class="ct-menu-item" :index="menu?.path" @click="isMiniScreen() && store.changeExpaned()">
    <el-icon>
      <Icon :name="menu?.meta?.icon" v-if="menu?.meta?.icon" class="text-sm" />
    </el-icon>
    <span>{{ menu?.meta?.title }}</span>
  </el-menu-item>
</template>

<script lang="ts" name="MenuItem" setup>
import { Menu } from '/admin/types/Menu'
import { onMounted, PropType, ref } from 'vue'
import { useAppStore } from '/admin/stores/modules/app'
import { isMiniScreen } from '/admin/support/helper'

const store = useAppStore()

defineProps({
  subMenuClass: {
    type: String,
    require: true,
    default: '',
  },

  menu: {
    type: Object as PropType<Menu>,
    require: true,
  },
})
</script>

<style scoped lang="scss">
:deep(.el-menu) {
  background-color: var(--sider-sub-menu-bg-color);
}

.ct-menu-item:hover {
  background-color: var(--sider-sub-menu-hover-bg-color) !important;
}

:deep(.children-menu .el-sub-menu__title) {
  background-color: var(--sider-sub-menu-bg-color) !important;
}

:deep(.el-menu-item-group__title) {
  padding: 0;
}
</style>