<template>
  <!-- 定义一个布局侧边栏 -->
  <a-layout-sider>
    <!-- 根据不同条件添加不同的class -->
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
    <!-- 设置宽度为256px -->
    width="256px"
    <!-- 是否可折叠 -->
    :collapsible="collapsible"
    <!-- 绑定collapsed变量 -->
    v-model="collapsed"
    <!-- 设置触发器为null -->
    :trigger="null">
    <!-- 引入logo组件 -->
    <logo />
    <!-- 引入s-menu组件 -->
    <s-menu>
      <!-- 绑定collapsed变量 -->
      :collapsed="collapsed"
      <!-- 绑定menus变量 -->
      :menu="menus"
      <!-- 绑定theme变量 -->
      :theme="theme"
      <!-- 绑定mode变量 -->
      :mode="mode"
      <!-- 监听select事件 -->
      @select="onSelect"
      <!-- 设置样式 -->
      style="padding: 16px 0px;"></s-menu>
  </a-layout-sider>

</template>

<script>
// 引入Logo组件
import Logo from '../../components/tools/Logo'
// 引入SMenu组件
import SMenu from './index'
// 引入mixin和mixinDevice
import { mixin, mixinDevice } from '../../utils/mixin'

export default {
  name: 'SideMenu',
  // 注册组件
  components: { Logo, SMenu },
  // 使用mixin和mixinDevice
  mixins: [mixin, mixinDevice],
  // 定义props
  props: {
    // 菜单模式，默认为inline
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    // 主题，默认为dark
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    // 是否可折叠，默认为false
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    // 是否已折叠，默认为false
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    // 菜单列表，必填
    menus: {
      type: Array,
      required: true
    }
  },
  // 定义方法
  methods: {
    // 菜单选择事件
    onSelect (obj) {
      // 触发menuSelect事件
      this.$emit('menuSelect', obj)
    }
  }
}
</script>
