<template>
  <div class="layout">
    <el-container>
      <keep-alive>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <h1 style='font-weight: 900;font-size: 18px; padding-left: 30px;width: 200px'>万维星辰</h1>
            </div>
          </el-col>
          <el-col :span="10" :offset='1'>
            <ul class="grid-content bg-purple">
              <el-menu :default-active="activeIndex" mode="horizontal" router @select="handleSelect">
                <el-menu-item index='/management'>日志管理</el-menu-item>
                <el-menu-item index='/analysis'>日志分析</el-menu-item>
                <el-menu-item index='/audit'>日志审计</el-menu-item>
              </el-menu>
            </ul>
          </el-col>
          <el-col :span="6" class='fr'>
            <div class="grid-content bg-purple">
              <el-menu :default-active="activeIndex" class="el-menu-demo fr" mode="horizontal" @select="handleSelect">
                <el-submenu index="4">
                  <template slot="title">账户设置</template>
                  <el-menu-item index="4-1">基本资料</el-menu-item>
                  <el-menu-item index="4-2">修改密码</el-menu-item>
                  <el-menu-item index="4-3" style='border-top:1px solid #eee'>退出</el-menu-item>
                </el-submenu>
                <el-menu-item index="5" class='fr' @click.native='logout'>退出登录</el-menu-item>
              </el-menu>
            </div>
          </el-col>
        </el-row>
      </el-header>
      </keep-alive>
      <el-container>
        <!--  侧边栏区域 -->
        <el-aside :width="isCollapse?'50px':'180px'">
          <el-menu
            active-text-color='#409EFF'
            background-color='#2F4156'
            :default-active='defaultActive'
            router
            :collapse='isCollapse'
            >
            <template  v-for='(item,index) in sidebarInfor' v-if='item.roles.length==0||item.roles.includes(roles)'>
              <!-- 分组导航 -->
              <el-submenu :index='basePath+item.path' :key='index' v-if='item.data.length>1'>
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{item.title}}</span>
                </template>
                <el-menu-item-group v-for='(subitem,subindex) in item.data' :key='subindex'>
                  <el-menu-item
                    :index='basePath+subitem.path'
                    v-if="subitem.meta.roles.includes(roles)"
                    >{{subitem.meta.subtitle}}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 单项导航 -->
              <el-menu-item :index='basePath+item.path' :key='index' v-else>
                <i :class="item.icon"></i>
                <span solt="title">{{item.title}}</span>
              </el-menu-item>
            </template>
          </el-menu>
          <i class='collapse-icon' :class='isCollapse?"el-icon-d-arrow-right":"el-icon-d-arrow-left"' @click='handleCollapse'></i>
        </el-aside>
        <el-main  id='main-content' :key='this.$route.path' :class="{ 'content-expand': isCollapse }">
            <slot></slot>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex';
  import {grouping} from '@/utils/grouping'
  export default {
    data() {
      return {
        activeIndex: '/management',
        defaultActive: '/management/logsources',
        isCollapse : false,
        sidebarInfor:[],
      };
    },
    computed:{
      ...mapGetters(['roles']),
      basePath(){
        return this.$route.path.match(/^\/[a-zA-Z]*/g)[0]+'/';
      },
      curRouter(){
        return this.$router.options.routes.filter(route=>{
          if(route.path !=='/'){
            return this.$route.path.startsWith(route.path)
          }
        })[0];
      }
    },
    created(){
      this.defaultActive = this.$route.path;
      this.activeIndex = this.$route.path.match(/^\/[a-zA-Z]*/g)[0];
      this.sidebarInfor = grouping(this.curRouter.children);
      if(!this.roles){this.getUserInfor()}
    },
    methods: {
      ...mapActions(['getUserInfor']),
      handleSelect(key, keyPath) {
        this.activeIndex = key;
      },

      logout(){
        localStorage.removeItem('XD_TOKEN');
        this.$router.push('/login')
      },
      handleCollapse(){
        this.isCollapse = !this.isCollapse
      }
    }
  }
</script>



<style lang="less" scoped>
  .el-header {
    position: fixed;
    z-index: 3;
    background-color: #fff;
    width: 100%;
    height: 50px;
    line-height: 50px;
    box-shadow: 0 1px 1px #909399;
    .el-col {
      height: 50px;
      line-height: 50px;
      .el-menu-item:hover {
        background: #64D8D6;
      }
    }
  }
  .el-aside {
    background-color: #2F4156;
    position: fixed;
    top: 51px;
    left: 0;
    height: 100%;
    transition: width .5s;
    .collapse-icon {
      color:#fff;
      cursor:pointer;
      text-align:center;
      width:100%;
      position:absolute;
      bottom: 100px;
      margin-left: 0px !important }
    i {margin-top: -3px !important; margin-right: 2px;margin-left: -10px !important;}
    .el-menu-item,.el-submenu span{
      color:#BFCBD9;
    }
    .el-menu {
      border-right: solid 1px #2F4156;
    }

  }
  .el-aside-collapse {
    width: 50px;
  }
  .el-main {
    transition: margin-left .5s;
    margin: 15px;
    margin-left: 192px;
    margin-top: 65px;
    border: 1px solid #DCDFE6;
    border-radius: 5px;
    min-height: calc(~ '100vh - 85px');
    box-shadow: 1px 2px 1px  #DCDFE6;
    background-color: #fff
  }
  .content-expand{
      transition: margin-left .5s;
      margin-left: 64px;
    }
</style>