<!--
 * @Author: your name
 * @Date: 2022-03-01 18:23:03
 * @LastEditTime: 2022-03-02 07:00:43
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \lowcode-ui\src\components\Menu\SideMenu.vue
-->
<template>
  <a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
    width="256px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
  >
    <logo />
    <s-menu
      :collapsed="collapsed"
      :menu="menus"
      :theme="theme"
      :mode="mode"
      @select="onSelect"
      :style="{padding: '16px 0px','overflow-y':'auto', height: menuHeight + 'px' }"
    ></s-menu>
  </a-layout-sider>
</template>

<script>
import Logo from '@/components/tools/Logo'
import SMenu from './index'
import { mixin, mixinDevice }   from '../../../packages/utils/mixin'
import { getClientHeight } from '../../../packages/utils/util'

export default {
  name: 'SideMenu',
  components: { 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
    }
  },
  data () {
    return {
      menuHeight: 500
    }
  },
  mounted: function () {
    window.addEventListener('resize', this.setMenuHeight)
    this.setMenuHeight()
  },
  destroyed () {
    window.removeEventListener('resize', this.setMenuHeight)
  },
  methods: {
    setMenuHeight () {
      this.$nextTick(() => {
        this.menuHeight = getClientHeight() - 90
      })
    },
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    }
  }
}
</script>
