<template>
  <div class="constellation-panel">
    <!-- 顶部区域：标题与核心指标 -->
    <div class="header-container">
      <!-- <allHotMap></allHotMap> -->
      <component :is="component1" :data="[capacityData, trafficData]" zoomHeight="2" :title="titles[0]" slogan="容量/流量"
        :legendName="['链路层容量', '用户实际流量']"></component>
    </div>
    <!-- 卫星列表 -->
    <div class="satellite-section">
      <!-- <cdf></cdf> -->
      <component :is="component2" :data="[availabilityData, actualAvailabilityData]" zoomHeight="14" :title="titles[1]"
        slogan="可用性" :legendName="['规划可用性', '实际可用性']"></component>

    </div>

    <!-- 地面系统 -->
    <div class="ground-system-section">
      <!-- <instant></instant> -->
      <component :is="component3" :data="[delayData, lossRateData]" zoomHeight="14" :title="titles[2]" slogan="网络时延/丢包"
        :legendName="['搜星时延', '丢包率']"></component>
    </div>
  </div>
</template>

<script setup>
import { markRaw, onMounted, ref, watch } 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'
import useAppStore from '@/store/module/app'
import { getPanelCurve, templateConfigQuery } from '@/api/Zodiac'
import Loading from '@/pages/all/components/loadingComponent/index.js'


const component1 = ref(markRaw(allHotMap))
const component2 = ref(markRaw(cdf))
const component3 = ref(markRaw(instant))

let capacityData = ref([])
let trafficData = ref([])
let delayData = ref([])
let lossRateData = ref([])
let availabilityData = ref([])
let actualAvailabilityData = ref([])
const titles = ref(['', '', '']);

const appStore = useAppStore();
// const loading = ref(false)

let granularity = null
let granularityValue = null

watch(() => appStore.chartConfig, (newVal) => {
  // console.log('appStore.chartConfig', appStore.chartConfig)
  // console.log('newVal', newVal)
  if (appStore.chartConfig) {
    const { _capacityData, _trafficData, _delayData, _availabilityData, _lossRateData, _titles, _actualAvailabilityData } = appStore.chartConfig
    component1.value = markRaw(appStore.chartConfig.component1)
    component2.value = markRaw(appStore.chartConfig.component2)
    component3.value = markRaw(appStore.chartConfig.component3)

    capacityData.value = _capacityData
    trafficData.value = _trafficData
    delayData.value = _delayData
    availabilityData.value = _availabilityData
    lossRateData.value = _lossRateData
    actualAvailabilityData.value = _actualAvailabilityData

    titles.value = _titles

  }
}, { deep: true })



const getPanelCurveData = async (data) => {
  const res = await getPanelCurve({
    granularity: granularity,
    regionName: granularity == 'region' ? granularityValue : null,
    signalSiteCode: granularity == 'station' ? granularityValue : null,
    gridCodes: granularity == 'grid' ? granularityValue : null,
  })
  if (res.code == 200 && res.data !== null) {
    // console.log('所有曲线数据', res.data)
    capacityData.value = res.data.capacity
    trafficData.value = res.data.traffic
    delayData.value = res.data.delay
    lossRateData.value = res.data.lossRate
    availabilityData.value = res.data.availability
    actualAvailabilityData.value = res.data.actualAvailability
  }
}

const hanleTemplateConfigQuery = async () => {
  const ret = await templateConfigQuery()
  if (ret.code == 200 && ret.data !== null && ret.data.templateConfigResponse !== null) {
    granularity = ret.data.granularity
    granularityValue = ret.data.granularityValue
    calculateConfig(ret.data.templateConfigResponse)
    if (granularity == "region") {
      appStore.currentHotMapCountry = granularityValue
    }
  }
}


onMounted(async () => {
  Loading.show()
  await hanleTemplateConfigQuery()
  await getPanelCurveData()
  Loading.hide()
})

const calculateConfig = (selectedTemplate) => {
  const obj = {
    '2': cdf,
    '3': allHotMap,
    '1': instant
  }

  component1.value = obj[selectedTemplate.capacityCurveType]
  component2.value = obj[selectedTemplate.availabilityCurveType]
  component3.value = obj[selectedTemplate.latencyCurveType]

  console.log('component1', component1.value)
  console.log('component2', component2.value)
  console.log('component3', component3.value)

  const curveType = {
    '1': '瞬时值曲线',
    '2': 'CDF曲线',
    '3': '热力图'
  }

  const geoTimeStandard = {
    '1': '最小值',
    '2': '平均值',
    '3': '最大值',
  }


  titles.value[0] = curveType[selectedTemplate.capacityCurveType] + '-' + geoTimeStandard[selectedTemplate.capacityGeoStandard] + '-' + geoTimeStandard[selectedTemplate.capacityTimeStandard]
  titles.value[1] = curveType[selectedTemplate.availabilityCurveType] + '-' + geoTimeStandard[selectedTemplate.availabilityGeoStandard] + '-' + geoTimeStandard[selectedTemplate.availabilityTimeStandard]
  titles.value[2] = curveType[selectedTemplate.latencyCurveType] + '-' + geoTimeStandard[selectedTemplate.latencyGeoStandard] + '-' + geoTimeStandard[selectedTemplate.latencyTimeStandard]


}

// 激活的标签页
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;
  min-height: 300px;
}

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

.ground-system-section {
  min-height: 300px;
  /* 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>