<template>
  <div class="iframe-container" ref="container">
    <div class="overlay" :style="{ height: overlayHeight }" ></div>
    <IFrame ref="ifr" :src="src" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import * as ConfigApi from '@/api/infra/config';

const container = ref<HTMLElement | null>(null);
const overlayHeight = ref<String>('8%'); // 初始遮罩高度

// 监听容器大小变化
useResizeObserver(container, () => {
  updateOverlayHeight(); // 在容器大小变化时更新遮罩高度
});

const updateOverlayHeight = () => {
  if (container.value) {
    const containerHeight = container.value.clientHeight;
    if(containerHeight > 700){
      overlayHeight.value = `${containerHeight / 13}px`; // 或者根据需要计算高度百分比
    }else if(containerHeight <= 700){
      overlayHeight.value = `${containerHeight / 10}px`; // 或者根据需要计算高度百分比
    }
  }
};


defineOptions({ name: 'Analysis' });
let src = ref('')
const ifr = ref(null); // 初始化


onMounted(async () => {
  const url = await ConfigApi.getConfigKey('jupyter.url')
  src.value =  url + '?cb=' + new Date().getTime();
  updateOverlayHeight(); // 初始化时更新遮罩高度
})

</script>

<style scoped>
.iframe-container {
  position: relative;
  width: 100%;
  height: 100%;
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 1); /* 半透明黑色背景 */
  z-index: 10; /* 确保遮罩在 iframe 上方 */
}
</style>