<script setup lang="ts">
import { onActivated, onMounted, ref } from 'vue';
import { getSelectMenu } from '@/service/api';
import NotFound from '@/views/_builtin/404/index.vue'; // 引入 404 组件

interface Props {
  url: string;
  // eslint-disable-next-line vue/prop-name-casing, vue/no-unused-properties
  kvid: string;
  type: string;
}

const { url, kvid, type } = defineProps<Props>();
const selectTag = ref(''); // 定义响应式变量
const hasError = ref(false); // 标志位，用于指示是否发生错误

onMounted(() => {
  // console.log('mounted');
});

onActivated(async () => {
  // console.log('activated');
  const origin = window.location.origin;
  origin.split('/').slice(0, 3).join('/');

  // const origin = 'http://localhost:80';
  if (type === 'System') {
    if (url.startsWith('App')) {
      selectTag.value = `${origin}/extjs6/classic/${url}`;
    } else {
      selectTag.value = `${origin}/${url}`;
    }
  } else {
    try {
      const { data: selectMenu } = await getSelectMenu(
        `/Restful/Kivii.Basic.Entities.Function/Access.json?MenuKvids=${kvid}`
      );
      if (selectMenu?.Results !== undefined && selectMenu?.Results.length > 0) {
        // eslint-disable-next-line max-depth
        if (selectMenu.Results[0].Handler !== undefined && selectMenu.Results[0].Handler.slice(0, 1) === '/') {
          selectTag.value = `${origin}${selectMenu.Results[0].Handler}`;
        } else {
          selectTag.value = `${origin}/extjs6/classic/${selectMenu.Results[0].Handler}`;
        }
      } else {
        hasError.value = true; // 设置错误标志位
      }
    } catch (error) {
      hasError.value = true; // 如果请求失败，也设置错误标志位
    }
  }
  // iframeList.value.push(selectTag.value);
  // console.log(iframeList.value)
});
</script>

<template>
  <div class="h-full">
    <iframe v-show="!hasError" id="iframePage" class="size-full" :src="selectTag"></iframe>
    <NotFound v-if="hasError" />
    <!-- 使用引入的 404 组件 -->
  </div>
</template>

<style scoped></style>
