<!-- MyComponent.vue -->
<script setup lang="ts">
import { nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';

defineOptions({ name: 'ExtJsComponent' });

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

let extComponent: any = null;
// 控制组件显示状态的变量
const isActive = ref(true);
const extjsContainerId = `extjs-${Math.random().toString(36).substr(2, 9)}`;

function initializeExtComponent() {
  extComponent = Ext.create('Ext.panel.Panel', {
    renderTo: extjsContainerId,
    layout: 'fit',
    width: '100%',
    height: '100%',
    hidden: false,
    items: [Ext.create(props.url)]
  });
}

function updateExtComponent(newUrl: string) {
  if (extComponent) {
    // 更新 ExtJS 组件的内容，而不销毁整个组件
    // 获取当前的子组件
    const oldItem = extComponent.items.getAt(0);

    // 移除旧的子组件
    extComponent.remove(oldItem, true); // 第二个参数为 true，表示销毁组件

    // 创建新的子组件
    const newItem = Ext.create(newUrl);

    // 添加新的子组件到面板
    extComponent.add(newItem);
  }
}

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

  if (extComponent) {
    try {
      // 销毁ExtJS组件
      extComponent.destroy();

      // 清空容器
      const container = document.getElementById(extjsContainerId);
      if (container) {
        container.innerHTML = '';
      }
    } catch (e) {
      // console.error('清理ExtJS组件时出错:', e);
    }

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

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

onMounted(() => {
  nextTick(() => {
    if (!extComponent) {
      initializeExtComponent();
    } else {
      extComponent.show();
      isActive.value = true;
    }
  });
});

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

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

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

// 监听 props.url 的变化
watch(
  () => props.url,
  (newUrl, oldUrl) => {
    if (newUrl !== oldUrl) {
      updateExtComponent(newUrl);
    }
  }
);
</script>

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

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