<template>
  <div>
      <el-container>
          <v-header></v-header>
        <el-main>
          <ToTopTool v-if="!$route.meta.noToTop" :items="toolitems"></ToTopTool>
          <div class="containerWidth header_m_top_112">
              <div class="breadc" v-show="breadcrumb && breadcrumb.length>0">
                  <com-breadcrumb :breadcrumb="breadcrumb"></com-breadcrumb>
              </div>
             <div class="mainContent">
                <div class="alideBox asideWidth" v-show="!hideSidebar">
                    <v-aside></v-aside>
                </div>
                <div class="main" :style="(hideSidebar && isBackTran)?'background-color:transparent':''">
                  <keep-alive>
                      <router-view v-if="$route.meta.keepAlive" class="router-view">
                      </router-view>
                  </keep-alive>
                    <router-view v-if="!$route.meta.keepAlive"></router-view>
                </div>
             </div>


          </div>
         </el-main>
          <el-footer>
            <v-footer> </v-footer>
          </el-footer>
      </el-container>

  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
import vHeader from './Header'
import vAside from './Aside'
import vFooter from './Footer'
import comBreadcrumb from "./Breadcrumb";
import ToTopTool from "@/components/ToTopToolScroll";
export default {
  name: 'home',
  data () {
    return {
      toolitems: [
        // {name:'品牌管理员',icon:'el-icon-service'},
        {name:'反馈',icon:'el-icon-edit-outline'},
      ],
      breadcrumb: [],
      hideSidebar:true,
      isBackTran:true //背景色透明
    }
  },
   watch:{
        '$route'(e){

            this.breadcrumb = e.meta.breadcrumb;
            this.hideSidebar = e.meta.hideSidebar == true?true:false; //路由监听sidebar是否显示
            this.isBackTran = e.meta.isBackTran == true?true:false;
            // console.log(e)
        }
    },
  computed:{
      ...mapState("navBar",['collapse','actNavItem']),

    },
    created(){
        this.hideSidebar = this.$route.meta.hideSidebar == true?true:false
        this.breadcrumb = this.$route.meta.breadcrumb;
         this.isBackTran = this.$route.meta.isBackTran == true?true:false;
            // console.log('ce',this.$route)
      this.getState()
    },
  mounted() {
    // 时间钩子

  },
  methods:{
    // 执行方法
        ...mapMutations("navBar",['clickNavItem']),

     getState(){
       let dd = JSON.parse(sessionStorage.getItem('state'));
       this.clickNavItem(dd.actNavItem)
     }
  },
  components:{
    // 传入组件
    vHeader,vAside,comBreadcrumb,vFooter,ToTopTool
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-footer{
  padding: 0;
}
/deep/ .el-table th.is-leaf {
  background: #f4f7f9;
}
.breadc{
  padding-bottom: 20px;
}
.mainContent{
  min-height: calc(100vh - 166px - 80px);
  display: flex;
  justify-content : space-between;
  .alideBox{
     min-height: 100%;
    // border:1px solid #ccc;
    background-color: #fff;
    margin-right: 10px;
  }
  .main{
    background-color: #fff;
    width: 100%;
  }
}

</style>
