<!-- 右边第三行：视图容器 -->
<template>
    <div>
        <div class="view-vessel">
            <router-view v-slot="{ Component }">
                <transition :name="themeStore.switchMode">
                    <keep-alive :include="appStore.viewNameList">
                        <component :is="Component" :key="$route.name" class="a-view" ref="curr-view" v-if="state.isShow" />
                    </keep-alive>
                </transition>
            </router-view>
        </div>
    </div>
</template>

<script setup name="nav-view-vessel">
import {useAppStore} from "../../store/app";
import {useThemeStore} from "../../store/theme";
import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {arrayDelete} from "../../router/router-util";
import mitt from "@/mitt";
import {useComStore} from "../../store/com";
const appStore = useAppStore();
const themeStore = useThemeStore();
const comStore = useComStore();
const route = useRoute();
const { proxy } = getCurrentInstance();

// 刷新视图
const state = reactive({
    isShow: true
})

const f5View = function (){
    state.isShow = false;
    arrayDelete(appStore.viewNameList, route.name);
    nextTick(function (){
        state.isShow = true;
        appStore.viewNameList.push(route.name);
    })
}

defineExpose({
    f5View
})

onMounted(() => {
    comStore.currViewFunction = function (){
        return proxy.$refs['curr-view'];
    }
})

// 订阅事件：刷新当前视图
mitt.off('f5CurrView');
mitt.on('f5CurrView', data => {
    f5View();
});

</script>

<style scoped>

.view-vessel{width: 100%; height: 100%; position: relative; overflow: hidden; border: 0px #000 solid;}
.a-view{width: 100%; height: 100%; /*background-color: #FFF; */overflow: auto;}

/*.a-view>iframe{width: 100%; height: 100%; border: 0px #000 solid;}*/
/*.a-view>.vue-com-view{width: 100%; height: 100%; overflow: auto; background-color: #EEE;}*/

/* .iframe-no-scroll{width: calc(100% + 22px); } */

</style>
