<template>
  <a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
    width="213px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null">
    <logo/>
    <s-menu
      :collapsed="collapsed"
      :menu="menus"
      :theme="theme"
      @select="onSelect"
      :mode="mode"
      class="s-menu"
      ></s-menu>
  </a-layout-sider>

</template>

<script>
  import ALayoutSider from "ant-design-vue/es/layout/Sider"
  import Logo from '../tools/Logo'
  import SMenu from './index'
  import {mixin, mixinDevice} from '@/util/mixin.js'

  export default {
    name: "SideMenu",
    components: {ALayoutSider, Logo, SMenu},
    mixins: [mixin, mixinDevice],
    props: {
      mode: {
        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: {
      onSelect(obj) {
        this.$emit('menuSelect', obj)
      }
    }
  }
</script>
<style lang="less" scoped>
  .s-menu {
    overflow-y: auto;
    height: calc(100vh - 50px);
  }
  /*谷歌浏览器下隐藏滚动条*/
  .s-menu::-webkit-scrollbar {
    width: 0px;
  }
</style>