<template>
  <el-aside class="sidebar-container">
      <div class="logo">
          <img :src="logo" alt="平台logo">
          <img :src="shortLogo" alt="" class="short-logo">
      </div>
      <el-scrollbar class="scrollbar-wrapper">
        <BaseMenu v-bind="menuProps" class="sidebar-menu"></BaseMenu>
      </el-scrollbar>
  </el-aside>
</template>

<script>
import BaseMenu from './baseMenu';

export default {
    props: {
        theme: {
            type: Object
        },
        mode: {
            type: String,
            default: 'vertical'
        },
        isCollapsed: {
            type: Boolean
        },
        menuData: {
            type: Array
        },
        logo: {
            type: String
        },
        shortLogo: String,
        name: {
            type: String
        },
        isLimitLevel: {
            type: Boolean,
            default: false
        },
        basePath: {
            type: String,
            default: '/'
        },
        matchPath: {
            type: String,
            default: ''
        }
    },
    components: { BaseMenu },
    data () {
        return {};
    },
    computed: {
        menuProps () {
            const { theme, mode, isCollapsed, menuData, isLimitLevel, basePath, matchPath } = this;
            return {
                theme, mode, isCollapsed, menuData, isLimitLevel, basePath, matchPath
            };
        }
    },
    methods: {
    }
};
</script>
