<template>
  <!-- 新增父容器，作为全屏的目标元素（替代子组件的.home-container） -->
  <div class="parent-fullscreen-container" ref="parentContainer">
    <oldIndex
      v-model="taggle"
      v-if="taggle"
      :is-fullscreen="isFullscreen"
      @toggle-fullscreen="handleToggleFullscreen"
    />
    <bigScreen
      v-model="taggle"
      v-if="!taggle"
      :is-fullscreen="isFullscreen"
      @toggle-fullscreen="handleToggleFullscreen"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch ,nextTick} from "vue";
import oldIndex from "@/views/homePage/oldIndex.vue";
import bigScreen from "@/views/everydayPage/bigScreen.vue";

// 1. 组件切换状态（原有逻辑）
const taggle = ref(true);

// 2. 全屏状态（提升到父组件统一管理）
const isFullscreen = ref(false);

// 3. 父容器ref（作为全屏的目标元素）
const parentContainer = ref(null);

// 4. 全屏切换核心方法（修改：目标元素改为父容器）
const handleToggleFullscreen = () => {
  if (!parentContainer.value) return;

  if (isFullscreen.value) {
    // 退出全屏
    if (document.exitFullscreen) document.exitFullscreen();
    else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
    else if (document.msExitFullscreen) document.msExitFullscreen();

    parentContainer.value.style.height = "100%";
    parentContainer.value.classList.remove("fullscreen");
  } else {
    // 进入全屏
    if (parentContainer.value.requestFullscreen)
      parentContainer.value.requestFullscreen();
    else if (parentContainer.value.webkitRequestFullscreen)
      parentContainer.value.webkitRequestFullscreen();
    else if (parentContainer.value.msRequestFullscreen)
      parentContainer.value.msRequestFullscreen();

    parentContainer.value.style.height = "100vh";
    parentContainer.value.classList.add("fullscreen");
  }

  isFullscreen.value = !isFullscreen.value;
};

// 5. 监听浏览器全屏状态变化（统一在父组件处理，移除子组件的重复监听）
const handleFullscreenChange = () => {
  if (!parentContainer.value) return;

  const isDocFullscreen = !!document.fullscreenElement;
  isFullscreen.value = isDocFullscreen;

  // 同步父容器样式
  if (isDocFullscreen) {
    parentContainer.value.style.height = "100vh";
    parentContainer.value.classList.add("fullscreen");
  } else {
    parentContainer.value.style.height = "100%";
    parentContainer.value.classList.remove("fullscreen");
  }

  // 关键：组件切换后，同步子组件的.home-container样式
  const childHomeContainer = document.querySelector(".home-container");
  if (childHomeContainer) {
    childHomeContainer.style.height = isDocFullscreen ? "100vh" : "100%";
    if (isDocFullscreen) {
      childHomeContainer.classList.add("fullscreen");
    } else {
      childHomeContainer.classList.remove("fullscreen");
    }
  }
};

// 6. 监听taggle变化（组件切换），主动同步全屏状态到新组件
watch(taggle, () => {
  // 组件切换后，等待DOM渲染完成
  nextTick(() => {
    const childHomeContainer = document.querySelector(".home-container");
    if (childHomeContainer && isFullscreen.value) {
      // 保持全屏样式
      childHomeContainer.style.height = "100vh";
      childHomeContainer.classList.add("fullscreen");
    }
  });
});

// 7. 监听窗口大小变化（可选，优化全屏体验）
const handleResize = () => {
  window.dispatchEvent(new CustomEvent("echarts-resize"));
  // 全屏时强制同步样式
  if (isFullscreen.value && parentContainer.value) {
    parentContainer.value.style.height = "100vh";
    const childHomeContainer = document.querySelector(".home-container");
    if (childHomeContainer) childHomeContainer.style.height = "100vh";
  }
};

// 生命周期：绑定/解绑事件
onMounted(() => {
  window.addEventListener("fullscreenchange", handleFullscreenChange);
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("fullscreenchange", handleFullscreenChange);
  window.removeEventListener("resize", handleResize);
});
</script>

<style scoped lang="less">
/* 父容器样式：默认占满屏幕 */
.parent-fullscreen-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 全屏样式（作用于父容器） */
:deep(.fullscreen) {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  overflow: hidden;
}

/* 子组件的.home-container继承父容器的全屏样式 */
:deep(.home-container) {
  width: 100%;
  height: 100%;
}
</style>
