<template>

  <section class="portal-app-main">
    <div name="fade-transform" mode="out-in">
      <div id="qiankunapp" v-show="$route.path.startsWith('/dashboard') || $route.path.startsWith('/profile/password')" >
        <keep-alive>
          <router-view :key="key" />
        </keep-alive>
      </div>

       <div id="qiankunapp1" v-show="$route.path.startsWith('/report')">
  <keep-alive>
        <router-view :key="key"/>
      </keep-alive>
  </div>
    <div id="qiankunapp2" v-show="$route.path.startsWith('/jzmall')">
  <keep-alive>
        <router-view :key="key"/>
      </keep-alive>
    </div>
     <div id="qiankunapp3" v-show="$route.path.startsWith('/worker')">
  <keep-alive>
        <router-view :key="key"/>
      </keep-alive>
    </div>
     <div id="qiankunapp4" v-show="$route.path.startsWith('/customer')">
  <keep-alive>
        <router-view :key="key"/>
      </keep-alive>
    </div>

    </div>
    <!-- <router-view :key="key" v-if="$route.meta.keepAlive==null||$route.meta.keepAlive==false" /> -->
    <!--指定缓存-->
    <!-- <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive> -->

  </section>

</template>

<script>
import { start } from 'qiankun';
export default {
  name: 'AppMain',

  computed: {
    cachedViews() {
      console.info(this.$route)
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.fullPath
    }
  },
  mounted() {
    if (!window.qiankunStarted) {
      window.qiankunStarted = true;
      start({ sandbox: { experimentalStyleIsolation: true } });
    }
  },
}
</script>

<style lang="scss" scoped>
.portal-app-main {
  /* 50= navbar  50  */
  // min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 12px;
  background: #F0F2F5;
  // background: #fff;
}

.fixed-header+.app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>
