<template>
  <div class="aside-content" :class="isCollapsed ? 'collapsed' : ''">
    <el-menu
      class="sidebar-el-menu"
      background-color="#424F63"
      text-color="#DFE5EC"
      active-text-color="#52B4FF"
      :collapse="isCollapsed"
      :default-active="activeIndex"
      style="border-right:0px;">
      <template v-for="(item, i) in items">
        <template v-if="item.subs">
          <el-submenu :key="item.id" :index="i.toString()">
            <template slot="title">
              <i class="fa fa-fw" :class="item.icon_class_name"></i>
              <span class="module-title" slot="title">{{ item.name }}</span>
            </template>
            <el-menu-item
              v-for="(subItem, si) in item.subs"
              :key="subItem.id"
              :index="i.toString() + '-' + si.toString()"
              @click="navigateTo(subItem.page_name, i.toString() + '-' + si.toString())">
                            <span class="sub-module-title">
                                {{ subItem.name }}
                            </span>
            </el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.id" :key="item.id">
            <i :class="item.icon_class_name"></i><span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>
<script>
  import eventBus from './eventBus.js'

  export default {
    data() {
      return {
        isCollapsed: false,
        items: null,
        activeIndex: localStorage.getItem('activeMenuIndex')
      }
    },
    methods: {
      navigateTo: function (pageName, index) {
        localStorage.setItem('activeMenuIndex', index)
        localStorage.setItem('activeMenuName', pageName)
        window.location.href = "http://127.0.0.1:8080/" + pageName
      },
      getStorageItem: function (itemName) {
        try {
          let profileStr = localStorage.getItem(itemName)
          return JSON.parse(profileStr)
        } catch (err) {
          return null
        }
      }
    },
    created() {
      // 通过 Event Bus 进行组件间通信，来折叠侧边栏
      eventBus.$on('isCollapsed', msg => {
        this.isCollapsed = msg
      });
      //获取缓存中的个人信息
      let profile = this.getStorageItem('profile')
      let begin = this.getStorageItem('begin')
      if (!profile || !begin || isNaN(begin)) {
        return
      }
      let currentTime = new Date().getTime()
      //登录超时时间为3小时
      if (currentTime - begin > 3 * 60 * 60 * 1000) {
        return
      }
      //获取模块
      var self = this
      this.$http('get','/integral.php/ajax_request_common/get_available_modules',{id: profile.id}).then(function (response) {
        if (response.status == 200) {
          var jsonData = response.data
          try {
            self.items = jsonData
            console.log(jsonData)
          } catch (err) {
            console.log(err)
          }
        }
      }).catch(function (error) {
        console.log(error)
      })
    }
  }
</script>
