<template>
  <!-- 模板部分，定义了组件的HTML结构 -->
  <a-layout-sider
  <!-- 使用a-layout-sider组件作为侧边栏布局 -->
  :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null]"
  <!-- 动态类名，根据桌面视图和是否固定侧边栏来切换样式 -->
  width="256px" <!-- 侧边栏宽度 -->
  :collapsible="collapsible" <!-- 侧边栏可折叠 -->
  v-model="collapsed" <!-- 双向绑定，用于控制侧边栏的折叠状态 -->
  :trigger="null" <!-- 禁用触发器 -->
  >
  <!-- Logo组件 -->
  <logo />
  <!-- SMenu组件，用于显示菜单项 -->
  <s-menu
    :collapsed="collapsed"
    :menu="menus"
    :theme="theme"
    :mode="mode"
    @select="onSelect" <!-- 菜单选择事件 -->
  style="padding: 16px 0px;" <!-- 菜单内边距 -->
  </s-menu>
  </a-layout-sider>
</template>

<script>
// 导入Logo和SMenu组件
import Logo from '../../components/tools/Logo'
import SMenu from './index'
// 导入mixin，用于设备检测和主题设置
import {mixin, mixinDevice} from '../../utils/mixin'

export default {
  // 组件名称
  name: 'SideMenu',
  // 注册子组件
  components: {Logo, SMenu},
  // 使用mixin
  mixins: [mixin, mixinDevice],
  // 定义props，用于传递数据和配置
  props: {
    mode: { // 定义props类型
      type: String,
      required: false,
      default: 'inline' // 默认模式
    },
    theme: { // 主题设置
      type: String,
      required: false,
      default: 'dark'
    },
    collapsible: { // 是否可折叠
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: { // 当前折叠状态
      type: Boolean,
      required: false,
      default: false
    },
    menus: { // 菜单数据
      type: Array,
      required: true
    }
  },
  // 定义methods，用于处理事件
  methods: {
    onSelect(obj) { // 菜单项选择事件处理
      this.$emit('menuSelect', obj) // 触发父组件的事件
    }
  }
</script>