<!--
 * @Author: 曹捷
 * @Date: 2020-04-30 08:36:29
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-17 11:38:03
 * @Description: file content
 -->
<template >
  <a-layout class="app-main" :class="{'h100':sysConfig.breadcrumb.fixed , 'app-table-fixed':sysConfig.table.fixed}">
    <!-- breadcrumbTop false 配置 面包屑在body里面 -->
    <a-layout-header v-if="sysConfig.breadcrumb.position === 'body'"
      :style="{height:sysConfig.breadcrumb.height,'line-height':sysConfig.breadcrumb.height}">
      <div class="body main-bread">
        <breadCrumb class="breadcrumb-container breadcrumb-content" />
      </div>
    </a-layout-header>
    <a-layout-content :class="{'scrollBar':sysConfig.breadcrumb.fixed}">
      <router-view v-slot="{ Component, route }">
        <keep-alive>
          <component :is="Component" :key="route.path" v-if="$route.meta.keepAlive" />
        </keep-alive>
        <component :is="Component" :key="route.path" v-if="!$route.meta.keepAlive" />
      </router-view>
    </a-layout-content>
  </a-layout>

</template>

<script>
import breadCrumb from './../../components/bread-crumb/bread-crumb.vue'
// import { Layout } from 'ant-design-vue'
import { mapGetters } from 'vuex'
export default {
  name: 'AppMain',
  components: {
    breadCrumb
    // ,ALayout:Layout,ALayoutHeader:Layout.Header, ALayoutContent:Layout.Content 
  },
  data () {
    return {
      config: {}
    }
  },
  computed: {
    ...mapGetters('settings', ['sysConfig']),
    key () {
      return this.$route.path
    }
  }
}
</script>

<style   lang="less">
@import url('./../../styles/mixin.less');
.main-bread {
  padding-left: 16px;
}
.app-table-fixed {
  height: 100%;
  .obit-main {
    height: calc(100% - 20px);
    .scrollBar();
    display: flex;
    flex-direction: column;
    .obit-content {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      .ant-table-wrapper {
        flex: 1;
        min-height: 0;
        overflow: auto;
        .scrollBar();
      }
    }
  }
}
</style>

