<template>
  <aside class="site-sidebar"
         :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu :default-active="menuActiveName || 'home'"
               :collapse="sidebarFold"
               :collapseTransition="false"
               class="site-sidebar__menu">
        <el-submenu index="book">
          <span slot="title">文章管理</span>
          <el-menu-item index="2-1" @click="$router.push({ name: 'patternsen' })">科普文章</el-menu-item>
          <!-- <el-menu-item index="2-2" @click="$router.push({ name: 'title' })">风险管理</el-menu-item> -->
        </el-submenu>
        <el-submenu index="system"
                    @click="$router.push({ name: 'system' })">
          <span slot="title">系统管理</span>
          <el-menu-item v-if="checkAdmin()"
                        index="4-1"
                        @click="$router.push({ name: 'user' })">账户管理</el-menu-item>
          <el-menu-item v-else
                        index="4-1"
                        @click="$router.push({ name: 'user' })">用户中心</el-menu-item>
        </el-submenu>

        <!-- <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu> -->
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
import { isURL } from '@/utils/validate'
export default {
  data () {
    return {
      dynamicMenuRoutes: []
    }
  },
  components: {
    SubMenu
  },
  computed: {
    sidebarLayoutSkin: {
      get () { return this.$store.state.common.sidebarLayoutSkin }
    },
    sidebarFold: {
      get () { return this.$store.state.common.sidebarFold }
    },
    menuList: {
      get () { return this.$store.state.common.menuList },
      set (val) { this.$store.commit('common/updateMenuList', val) }
    },
    menuActiveName: {
      get () { return this.$store.state.common.menuActiveName },
      set (val) { this.$store.commit('common/updateMenuActiveName', val) }
    },
    mainTabs: {
      get () { return this.$store.state.common.mainTabs },
      set (val) { this.$store.commit('common/updateMainTabs', val) }
    },
    mainTabsActiveName: {
      get () { return this.$store.state.common.mainTabsActiveName },
      set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
    }
  },
  watch: {
    $route: 'routeHandle'
  },
  created () {
    this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
    this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
    this.routeHandle(this.$route)
  },
  methods: {
    // 路由操作
    routeHandle (route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter(item => item.name === route.name)[0]
        if (!tab) {
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
            iframeUrl: route.meta.iframeUrl || ''
          }
          this.mainTabs = this.mainTabs.concat(tab)
        }
        this.menuActiveName = tab.menuId + ''
        this.mainTabsActiveName = tab.name
      }
    },
    checkAdmin () {
      var type = localStorage.getItem('type')
      if (type === '1') {
        return true
      } else {
        return false
      }
    },
    checkLesson () {
      var type = localStorage.getItem('type')
      if (type === '1' || type === '2' || type === '3') {
        return true
      } else {
        return false
      }
    },
    checkClass () {
      var type = localStorage.getItem('type')
      if (type === '1' || type === '2' || type === '3') {
        return true
      } else {
        return false
      }
    },
    checkTeacher () {
      var type = localStorage.getItem('type')
      if (type === '1' || type === '2') {
        return true
      } else {
        return false
      }
    }
  }
}
</script>
