<template>
  <div class="constellation-panel">
    <template v-if="timeclick">
      <!-- 顶部区域：标题与核心指标 -->
      <div class="header-container">
        <component :is="component1" :data="[capacityData, trafficData]" zoomHeight="2" :title="titles[0]" slogan="容量/流量"
          :legendName="['链路层容量', '用户实际流量']" :yName="yName1" :lineArray="true" @changeTime="changeTimeFn(1, $event)">
        </component>
      </div>
      <!-- 卫星列表 -->
      <div class="satellite-section">
        <!-- <cdf></cdf> -->
        <component :is="component2" :data="[availabilityData, actualAvailabilityData]" zoomHeight="14"
          :title="titles[1]" slogan="可用性" :yName="yName2" :legendName="['', '实际可用性']" :lineArray="true"
          @changeTime="changeTimeFn(2, $event)">
        </component>
      </div>

      <!-- 地面系统 -->
      <div class="ground-system-section">
        <!-- <instant></instant> -->
        <component :is="component3" :data="[delayData, lossRateData]" zoomHeight="14" :title="titles[2]"
          slogan="网络时延/丢包" :legendName="['搜星时延', '丢包率']" :yName="yName3" :lineArray="false"
          @changeTime="changeTimeFn(3, $event)">
        </component>
      </div>
    </template>
  </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 startTime = ref('')
const endTime = ref('')
const timeclick = ref(true)//选择时间时更新组件
// y轴单位
const yName1 = ref({
  type: true,
  value: ["Mbps", 'Mbps']
})
const yName2 = ref({
  type: false,
  value: ['', '']
})
const yName3 = ref({
  type: true,
  value: ["ms", ""]
})
//组件返回时时间信息信息根据type区分判断
const changeTimeFn = (type, times) => {
  console.log(times, '对比', type);
  if (type == 1) {

  } else if (type == 2) {

  } else if (type == 3) {

  }
  timeclick.value = false
  startTime.value = times[0]
  endTime.value = times[1]
  getPanelCurveData()
}

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("是否触发");

  // 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 (datas) => {
  var data = {
    startTime: startTime.value,
    endTime: endTime.value,
    granularity: granularity,
    regionName: granularity == 'region' ? granularityValue : null,
    signalSiteCode: granularity == 'station' ? granularityValue : null,
    gridCodes: granularity == 'grid' ? granularityValue : null,
  }
  if (!data.startTime) {
    delete data.startTime
    delete data.endTime
  }
  const res = await getPanelCurve(data)
  timeclick.value = true
  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: 10px;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 10px;
  overflow-y: auto;
  background-color: #010102;
}

.header-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 20px;
  flex: 1;

}

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

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