<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-14 11:17:01
 * @LastEditTime: 2019-08-14 11:17:26
 * @LastEditors: Please set LastEditors
 -->
<template>
  <el-container>
    <el-header height="1rem" class="header">
      <header-component/>
    </el-header>
    <el-container class="body">
      <el-aside  class="layer-menu" width="3.1rem">
        <el-menu
          :router=true
          :default-active="defaultActive"
          @open="handleOpen"
          @close="handleClose"
          :unique-opened="true"
        >
          <el-submenu index="data" class="menu-level1">
            <template slot="title">
              <i class="el-icon-datau-shuju"></i>
              <span>数据管理</span>
            </template>
            <el-menu-item index="data-database" route="/data/database"  class="menu-level2">数据库管理</el-menu-item>
            <el-menu-item index="data-meta" route="/data/meta"   class="menu-level2">元数据管理</el-menu-item>
            <el-menu-item index="data-interface" route="/data/interface"   class="menu-level2">接口管理</el-menu-item>
            <el-menu-item index="data-interfaceClassify" route="/data/interfaceClassify"   class="menu-level2">接口分类管理</el-menu-item>
          </el-submenu>
          <el-submenu index="collection" class="menu-level1">
            <template slot="title">
              <i class="el-icon-datau-yuanshujucaiji"></i>
              <span>数据采集</span>
            </template>
            <el-menu-item index="collection-task" route="/collection/task"  class="menu-level2">任务管理</el-menu-item>
            <el-menu-item index="collection-check" route="/collection/check"  class="menu-level2">质量检查</el-menu-item>
          </el-submenu>

          <el-submenu index="kpi" class="menu-level1">
            <template slot="title">
              <i class="el-icon-datau-baogao-KPI"></i>
              <span>KPI配置</span>
            </template>
            <el-menu-item index="kpi-theme" route="/kpi/theme"   class="menu-level2">主题管理</el-menu-item>
            <el-menu-item index="kpi-manage" route="/kpi/manage"  class="menu-level2">KPI管理</el-menu-item>
          </el-submenu>
          <el-submenu index="report" class="menu-level1">
            <template slot="title">
              <i class="el-icon-datau-baobiao"></i>
              <span>报表配置</span>
            </template>
            <el-menu-item index="report-type" route="/report/type"   class="menu-level2">分类管理</el-menu-item>
            <el-menu-item index="report-manage" route="/report/manage"  class="menu-level2">报表管理</el-menu-item>
          </el-submenu>


          <!--<el-submenu index="graph" class="menu-level1">-->
            <!--<template slot="title">-->
              <!--<i class="el-icon-datau-tubiao1"></i>-->
              <!--<span>图表配置</span>-->
            <!--</template>-->
            <!--<el-menu-item index="graph-type" route="/graph/type"   class="menu-level2">分类管理</el-menu-item>-->
            <!--<el-menu-item index="graph-manage" route="/graph/manage"  class="menu-level2">图表管理</el-menu-item>-->
          <!--</el-submenu>-->

          <!--<el-submenu index="chart" class="menu-level1">-->
            <!--<template slot="title">-->
              <!--<i class="el-icon-datau-tubiao1"></i>-->
              <!--<span>图表配置</span>-->
            <!--</template>-->
            <!--<el-menu-item index="chart-type" route="/chart/type"   class="menu-level2">分类管理</el-menu-item>-->
            <!--<el-menu-item index="chart-manage" route="/chart/manage"  class="menu-level2">图表管理</el-menu-item>-->
          <!--</el-submenu>-->
          <!--<el-submenu index="topic" class="menu-level1">-->
            <!--<template slot="title">-->
              <!--<i class="el-icon-datau-tubiao1"></i>-->
              <!--<span>专题配置</span>-->
            <!--</template>-->
            <!--<el-menu-item index="chart-manage" route="/topic/manage"  class="menu-level2">专题管理</el-menu-item>-->
          <!--</el-submenu>-->
        </el-menu>
      </el-aside>
      <el-container>
        <router-view class="main-body"/>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
  /**
   * 本页负责整体布局控制及左侧菜单展示
   *
   *  version = "1.0.0";
   *  author = "徐飞";
   *  email = "xu.fei@data-u.com";
   * */
  import headerComponent from '@/components/header-component'
  import { mapGetters, mapState } from 'vuex'
  export default {
    name: 'App',
    components: { headerComponent },
    data () {
      return {
        defaultMenuIndexs: ['data-database','data-meta','collection-task','collection-check','kpi-manage','kpi-theme','report-manage','report-type','graph-type','graph-manage'],
        defaultActive: 'database',
      }
    },
    computed: {
      ...mapState({
        menuInfo: state => state.menu.menuInfo
      }),
      ...mapGetters('user', {
        userName: 'userName',
        userInfo: 'userInfo',
      }),
      theme: {
        get: function(){
          return this.$store.state.user.userInfo.theme || 'white';
        }
      }
    },
    watch:{
      /* 监听树过滤条件 */
      theme(val) {
        this.$nextTick(()=>{
          this.$forceUpdate()
        })
      }
    },
    mounted () {
    },
    methods: {
      go (key) {
        // 路由跳转
        this.$router.push(key)
      },
      handleOpen (key, keyPath) {
        // 菜单展开回调
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
        // 菜单关闭回调
        console.log(key, keyPath)
      }
    },
    created () {
      let path= this.$route.path.split('/').splice(1).join('-')
      this.defaultMenuIndexs.forEach(item=>{
        if(path.indexOf(item)>=0){
          this.defaultActive=item
        }
      })
    }
  }
</script>
