<script lang="ts" setup>
import { computed, h, onMounted, onUnmounted, ref } from 'vue';
import { NButton, NDatePicker, NForm, NFormItem, NInput, NSelect, NSlider, NSpace } from 'naive-ui';
import { Pause, Play } from '@vicons/ionicons5';
import '../../../../Cesium/Widgets/widgets.css';
import Cesium from './cesium.vue'

// 生命周期钩子
onMounted(() => {
});

</script>

<template>
  <div class="track-page">
    <Cesium></Cesium>
    <!-- Cesium 地图容器 -->
    <!-- <div id="cesiumcontainer"> -->
      <!-- 进度条 -->
      <!-- <div class="progress-container"> -->
        <!-- 自定义秒数 -->
        <!--
 <div class="input-group">
        <label for="totalSecondsInput">总秒数：</label>
        <input id="totalSecondsInput" type="number" min="1" value="3600" />
      </div>
-->

        <!-- 进度条 -->
        <!-- <div class="progress-bar">
          <div id="progressFill" class="progress-fill"></div>
          <div id="progressText" class="progress-text">0%</div>
        </div> -->

        <!-- 按钮 -->
        <!--
 <div class="controls">
        <button id="playBtn" onclick="startProgress()">播放</button>
        <button id="pauseBtn" onclick="pauseProgress()" disabled>暂停</button>
        <button id="resetBtn" onclick="resetProgress()">重置</button>
      </div>
-->

        <!-- 时间显示 -->
        <!--
 <div class="time-display">
        已用时间：<span id="timeDisplay">0</span> / <span id="totalDisplay">3600</span> 秒
      </div>
-->
      <!-- </div> -->
    <!-- </div> -->
  </div>
</template>

<style scoped>
.track-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.query-form {
  padding: 10px 0px 5px 12px;
  z-index: 10;
}

.cesium-container {
  width: 99%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin-left: 10px;
}

.play-control {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  z-index: 100;
}

.control-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.time-display {
  flex: 1;
  text-align: center;
  font-family: monospace;
}

/* 调整 Naive UI 组件的样式以适应深色背景 */
:deep(.n-slider-handle) {
  border-color: #fff;
}

:deep(.n-slider-rail) {
  background-color: rgba(255, 255, 255, 0.3);
}

:deep(.n-slider-track) {
  background-color: #1890ff;
}

:deep(.n-select) {
  --text-color: #fff;
  --border-color: rgba(255, 255, 255, 0.3);
}

:deep(.n-button) {
  --text-color: #fff;
}

.progress-container {
  width: 100%;
  margin-left: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: absolute;
  bottom: 0;
  z-index: 1000;
}

.progress-bar {
  width: 95%;
  height: 30px;
  background: rgba(0, 0, 0, 0.438);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 25px;
  position: relative;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 114, 255, 0.5);
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

button {
  padding: 12px 25px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(0, 114, 255, 0.7);
  color: white;
  transition: all 0.3s ease;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

button:hover {
  background: rgba(0, 114, 255, 0.9);
  transform: translateY(-2px);
}

button:disabled {
  background: rgba(100, 100, 100, 0.3);
  cursor: not-allowed;
  transform: none;
}

.time-display {
  text-align: center;
  font-size: 18px;
  color: #a0c8ff;
  margin-top: 15px;
  font-weight: 500;
}

.input-group {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}

.input-group label {
  font-size: 16px;
}

.input-group input {
  width: 100px;
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  font-size: 16px;
  text-align: center;
}
</style>
