<template>
  <a-layout-content class="work-area customer-scrollbar relative">
    <div class="h-full" :class="{ 'p-3': $route.path.indexOf('maIframe') === -1 }">
      <a-watermark :content="appStore.waterMark ? appStore.waterContent : ''">
        <router-view v-slot="{ Component }">
          <transition :name="appStore.animation" mode="out-in">
            <keep-alive :include="keepStore.keepAlives">
              <component :is="Component" :key="$route.name" v-if="keepStore.show" />
            </keep-alive>
          </transition>
        </router-view>
      </a-watermark>
      <iframe-view />
    </div>
  </a-layout-content>
</template>

<script setup>
import { useAppStore, useKeepAliveStore, useTagStore } from '@/store'
import { useRoute } from 'vue-router'
import { onMounted, watch } from 'vue'
import IframeView from './components/iframe-view.vue'

const appStore = useAppStore()
const keepStore = useKeepAliveStore()
const tagStore = useTagStore()
const route = useRoute()

// 检查并添加当前路由到keepAlives的函数
const checkAndAddToKeepAlive = () => {
  const currentTag = tagStore.tags.find((tag) => tag.path === route.path)
  if (currentTag && !keepStore.keepAlives.includes(currentTag.name)) {
    keepStore.addKeepAlive(currentTag)
  }
}

// 在组件挂载时检查
onMounted(() => {
  checkAndAddToKeepAlive()
})

// 监听路由变化
watch(
  () => route.path,
  () => {
    checkAndAddToKeepAlive()
  }
)
</script>
