<template>
  <div>
    <div class="logo">
      <!-- <img
        v-if="!isCollapse"
        src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.png"
      /> -->
      <img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/favicon.svg" />
      <span>内容维护系统</span>
    </div>
    <el-scrollbar wrap-class="scrollbar-wrapper sidebar-container-wrap">
      <el-menu
        :default-active="defaultActive"
        class="sidebar-menu"
        background-color="#333"
        text-color="#fff"
        active-text-color="#409EFF"
        :collapse="isCollapse"
        @select="handlleSelect"
      >
        <menu-item v-for="item in menu" :key="item.path" :navItem="item" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import MenuItem from './MenuItem'
export default {
  data() {
    return {
      defaultActive: '/content-manage/ads',
      menu: [
        {
          title: '内容管理',
          icon: 'el-icon-document',
          path: '/content-manage',
          children: [
            {
              title: '广告列表',
              icon: '',
              path: '/content-manage/ads'
            },
            {
              title: '文章列表',
              icon: '',
              path: '/content-manage/article'
            },
            {
              title: '图文列表',
              icon: '',
              path: '/content-manage/image-text'
            }
          ]
        },
        {
          title: '设置',
          icon: 'el-icon-setting',
          path: '/settings',
          children: [
            {
              title: '员工管理',
              icon: '',
              path: '/settings/staff'
            },
            {
              title: '项目管理',
              icon: '',
              path: '/settings/project'
            },
            {
              title: '类型管理',
              icon: '',
              path: '/settings/type'
            },
            {
              title: '高级设置',
              icon: '',
              path: '/settings/role'
            }
          ]
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['sidebar']),
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  components: { MenuItem },
  watch: {
    $route: {
      handler: function(nv) {
        if (nv && nv.path) this.defaultActive = nv.path
        else this.defaultActive = ''
      },
      immediate: true
    }
  },
  methods: {
    handlleSelect(path) {
      this.$router.push(path)
    }
  }
}
</script>
<style scoped>
.logo {
  height: 48px;
  width: 166px;
  background: #333;
  padding-top: 4px;
  transition: width 0.295s ease-in-out;
  padding-left:6px;
}
.logo-collapse {
  width: 48px;
}
.logo span{
  display:inline-block;
  font-size:16px;
  line-height:48px;
  color:#fff;
  vertical-align: middle;
}
.logo img {
  width: 48px;
  height: 46px;
}
.logo-collapse img {
  width: 46px;
  height: 46px;
}
::v-deep.el-submenu.is-active .el-submenu__title {
    border-bottom-color: #409EFF;
}
</style>
<style>
.sidebar-container-wrap {
  overflow-x: hidden !important;
}
.sidebar-container .el-scrollbar {
  height: 100%;
}
.sidebar-container .el-menu {
  border: none;
  /* width:166px; */
}
.sidebar-container .el-scrollbar__view {
  height: 100%;
}
.sidebar-container .el-scrollbar__view ul {
  height: 100%;
}
</style>
