<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
<!--      <keep-alive :include="cachedViews"><router-view :key="key" v-if="$route.name !== 'outLink'" /></keep-alive>-->

      <BaseKeepAlive :include="cachedViews">
        <router-view :key="$route.path" v-if="$route.name !== 'outLink'" />
      </BaseKeepAlive>

    </transition>
    <template v-for="item in outVisitedViews">
      <outLink
        :ref="'ref_'+$route.path"
        :key="item.path"
        v-show="$route.path === item.path"
        v-if="$route.path !== item.path || reflushFlag"
        visible-key="reflushFlag"
        :parent-target="_self"
        @reload="$reloadHandle"
      ></outLink>
    </template>
    <!-- 挂载子应用 开始 -->
    <section id="Appmicro" />
    <!-- 挂载子应用 结束 -->
    <unreadDialog></unreadDialog>
    <watermark></watermark>
  </section>
</template>

<script>
import outLink from '@base/views/user/outLink/index.vue';
import unreadDialog from "../../layout/components/notify_message/unreadDialog.vue";
import watermark from "./watermark";


export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews.filter(item => item != 'outLink');
    },
    key() {
      return this.$route.path;
    },
    outVisitedViews() {
      let visitedViews = this.$store.state.tagsView.visitedViews;
      return visitedViews.filter(visitedView => visitedView.name == 'outLink');
    }
  },
  components: {
    outLink,
    unreadDialog,
    watermark
  },
  data() {
    return {
      rIndex: -1,
      reflushFlag: true
    };
  },
  methods: {
    reflushIframe(path) {
      this.outVisitedViews.findIndex(item => item.full);
    }
  },
  created() {
    this.$baseEventBus.$on("reflushRouteView",(view)=>{
      if(this.$route.name=="outLink"){
        let t = this.$refs["ref_"+this.$route.path][0];
        t.$baseReload();
      }else{
        this.$store.dispatch('tagsView/delCachedView', view).then(() => {
          const { fullPath } = view
          this.$nextTick(() => {
            this.$router.replace({
              path: '/redirect' + fullPath
            })
          })
        })
      }
    })
  }
};
</script>

<style lang="scss" scoped>
.app-main {
  /* 45= navbar  45  */
  min-height: calc(100vh - 45px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

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

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

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

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