<template>
  <section class="app-main">
    <div>
      <breadcrumb :keep-alive-component-instance="keepAliveComponentInstance" class="breadcrumb-container" />
    </div>
    <div ref="keepAliveContainer">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive && isRouterAlive" :key="$route.fullPath"/>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive && isRouterAlive" :key="$route.fullPath"></router-view>
    </div>

  </section>
</template>

<script>
import { setToken } from '@/utils/auth';
import Breadcrumb from './Breadcrumb.vue';
export default {
  name: 'AppMain',
  name: 'Layout',
  components: {
    Breadcrumb
  },
  
  provide () {
    // 父组件中通过provide来提供变量，在子组件中通过inject来注入。
    return {
      reloads: this.reloads
    };
  },
  data() {
    return {
      keepAliveComponentInstance: null,
      isRouterAlive: true
    };
  },
  methods:{
    reloads () {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },

  },
  mounted() {
    setTimeout(() => {
      window.addEventListener('message',function(e){
        if (e.data == 12312312) {
          setToken('');
          sessionStorage.removeItem("route")
          this.$router.push(`/login`);
        }
      },false)
    }, 2000)
    this.keepAliveComponentInstance = this.$refs.keepAliveContainer.childNodes[0].__vue__;

  },
  beforeDestroy() {
    setToken('');
    sessionStorage.removeItem("route")
    this.$router.push(`/login`);
  },
  watch: {
    $route(to, from) {
      const { tagsView } = this.$store.state
      const whiteList = ['/hospital-search', '/hospital-caseViews', '/hospital-details', '/hospital-chargeDetails']
      if (tagsView && tagsView.visitedViews.length) {
        let bSwitch = 1
        tagsView.visitedViews.map(item => {
          if (whiteList.includes(item.path)) {
            bSwitch = 0
          }
        })
        if (bSwitch) {
          sessionStorage.removeItem("jingmiao_token")
          sessionStorage.removeItem("route")
          this.$router.push(`/login`);
        }
      }
    }
  }
};
</script>

<style scoped>
.app-main {
  /*50 = navbar  */
  min-height: calc(100vh - 60px);
  width: 100%;
  position: relative;
  /* overflow: hidden; */
  background: #f4f4f4;
}
.fixed-header + .app-main {
  padding-top: 50px;
}
</style>

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