<template>
  <div id="app">
    <el-config-provider>
      <bg-menu :path="nowParent.path" v-if="menuShow"></bg-menu>
      <div class="container" :class="menuShow ? '' : 'full_screen'" v-if="pageShow">
        <bg-nav :highlightParentRule="highlightParentRule" :title="nowParent.menuName" width="208px" :list="nowParent.children" v-show="navShow" class="con-nav" />
        <div class="bg-main view">
          <router-view />
        </div>
      </div>
      <div class="container" v-else-if="$route.path=='/login'">
        <div class="bg-main view">
          <login></login>
        </div>
      </div>
      <div class="container" v-else-if="$route.path=='/404'">
        <div class="bg-main view">
          <page404></page404>
        </div>
      </div>
    </el-config-provider>
  </div>
</template>

<script>
import bgMenu from '@/components/bg-menu.vue'
import login from '@/page/login/index.vue'
import page404 from '@/page/404.vue'
export default {
  components:{
    bgMenu, 
    login,
    page404,
  },
  computed:{
    msgBoxFlag(){
      return this.$store.state.msgBoxFlag
    },
    userInfo() {
      return this.$store.state.userInfo || {};
    },
    navMenu(){
      return this.$store.state.menu
    },
    menuObj(){
      return this.$store.state.menuObj
    },
    navShow(){
      return false||!['/404','/login'].includes(this.$route.path)
    },
    pageShow(){
      return false||!['/404','/login'].includes(this.$route.path)
    },
    rowPath(){
      if(this.pageShow&&this.$store.state.userInfo){
        return this.menuObj[this.$route.path].rowPath
      }else{
        return ''
      }
    },
    nowParent(){
      if(this.pageShow&&this.$store.state.userInfo){
        // return this.navMenu[this.rowPath.slice(1,4)]
        // return this.pathToData(this.navMenu,this.rowPath)
        return this.navMenu[1]
      }else{
        return ''
      }
    },
    menuShow() {
      return false||!["/ui-example"].includes(this.$route.path)
    }
  },
  watch:{
    msgBoxFlag(n,o){
      this.readFlag = !this.readFlag
    }
  },
  data(){
    return{
      readFlag:false,
      menuIndex:'',
    }
  },
  created(){
    
  },
  methods:{
    pathToData(data,path){
      
      let arr = path.split('.')
      let temp = null
      let tempName = ''
      let tempPath = ''
      arr.forEach((e,idx) => {
       
        if(idx==1){
          temp = data[e]
          tempName = data[e].menuName
          tempPath = data[e].path
          data = data[e]
        }
        if(idx==2){
          if(data.children&&data.children.length){
            temp = data.children[e]
            data = data.children[e]
          }
        }
      });
      return {
        menuName:tempName,
        path:tempPath,
        children:[temp]
      }
    },
    highlightParentRule(pathArr){
      return pathArr.includes(this.$route.path)
    },
    ada(){
      console.log(12312);
    }
  }
}
</script>
<style>
#app{
  height: 100%;
}
.container{
  width: 100%;
  height: calc(100% - 56px);
  overflow: hidden;
}
.full_screen {
  height: 100%;
}
.full_screen .bg-main {
  overflow-x: hidden;
}
.con-nav{
  float: left;
}
.view{
  height: 100%;
  overflow-y: auto;
  background-color: #ebedf2;
}
</style>
