<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;

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

/**
 * 设置REM单位
 * 根据窗口宽度动态计算根元素font-size
 */
const setRemUnit = () => {
  const { designWidth, baseSize } = REM_CONFIG;
  // 获取当前窗口宽度
  const windowWidth = window.innerWidth;
  // 计算缩放比例
  const scale = windowWidth / designWidth;
  // 设置根元素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);
});

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

<template>
  <div class="wrapper">


      <!-- cesium容器 -->
    <div class="cesium-container">
      <div id="cesiumContainer"></div>
      <header class="cesiumcontainer_top slide-in-top"></header>
      <h2 class="header_date">
        <NIcon size="40" @click="navTo">
          <svg
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 512 512"
            enable-background="new 0 0 512 512"
            xml:space="preserve"
          >
            <g>
              <path
                d="M413.967,276.8c1.06-6.235,1.06-13.518,1.06-20.8s-1.06-13.518-1.06-20.8l44.667-34.318
      c4.26-3.118,5.319-8.317,2.13-13.518L418.215,115.6c-2.129-4.164-8.507-6.235-12.767-4.164l-53.186,20.801
      c-10.638-8.318-23.394-15.601-36.16-20.801l-7.448-55.117c-1.06-4.154-5.319-8.318-10.638-8.318h-85.098
      c-5.318,0-9.577,4.164-10.637,8.318l-8.508,55.117c-12.767,5.2-24.464,12.482-36.171,20.801l-53.186-20.801
      c-5.319-2.071-10.638,0-12.767,4.164l-42.549,71.765c-2.119,4.153-1.061,10.399,2.129,13.518L96.97,235.2
      c0,7.282-1.06,13.518-1.06,20.8s1.06,13.518,1.06,20.8l-44.668,34.318c-4.26,3.118-5.318,8.317-2.13,13.518L92.721,396.4
      c2.13,4.164,8.508,6.235,12.767,4.164l53.187-20.801c10.637,8.318,23.394,15.601,36.16,20.801l8.508,55.117
      c1.069,5.2,5.318,8.318,10.637,8.318h85.098c5.319,0,9.578-4.164,10.638-8.318l8.518-55.117c12.757-5.2,24.464-12.482,36.16-20.801
      l53.187,20.801c5.318,2.071,10.637,0,12.767-4.164l42.549-71.765c2.129-4.153,1.06-10.399-2.13-13.518L413.967,276.8z
      M255.468,328.8c-41.489,0-74.46-32.235-74.46-72.8s32.971-72.8,74.46-72.8s74.461,32.235,74.461,72.8S296.957,328.8,255.468,328.8
      z"
              ></path>
            </g>
          </svg>
        </NIcon>
      </h2>
    </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 />
      <!-- <LeftDeviceStatus />
      <LeftDeviceStatus /> -->
      <!-- <LeftRainfallTrend />
      <LeftOnlineMonitor /> -->
    </div>
  </transition>

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

<style scoped lang="scss">

.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: contain;
}
.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: .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: 5.1rem; /* 与左侧模块宽度一致 */

  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: 5.1rem; /* 与左侧模块宽度一致 */
  background-image: url('@/assets/jinrun/toggle-right.png');

  }
   &.right-toggle:hover {
  background-image: url('@/assets/jinrun/toggle-right_click.png');

  }
  
  
  &.collapsed {
    &.left-toggle {
      left: .55rem;
      border-radius: 0 10px 10px 0;
    }
    
    &.right-toggle {
      right: .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: 1rem;
  margin-left: 0.4rem;
  position: absolute;
}

.left-modules{
  left: 0;
}
.right-modules{
  right: 0;
}

.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;
}
</style>