<template>
  <el-container>
    <el-aside :width="leftMenuWidth">
      <layout-aside />
    </el-aside>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <layout-header />
      </el-header>
      <!-- 主体 -->
      <div class="app-main">
        <router-view v-slot="{ Component }">
          <transition name="router-fade" mode="out-in">
            <keep-alive v-if="!$route.fullPath.includes('lcProject')">
              <component :is="Component" />
            </keep-alive>
            <component :is="Component" v-else />
          </transition>
        </router-view>
      </div>
    </el-container>
  </el-container>
</template>
<style lang="scss" scoped>
.el-aside {
  background-color: #304156;
  z-index: 2000;
}

.el-header {
  background-color: rgba(0, 0, 0, 0.025);
  padding: 0;
  height: 80px;
}

.app-main {
  height: -moz-calc(100vh - 50px);
  height: -webkit-calc(100vh - 50px);
  height: calc(100vh - 50px);
  background-color: #eff2f9;
  overflow: auto;
}
</style>
<script>
import {
  LayoutAside,
  LayoutHeader
} from '@/components/layout/libs/index'
import {
  mapState
} from 'vuex'
export default {
  name: 'Layout',
  components: {
    'layout-aside': LayoutAside,
    'layout-header': LayoutHeader
  },
  computed: {
    ...mapState('leftAside', {
      leftMenuWidth: (state) => state.leftMenuWidth
    }),
    keyfull () {
      return this.$route.fullPath
    }
  },
  data () {
    return {
      key: this.$route.path,
      keepAlivedComponents: {},

    }
  }
}

</script>
