<template>
  <div class="constellation-panel">
    <!-- 顶部区域：标题与核心指标 -->
    <div class="header-container">
      <allHotMap></allHotMap>
    </div>
    <!-- 卫星列表 -->
    <div class="satellite-section">
      <cdf></cdf>
    </div>
    
    <!-- 地面系统 -->
    <div class="ground-system-section">
      <instant></instant>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import allHotMap from '@/pages/all/components/hotMapComponents/index.vue'
import errorDialog from '@/pages/lefts/component/errorDialog.vue'
import cdf from '@/pages/all/components/cdf/index.vue'
import instant from '@/pages/all/components/instant/index.vue'

// 激活的标签页
const activeTab = ref('equipment');
const errorDialogVisible = ref(false);
const coreMetrics = ref([
  { label: '组网卫星数', value: '1,296' },
  { label: '轨道面数', value: '36' },
  { label: '每轨卫星数', value: '36' },
]);

const groundMetrics = ref([
  { label: '地面站数', value: '33' },
  { label: '开通格网数', value: '3,600' },
  { label: '弧段数量', value: '120' },
  { label: '执行情况-弧段', value: '90' },
  { label: '上注完成情况(星)', value: '33' },
  { label: '上注失败星数(星)', value: '3' }
]);

const orbitMetrics = ref([
  { label: '在轨卫星数', value: '108' ,statusClass: 'top-left'},
  { label: '组网卫星数', value: '1,296' ,statusClass: 'top-right'},
  { label: '地面站数', value: '33' ,statusClass: 'bottom-left'},
  { label: '开通格网数', value: '3,600' ,statusClass: 'bottom-right'},
]);

function tableHandleRowClickFn(row, column, event) {
  errorDialogVisible.value = true
  console.log('点击的行数据:', row);
}

function errorDialoghandleClose() {
  errorDialogVisible.value = false
}
</script>

<style scoped>
.constellation-panel {
  color: #e0e7ff;
  padding: 15px;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
   background-color: #010102;
}

.header-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.satellite-section{
  height: 420px;
  /* background-color: #2E7DFF; */
  overflow-y: hidden;
}

.ground-system-section{
  height: 400px;
  /* background-color: #2E7DFF; */
  overflow-y: hidden;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.3);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #535353, #535353);
  border-radius: 2px;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, rgba(59, 130, 246, 0.4), rgba(96, 165, 250, 0.6));
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}
</style>