<template>
  <div class="wrapper">
    <div
      class="top-toolbar"
      style="display: flex; align-items: center; justify-content: space-around"
    >
      <span class="baojing">声光报警</span>
      <n-switch v-model:value="active" />
      <i class="split-line"></i>
      <span class="houtaiguanli"  @click="navTo">后台管理</span>
    </div>
    <!-- cesium容器 -->
    <div class="cesium-container">
      <div id="cesiumContainer"></div>
      <header class="cesiumcontainer_top slide-in-top"></header>
    </div>
  </div>
  <!-- 地图结束 -->

  <!-- <div class="top">
  <img src="@/assets/jinrun/title.png" alt="" srcset="">
</div> -->
  <div class="top">
    <div class="first-image">
      <img src="@/assets/jinrun/top.png" alt="" srcset="" />
      <div class="second-icon">
        <img src="@/assets/jinrun/title.png" alt="" />
      </div>
    </div>
  </div>
  <div class="bottom"></div>
  <div class="left"></div>
  <div class="right"></div>

  <!-- 非地图相关 开始 -->

  <!-- 左侧收起按钮 -->
  <div
    class="toggle-btn left-toggle"
    :class="{ collapsed: !isLeftModulesVisible }"
    @click="toggleBothModules"
  >
    <div class="btn-arrow1">
      <div>
        <img
          :src="isLeftModulesVisible ? arrowLeftImg : arrowRightImg"
          alt=""
          srcset=""
        /><br />
        <span class="arrow-font">{{ isLeftModulesVisible ? "收" : "展" }}</span>
        <br />
        <span class="arrow-font">{{ isLeftModulesVisible ? "起" : "开" }}</span>
      </div>
    </div>
  </div>

  <!-- 右侧收起按钮 -->
  <div
    class="toggle-btn right-toggle"
    :class="{ collapsed: !isRightModulesVisible }"
    @click="toggleBothModules"
  >
    <!-- <div class="btn-arrow1"><img src="@/assets/jinrun/arrow-right.png" alt="" srcset=""><br>收<br>起</div> -->
    <div class="btn-arrow1">
      <div>
        <img
          :src="isLeftModulesVisible ? arrowRightImg : arrowLeftImg"
          alt=""
          srcset=""
        /><br />
        <span class="arrow-font">{{ isLeftModulesVisible ? "收" : "展" }}</span>
        <br />
        <span class="arrow-font">{{ isLeftModulesVisible ? "起" : "开" }}</span>
      </div>
    </div>
  </div>

  <!-- 左侧模块容器 -->
  <transition name="slide-left">
    <div class="left-modules" v-show="isLeftModulesVisible">
      <LeftDeviceStatus />
      <LeftRainfallTrend />
      <LeftOnlineMonitor />
    </div>
  </transition>

  <!-- 右侧模块容器 -->
  <transition name="slide-right">
    <div class="right-modules" v-show="isRightModulesVisible">
      <RightAiWarning />
      <RightEnvMonitor />
      <RightTodayAlarm />
    </div>
  </transition>
  <!-- 非地图相关 结束 -->
</template>



<script setup lang="ts">
import { ref } from "vue";
import { onMounted, onUnmounted } from "vue";
import * as Cesium from "cesium";
import "../../../../Cesium/Widgets/widgets.css";

// 引入拆分的组件
// import LeftDeviceStatus from '@/components/MineMonitor/LeftDeviceStatus.vue';

let viewer: Cesium.Viewer | null = null;

const active = ref(false);

// REM自适应配置
const REM_CONFIG = {
  // 设计稿尺寸
  designWidth: 1920,
  designHeight: 1080,
  // 基准值：1rem = 100px
  baseSize: 100,
};

/**
 * 设置REM单位
 * 根据窗口宽度和高度动态计算根元素font-size
 * 取宽度和高度缩放比例的最小值，确保内容完整显示
 */
const setRemUnit = () => {
  const { designWidth, designHeight, baseSize } = REM_CONFIG;
  // 获取当前窗口尺寸
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;
  
  // 计算宽高缩放比例
  const scaleX = windowWidth / designWidth;
  const scaleY = windowHeight / designHeight;
  
  // 取较小的缩放比例以适应屏幕，确保内容不会被裁剪
  const scale = Math.min(scaleX, scaleY);
  
  // 设置根元素font-size，确保最小为50px（可选）
  const fontSize = Math.max(baseSize * scale, 50);
  document.documentElement.style.fontSize = `${fontSize}px`;
};

// 控制左右模块显示状态的响应式变量
const isLeftModulesVisible = ref(true);
const isRightModulesVisible = ref(true);

// 切换左侧模块显示状态
const toggleLeftModules = () => {
  isLeftModulesVisible.value = !isLeftModulesVisible.value;
};

// 切换右侧模块显示状态
const toggleRightModules = () => {
  isRightModulesVisible.value = !isRightModulesVisible.value;
};

// 切换两侧模块显示状态
const toggleBothModules = () => {
  isLeftModulesVisible.value = !isLeftModulesVisible.value;
  isRightModulesVisible.value = !isRightModulesVisible.value;
};

// 导入所需的图片资源
import arrowLeftImg from "@/assets/jinrun/arrow-left.png";
import arrowRightImg from "@/assets/jinrun/arrow-right.png";

onMounted(() => {
  // 配置Cesium资源路径
  window.CESIUM_BASE_URL = "/Cesium";

  // 初始化REM自适应
  setRemUnit();
  // 监听窗口大小变化
  window.addEventListener("resize", setRemUnit);

  // 初始化Cesium地图
  viewer = new Cesium.Viewer("cesiumContainer", {
    // 禁用所有可能导致问题的组件
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    scene3DOnly: false,
    shouldAnimate: false,
    shadows: false,
    terrainProvider: undefined,
    requestRenderMode: true,
    showRenderLoopErrors: false,
  });

  // 隐藏Cesium版权信息
  if (viewer?.cesiumWidget) {
    viewer.cesiumWidget.creditContainer.style.display = "none";
  }

  // 设置初始视角（中国区域）
  viewer?.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(105.0, 35.0, 10000000.0),
    orientation: {
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-90.0),
      roll: 0.0,
    },
  });
});

onUnmounted(() => {
  // 清理Cesium资源
  if (viewer) {
    viewer.destroy();
    viewer = null;
  }

  // 移除窗口大小变化监听
  window.removeEventListener("resize", setRemUnit);

  // 移除html元素style属性中的font-size
  document.documentElement.style.fontSize = '';
});

const navTo = () => {
  window.location.href = "/home";
};
</script>



<style scoped lang="scss">
.top-toolbar {
  position: absolute;
  top: .5rem;
  right: 0.3rem;
  width: 3rem;
  height: 0.3rem;
  color: #11e0ff;
  // background-color: #fff;
  z-index: 99999;
  .split-line {
    width: 0.03rem;
    height: 0.36rem;
    background: #11e0ff;
  }
  .baojing {
    position: relative;
    padding-left: 25px; // 为背景图片留出空间
    display: block;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      background-image: url("@/assets/jinrun/baojing.png"); // 替换为实际的图片路径
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  .houtaiguanli {
    position: relative;
    padding-left: 25px; // 为背景图片留出空间
    display: block;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      background-image: url("@/assets/jinrun/houtai.png"); // 替换为实际的图片路径
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
}

.top,
.bottom,
.left,
.right {
  position: absolute;
  background-repeat: no-repeat;
}
// .top {
//   top: 0;
//   width: 100%;
//   height: 1.25rem;
//   background-image: url('@/assets/jinrun/top.png');

// }
.top {
  top: 0;
  width: 100%;
  height: 1.25rem;
  position: absolute;

  .first-image {
    width: 100%;
    height: 100%;
    // background-image: url('@/assets/jinrun/top.png');
    // background-repeat: no-repeat;
    // background-size: cover;
    position: relative;

    .second-icon {
      // background-image: url('@/assets/jinrun/title.png');
      // background-repeat: no-repeat;
      // background-size: contain;
      // background-position: center;
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 5.04rem; /* 可根据实际需要调整大小 */
      height: 0.54rem; /* 可根据实际需要调整大小 */
    }
  }
}
.bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.4rem;
  // height: 0.52rem;
  background-image: url("@/assets/jinrun/bottom.png");
  background-size: cover;
}
.left {
  top: 0rem;
  left: 0;
  width: 264px;
  // height: 11.8rem;
  // height: 1080px;
  // height: 9.4rem;
  height: calc(100vh);
  background-size: contain;
  background-position-x: left;

  background-image: url("@/assets/jinrun/left.png");
}
.right {
  top: 0rem;
  right: 0;
  // right: -34px;
  width: 264px;
  // height: 11.8rem;
  // height: 1080px;
  // height: 9.4rem;
  height: 100vh;

  background-image: url("@/assets/jinrun/right.png");
  background-size: contain;
  background-position-x: right;
}

// 收起按钮样式
.toggle-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.71rem;
  height: 1.87rem;
  // background: rgba(0, 138, 255, 0.8);
  background-image: url("@/assets/jinrun/toggle-left.png");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &.left-toggle {
    // left: 4.65rem; /* 与左侧模块宽度一致 */
    left: 5rem; /* 与左侧模块宽度一致 */

    background-image: url("@/assets/jinrun/toggle-left.png");
  }
  &.left-toggle:hover {
    background-image: url("@/assets/jinrun/toggle-left_click.png");
  }

  &.right-toggle {
    // right: 4.65rem;; /* 与右侧模块宽度一致 */
     right: 5rem; /* 与左侧模块宽度一致 */
    background-image: url("@/assets/jinrun/toggle-right.png");
  }
  &.right-toggle:hover {
    background-image: url("@/assets/jinrun/toggle-right_click.png");
  }

  &.collapsed {
    &.left-toggle {
      left: 0.55rem;
      border-radius: 0 10px 10px 0;
    }

    &.right-toggle {
      right: 0.55rem;
      border-radius: 10px 0 0 10px;
    }
  }

  .btn-arrow1 {
    img {
      width: 0.18rem;
      // height: 0.21rem;
      // margin-bottom:.1rem;
      // margin-bottom: -.15rem;
    }
  }

  .btn-arrow {
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transition: transform 0.3s ease;

    &::before {
      content: "";
      position: absolute;
      width: 2px;
      height: 10px;
      background: #fff;
      top: -4px;
      right: 4px;
    }
  }

  &.left-toggle .btn-arrow {
    transform: rotate(135deg);
  }

  &.right-toggle .btn-arrow {
    transform: rotate(-45deg);
  }

  &.collapsed {
    &.left-toggle .btn-arrow {
      transform: rotate(-45deg);
    }

    &.right-toggle .btn-arrow {
      transform: rotate(135deg);
    }
  }

  &:hover {
    // background: rgba(0, 138, 255, 1);
  }
}

// 左侧模块滑动动画
.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.slide-left-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
‘

// 右侧模块滑动动画
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.slide-right-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.slide-right-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

// 当模块隐藏时调整收起按钮位置
.left-modules:not(.v-enter-active):not(.v-leave-active)
  ~ .left-toggle:not(.collapsed) {
  left: 0;
  border-radius: 0 10px 10px 0;
}

.right-modules:not(.v-enter-active):not(.v-leave-active)
  ~ .right-toggle:not(.collapsed) {
  right: 0;
  border-radius: 10px 0 0 10px;
  background: pink;
}

.left-modules,
.right-modules {
  width: 4.6rem;
  // background: pink;
  // margin-top: .6rem;
  padding-top: .95rem;
  position: absolute;
}

.left-modules {
  left: 0;
  margin-left: 0.4rem;

}
.right-modules {
  right: 0;
  margin-right: 0.4rem;

}

.arrow-font {
  color: #fff;
  font-size: 0.18rem;
}

// 地图相关

.cesium-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

#cesiumContainer {
  width: 100%;
  height: 100%;
}

.cesiumcontainer_top {
  background: url("/src/assets/bg_top.png") no-repeat;
  background-size: 100% 100%;
  height: 90px;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 9;
}

.header_date {
  height: 39px;
  cursor: pointer;
  position: absolute;
  top: 22px;
  right: 30px;
  z-index: 100000;
  color: #fff;
  font-size: 21px;
  font-weight: 550;
  display: flex;
  align-items: center;
}

// 添加全局样式以防止页面出现滚动条
html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
</style>