<template>
  <MapContainer />
  <Cesium />
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import MapContainer from './components/MapContainer.vue'; 
import Cesium from './components/Cesium/CesiumViewer.vue'
import autofit from 'autofit.js';
import { elRectification } from 'autofit.js'

// 初始化自动适配（Vue3组合式API写法）
const initAutoFit = () => {
  autofit.init({
    designWidth: 1920,
    designHeight: 1080,
    el: '#app',
    resize: true,
    unit: 'px',
    debug: false,
    maxWidth: 1920,
    maxHeight: 1080,
    minFontSize: 12,
    fontScale: true  // 启用字体缩放
  });
};


// 生命周期钩子
onMounted(() => {
  initAutoFit();
  // elRectification("#cesiumContainer");
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});

// 防抖处理resize事件
const handleResize = () => {
  if (typeof autofit === 'undefined') {
    console.error('autofit is not defined');
    return;
  }
  // 确保autofit对象有resize方法
  if (typeof autofit.resize === 'function') {
    autofit.resize();
  } else {
    console.error('autofit.resize is not a function');
  }
};

</script>

<style>
/* 必须添加的根容器样式 */
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
</style>