<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
import { nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';

defineOptions({ name: 'WebviewComponent' });

// 接收一个名为 url 的 prop
const props = defineProps<{
  url: string;
}>();

// 控制组件显示状态的变量
const isActive = ref(true);
// 生成唯一的容器 ID
const extjsContainerId = `webview-${Math.random().toString(36).substr(2, 9)}`;

// 用来存储创建的 iframe 元素引用
let iframeEl: HTMLIFrameElement | null = null;

function initializeExtComponent() {
  const container = document.getElementById(extjsContainerId);
  if (!container) return;

  // 创建 iframe
  iframeEl = document.createElement('iframe');
  iframeEl.style.width = '100%';
  iframeEl.style.height = '100%';
  iframeEl.style.border = 'none';
  iframeEl.src = props.url;

  container.appendChild(iframeEl);
}

function updateExtComponent(newUrl: string) {
  if (iframeEl) {
    // 更新 iframe 的地址
    iframeEl.src = newUrl;
  }
}

// 清理函数 - 完全销毁iframe
function cleanup() {
  // console.log('清理webview资源');

  if (iframeEl) {
    try {
      // 先将src设为空白页，停止所有活动
      iframeEl.src = 'about:blank';

      // 从DOM中移除
      const container = document.getElementById(extjsContainerId);
      if (container && container.contains(iframeEl)) {
        container.removeChild(iframeEl);
      }
    } catch (e) {
      // console.error('清理iframe时出错:', e);
    }

    // 清空引用
    iframeEl = null;
  }
}

// 暴露清理方法给父组件
defineExpose({
  cleanup
});

onMounted(() => {
  nextTick(() => {
    // 初次挂载时创建 iframe
    if (!iframeEl) {
      initializeExtComponent();
    } else {
      isActive.value = true;
    }
  });
});

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

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

onBeforeUnmount(() => {
  // 组件卸载前清理
  cleanup();
});

// 监听 props.url 的变化，当地址变化时更新 iframe 的 src
watch(
  () => props.url,
  (newUrl, oldUrl) => {
    if (newUrl !== oldUrl) {
      updateExtComponent(newUrl);
    }
  }
);
</script>

<template>
  <!-- 使用 Teleport 将容器渲染到组件外部的 extjs-root 中 -->
  <Teleport to="#extjs-root">
    <div v-show="isActive" :id="extjsContainerId" style="width: 100%; height: 100%"></div>
  </Teleport>
</template>

<style scoped>
/* 您的样式代码 */
</style>
