<script setup lang="ts">
import { computed, onActivated, onDeactivated, onMounted, ref } from 'vue';
import { useAppStore } from '@/store/modules/app';
import IframePage from '@/views/_builtin/iframe-page/[url].vue';

const appStore = useAppStore();
// 控制组件显示状态的变量
const isActive = ref(true);
const extjsContainerId = `menuRoot-${Math.random().toString(36).substr(2, 9)}`;

// 设置默认的自动启动项，直接加载chat-component.vue
const autoStartProps = ref({
  type: 'System',
  kvid: 'chat-default',
  url: 'chat-component.vue'
});

// 添加 extjs-root 就绪状态
const isExtjsRootReady = ref(false);

// 检查 extjs-root 是否存在
const checkExtjsRoot = () => {
  const extjsRoot = document.getElementById('extjs-root');
  isExtjsRootReady.value = Boolean(extjsRoot);
  if (!extjsRoot) {
    setTimeout(checkExtjsRoot, 100); // 继续检查
  }
};

onMounted(() => {
  checkExtjsRoot();
  isActive.value = true;
});

onActivated(() => {
  isActive.value = true;
});

onDeactivated(() => {
  isActive.value = false;
});

const gap = computed(() => (appStore.isMobile ? 0 : 16));
</script>

<template>
  <NSpace vertical :size="16">
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:14">
        <!-- <ProjectNews /> -->
      </NGi>
      <NGi span="24 s:24 m:10">
        <!-- <CreativityBanner /> -->
      </NGi>
    </NGrid>
    <!-- 默认加载 chat-component.vue，通过 IframePage 加载 -->
    <template v-if="isExtjsRootReady">
      <div v-show="isActive" :id="extjsContainerId" style="width: 100%; height: 100%">
        <IframePage :type="autoStartProps.type" :kvid="autoStartProps.kvid" :url="autoStartProps.url" />
      </div>
    </template>
  </NSpace>
</template>

<style scoped></style>
