<template>
  <div id="cesiumContainer" style="height: 100%;width: 100%;"></div>

  <!-- 控制按钮 -->
  <div class="control-buttons">
    <button class="control-btn" @click="goToHomeView" title="返回首页视角">
      <i class="fas fa-home"></i>
    </button>
    <button class="control-btn" @click="togglePOIDisplay" title="显示/隐藏POI点">
      <i class="fas fa-map-marker-alt" :class="{ 'active': poiVisible }"></i>
    </button>
    <button class="control-btn" @click="handleToggleTyphoon" title="显示/隐藏台风并切换视角">
      <i class="fas fa-wind" :class="{ 'active': typhoonVisible }"></i>
    </button>
    <button class="control-btn" @click="toggleWmsLayer" title="显示/隐藏WMS风暴潮图层">
      <i class="fas fa-layer-group" :class="{ 'active': wmsVisible }"></i>
    </button>
  </div>

  <!-- 时间轴组件：强制渲染 + 最高层级 -->
  <div class="timeline-wrapper">
    <TimeSlider
      title="风暴潮WMS时间轴"
      :start-time="startTime.getTime()"
      :end-time="endTime.getTime()"
      :current-time="currentTime.getTime()"
      :step="timeStep"
      :play-speed="2000"
      @timeChange="handleTimeChange"
    />
  </div>

  <!-- POI/台风组件：保留viewer判断 -->
  <template v-if="viewer">
    <POIVisualization 
      :viewer="viewer" 
      :visible="poiVisible"
      :data="poiData"
      @onPointSelected="handlePointSelected"
    />
    <TyphoonVisualization 
      v-if="typhoonVisible"  
      :viewer="viewer" 
      :visible="typhoonVisible"
      @onToggle="handleTyphoonToggle"
    />
  </template>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as Cesium from 'cesium';
import "cesium/Build/CesiumUnminified/Widgets/widgets.css";
import JYLData from '@/assets/Data/THJYL.json'
import POIVisualization from './POIVisualization.vue';
import TyphoonVisualization from './TyphoonVisualization.vue';
import TimeSlider from './TimeSlider.vue';

// 天地图密钥
const TDTTK = "d9e7aa2ad204aba6aeedea6f5ab48ed9";
let viewer = ref(null);

// WMS核心配置
let wmsLayer = null;
const wmsVisible = ref(true);
// 时间范围：2025102700 ~ 2025110822
const startTime = ref(new Date('2025-10-27T00:00:00'));
const endTime = ref(new Date('2025-11-08T22:00:00'));
const currentTime = ref(new Date('2025-10-27T00:00:00'));
const timeStep = ref(10 * 3600 * 1000); // 10小时步长

// POI/台风状态
const poiVisible = ref(true);
const typhoonVisible = ref(true);
const poiData = ref(JYLData);

// 处理POI选中
const handlePointSelected = (pointData) => {
  console.log('选中的POI点:', pointData);
};

// 返回首页视角
const goToHomeView = () => {
  if (viewer.value) {
    viewer.value.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(121.75, 31.15, 30000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-60),
      },
      duration: 1
    });
  }
};

// 切换POI显示
const togglePOIDisplay = () => {
  poiVisible.value = !poiVisible.value;
};

// 切换台风显示
const handleToggleTyphoon = async () => {
  const newState = !typhoonVisible.value;
  if (!newState) {
    typhoonVisible.value = newState;
  } else {
    typhoonVisible.value = newState;
    await nextTick();
    if (viewer.value) {
      viewer.value.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(120, 20, 4025692.0),
      });
    }
  }
};

// 处理台风组件状态
const handleTyphoonToggle = (newState) => {
  typhoonVisible.value = newState;
};

// 加载/更新WMS图层（带严格类型校验）
const loadWmsLayer = (time) => {
  try {
    if (!viewer.value || !viewer.value.imageryLayers) return;

    // 移除旧图层
    if (wmsLayer && wmsLayer instanceof Cesium.ImageryLayer) {
      viewer.value.imageryLayers.remove(wmsLayer);
      wmsLayer = null;
    }

    // 格式化时间
    const timeStr = time.getFullYear() + 
                    String(time.getMonth() + 1).padStart(2, '0') + 
                    String(time.getDate()).padStart(2, '0') + 
                    String(time.getHours()).padStart(2, '0');

    // 创建WMS提供者（严格校验）
    const wmsProvider = new Cesium.WebMapServiceImageryProvider({
      url: 'http://localhost:8080/geoserver/surge_ws/wms',
      layers: `surge_ws:ZS${timeStr}`,
      parameters: {
        service: 'WMS',
        version: '1.1.0',
        request: 'GetMap',
        format: 'image/png',
        transparent: true,
        srs: 'EPSG:4326'
      },
      // 核心：强制限定图层的地理范围（必须和你WMS图层的实际范围一致）
      rectangle: Cesium.Rectangle.fromDegrees(121.0, 30.5, 122.5, 31.8),
      // 禁用Cesium的自动瓦片拆分，按整个范围出单张图
      tilingScheme: new Cesium.GeographicTilingScheme({
        rectangle: Cesium.Rectangle.fromDegrees(121.0, 30.5, 122.5, 31.8)
      }),
      // 固定瓦片尺寸为图层范围（避免拆分）
      tileWidth: 2048,
      tileHeight: 2048,
      // 限制缩放级别（避免放大后重复请求）
      maximumLevel: 10,
      minimumLevel: 0,
      enablePickFeatures: false

    });

    // 仅当提供者有效时创建图层
    if (wmsProvider) {
      wmsLayer = new Cesium.ImageryLayer(wmsProvider); // 显式创建ImageryLayer
      wmsLayer.alpha = 0.7;
      wmsLayer.show = wmsVisible.value;
      viewer.value.imageryLayers.add(wmsLayer); // 加入图层集合
      console.log(`成功加载WMS图层: surge_ws:ZS${timeStr}`, wmsLayer);
    }
  } catch (error) {
    console.error('加载WMS图层失败:', error);
    wmsLayer = null;
  }
};

// 切换WMS显示/隐藏
const toggleWmsLayer = () => {
  console.log('点击WMS按钮，当前图层状态:', wmsLayer);
  
  if (!wmsLayer) {
    console.log('WMS图层未初始化，加载默认时间图层');
    loadWmsLayer(currentTime.value);
    return;
  }

  wmsVisible.value = !wmsVisible.value;
  wmsLayer.show = wmsVisible.value;
  console.log('WMS图层显示状态:', wmsVisible.value);
};

// 时间轴时间变化响应
const handleTimeChange = (timeStamp) => {
  const newTime = new Date(timeStamp);
  currentTime.value = newTime;
  loadWmsLayer(newTime);
};

onMounted(async () => {
  try {
    // 👉 核心修复1：禁用baseLayer，手动创建底图（避免布尔值冲突）
    viewer.value = new Cesium.Viewer('cesiumContainer', {
      timeline: false,
      baseLayer: false, // 关键：设为false，不自动加载底图
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      navigationHelpButton: false,
      animation: false,
      fullscreenButton: false,
      vrButton: false,
      selectionIndicator: false,
      infoBox: false,
      // 地形加载（保留）
      terrainProvider: await Cesium.createWorldTerrainAsync({
        requestVertexNormals: true,
      })
    });

    // 👉 核心修复2：手动创建天地图底图（确保是ImageryLayer实例）
    if (viewer.value && viewer.value.imageryLayers) {
      const tdtProvider = new Cesium.WebMapTileServiceImageryProvider({
        url: `https://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
        layer: "img",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "w",
        maximumLevel: 16,
        show: true
      });
      // 显式创建ImageryLayer并添加
      const tdtLayer = new Cesium.ImageryLayer(tdtProvider);
      viewer.value.imageryLayers.add(tdtLayer);
    }

    // 加载倾斜摄影瓦片集
    const tilesetUrls = [
      "http://localhost:9003/model/TSQ1234/tileset.json",
      "http://localhost:9003/model/SY123/tileset.json",
    ];
    const loadedTilesets = [];

    async function loadMultipleTilesets() {
      try {
        const promises = tilesetUrls.map(async (url, index) => {
          try {
            const tileset = await Cesium.Cesium3DTileset.fromUrl(url, {
              maximumScreenSpaceError: 32,
              dynamicScreenSpaceError: true,
              skipLevelOfDetail: true,
              maximumConcurrentRequests: 5,
              tileCacheSize: 100
            });
            viewer.value.scene.primitives.add(tileset);
            loadedTilesets.push(tileset);
            console.log(`第${index + 1}块瓦片集加载完成`);
            return tileset;
          } catch (error) {
            console.error(`第${index + 1}块瓦片集加载失败：`, error);
            return null;
          }
        });
        await Promise.all(promises);
        console.log("所有瓦片集加载完成");
      } catch (error) {
        console.error("瓦片集批量加载出错：", error);
      }
    }
    loadMultipleTilesets();

    // 初始化视图
    viewer.value.cesiumWidget.creditContainer.style.display = "none";
    viewer.value.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(121.75, 31.15, 30000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-60),
      },
    });
    viewer.value.resize();

    // 初始化加载WMS图层
    await nextTick();
    loadWmsLayer(currentTime.value);
  } catch (error) {
    // 捕获Viewer初始化错误，避免页面崩溃
    console.error('Cesium Viewer初始化失败:', error);
    viewer.value = null;
  }
});

onUnmounted(() => {
  // 销毁Viewer实例，释放资源
  if (viewer.value && !viewer.value.isDestroyed()) {
    viewer.value.destroy();
  }
});
</script>

<style scoped>
/* 控制按钮样式 */
.control-buttons {
  position: absolute;
  top: 200px;
  left: 150px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
}

.control-btn:hover {
  background-color: white;
  transform: scale(1.1);
}

.control-btn .active {
  color: #1E88E5;
}

/* 时间轴样式：强制显示 + 最高层级 */
.timeline-wrapper {
  position: absolute !important;
  bottom: 50px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  width: 80% !important;
  margin: 0 auto !important;
}

/* 穿透TimeSlider组件样式 */
:deep(.time-slider-container) {
  width: 100% !important;
  min-width: 300px !important;
  background: rgba(0, 0, 0, 0.85) !important;
  color: #fff !important;
  padding: 15px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

:deep(.time-slider-container .slider) {
  width: 100% !important;
  cursor: pointer !important;
  accent-color: #409eff;
}

:deep(.time-slider-container .play-btn) {
  background: #409eff !important;
  color: #fff !important;
  border: none !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .control-buttons {
    top: 150px;
    left: 20px;
  }
  .timeline-wrapper {
    width: 90% !important;
    bottom: 30px !important;
  }
}
</style>