<template>
  <div class="flex-align-center">
    <div class="nav-list">
      <div class="nav-top-item">
        <div class="logo-avatar">
          <img v-show="img.usetype === 'actionlogo'" v-for="img in siteinfo.attinfos" :key="img.index" style="width:100%" :src="img.url" alt="">
        </div>
        <div class="item active" @click="$router.push('/home')">
           <img width="30" src="../../assets/nav_icon/work_station.svg" alt="">
           <p>工作台</p>
        </div>
        <div class="item">
           <img width="30" src="../../assets/nav_icon/work_station.svg" alt="">
           <p>消息</p>
        </div>
      </div>
      <div class="nav-bottom-item">
        <div class="item">
           <img width="30" src="../../assets/nav_icon/more.svg" alt="">
        </div>
      </div>
    </div>
    <el-container>
      <el-header><myheader :siteinfo="siteinfo"></myheader></el-header>
      <div class="modules-panel flex-align-center flex-between">
        <p>{{routerName}}</p>
        <el-button size="mini" @click="$router.go(-1)">返 回</el-button>
      </div>
      <el-container class="mymain">
        <el-aside v-if="ast_nav" width="200px"><myaside></myaside></el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <!-- <el-footer class="flex-footer">
            <p>技术支持:XXXXXXX</p><br>
          </el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import myheader from './modules/header.vue'
import myaside from './modules/aside.vue'
import {mapGetters} from 'vuex'
export default {
  components:{
    myheader,
    myaside
  },
  computed:{
    ...mapGetters({
      siteinfo:'siteinfo'
    })
  },
  data () {
    return {
      routerName:''
    }
  },
  methods:{
    siteInfos () {
      this.$store.dispatch('querySiteInfo',{
        "classname": "webmanage.site.site",
        "method": "querySite",
        "content": {}
      })
    }
  },
  created () {
    this.siteInfos()
    this.routerName = this.$route.meta.title
    this.ast_nav = this.$route.meta.ast_nav
  },
  watch:{
    $route (val) {
      this.routerName = val.meta.title
      this.ast_nav = val.meta.ast_nav
    }
  }
}

</script>
<style>

</style>
<style scoped>
.nav-list{
  flex:0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80px;
  max-width: 80px;
  height: calc(100vh - 30px);
  padding:15px 0;
  background: #3874F6;
}
.logo-avatar{
  width: 50px;
  height: 50px;
  margin: 0 auto 30px auto;
  border-radius: 8px;
  background: #f1f2f3;
  overflow: hidden;
}
.item{
  width: 40px;
  padding: 10px;
  margin:0 auto 20px auto;
  cursor: pointer;
  text-align: center;
  
}
.item p{
  font-size: 10px;
  color: #fff;
  margin-top:5px
}
.active {
  border-radius: 8px;
  background: #095DE0;
}
.item:hover {
  border-radius: 8px;
  background: #095DE0;
  
}
.mymain{
  height: calc(100vh - 99px);
}
.el-header{
  padding: 0;
  border-bottom: 1px solid #f1f2f3;
  z-index: 999;

}
.el-main{
  position: relative;
  padding: 0;
  /* background: #f1f2f3; */
}
.flex-footer{
  display: flex;
  align-items: center;
  justify-content:  center;
  flex-wrap: wrap;
  font-size: 14px;
  color: #999;
  padding: 10px 0;
  border-top:1px solid #f1f2f3;
}
.flex-footer p{
  width: 100%;
  text-align: center;
}
.modules-panel{
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #f1f2f3;
  background: #fff;
}
</style>