<template>
  <section class="app-container" >
    <router-view v-slot="{ Component, route }">
      <keep-alive :include="tagsViewStore.cachedViews">
        <component :is="Component" :key="route.fullPath"/>
      </keep-alive>
    </router-view>
    
    <!-- iframe页 -->
    <ExtView v-show="currentRoute.meta.external" :currentRoute="currentRoute" :refreshPage="refreshPage"></ExtView>

    <el-backtop target=".app-container" :right="30" :bottom="5" :visibility-height="50" />
  </section>
</template>

<script setup lang="ts">
import { useTagsViewStore } from "@/framework/store/modules/tagsView";
import ExtView from "@/framework/views/ext/morePage.vue";
import { useRouter } from 'vue-router';
import { useRoutesStore } from "@/framework/store/modules/routes";

const tagsViewStore = useTagsViewStore();

const routesStore = useRoutesStore();

const currentRoute=ref()
const refreshPage=ref(false)
let router = useRouter()
watch(
  () => router,
  (newValue) => {
    
    const fullPath = newValue.currentRoute.value.fullPath
    const menuPath = newValue.currentRoute.value.matched[0].path
    const activeRoute = routesStore.routes.find((item: any) => item.path === menuPath)

    if(currentRoute.value&&(fullPath===(menuPath+ '/' + currentRoute.value.path))){
      refreshPage.value=true;
    }else{
      refreshPage.value=false;
    }
    
    if (activeRoute) {
      activeRoute.children.forEach((o: any) => {
        if (fullPath == ( menuPath + '/' + o.path)) {
          currentRoute.value=o
        }
      });
    }
  },
  { immediate: true, deep: true }
);

</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  padding-top: 16px;
  // min-height: calc(100vh - 64px);
  background-color: #f4f4f4;
  margin-top: 10px;
}

.fixed-tags+.app-container {
  // min-height: 100vh;
  padding-top: 40px;
}
</style>
