<template>
  <div :class="{'has-logo':showLogo}">
    <div class="flex4 boxtitle">
      <el-image :src="logo" style="width: 100px; height: 78px;" fit=" fill"></el-image>
      <span style="color: #1F242A ;">55</span>
            <span style="color: #BEBDBB;">2456165645625454151</span>
    </div>


    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg"
        :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText"
        :collapse-transition="false" mode="vertical">
      
        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import Logo from './Logo'
  import SidebarItem from './SidebarItem'
  import variables from '@/styles/variables.scss'
 import logo from '@/assets/img/logo.png'
  export default {
    components: {
      SidebarItem,
      Logo
    },
  data(){
      return{
        logo:logo,
				checked:''
      }
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ]),
      routes() {
        return this.$router.options.routes
      },
      activeMenu() {
        const route = this.$route
        const {
          meta,
          path
        } = route
        // if set path, the sidebar will highlight the path you set
        if (meta.activeMenu) {
          return meta.activeMenu
        }
        return path
      },
      showLogo() {
        return this.$store.state.settings.sidebarLogo
      },
      variables() {
        return variables
      },
      isCollapse() {
        return !this.sidebar.opened
      }
    }
  }
</script>
<style>
  .boxtitle {
    margin-top: 80px;
    margin-bottom: 25px;
  }
</style>
