<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <div class="Mall4j container">
    <el-card
      v-if="route.meta && route.name !== 'Dashboard'"
      class="main-head"
    >
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          v-for="(item,index) in selectMenu"
          :key="index"
          class="breadcrumb-item"
        >
          <span>{{ item }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <section
      class="app-main"
      :style="route.name === 'Dashboard'? style : {}"
    >
      <router-view v-slot="{ Component }">
        <keep-alive :include="cachRouteNameList">
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </section>
  </div>
</template>

<script setup>
import { useIncludeRouterName } from '@/stores/modules/include-router-name.js'
const route = useRoute()
const style = reactive({
  'margin-top': '0'
})
const selectMenu = computed(() => useCommonStore().selectMenu)

const includeRouterName = useIncludeRouterName()
//  需开启缓存的页面route.name
const cachRouteNameList = computed(() => includeRouterName.routerNameList)
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  flex: 1;
  width: 100%;

  .main-head {
    background: #FFFFFF;
    width: 100%;
    height: 40px;
    position: fixed;
    top: 50px;
    z-index: 10;
    display: flex;
    align-items: center;
    border-radius: 0;
    box-shadow: none;
    border-top: none;

    .breadcrumb-item:last-child span {
      color: #155BD4 !important;
    }
  }

  .app-main {
    width: calc(100% - 20px);
    margin-top: 40px;
    position: relative;
    background: #FFFFFF;
    overflow: hidden;
    margin-left: 20px;
  }

}
</style>
