<template>
  <div class="constellation-panel">
    <!-- 顶部区域：标题与核心指标 -->
    <div class="header-container">
      <!-- 标题栏 -->
      <div class="section-divider">
        <div class="divider-line"></div>
        <h3 class="section-title">卫星弧段信息</h3>
        <div class="divider-line"></div>
      </div>

      <!-- 轨道参数可视化 -->
      <div class="orbit-visualization">
        <div class="orbit-visualization-container" style="min-height: 41vh;">
          <div class="table-header">
            <el-input placeholder="搜索" size="small" class="search-input" @input="searchSegmentList_up" v-model="searchSegmentValue">
              <template #prefix>
                <el-icon class="search-icon">
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>

          <el-table :data="rawData_up" size="small" height="370px" class="custom-table">
            <el-table-column prop="segmentId" label="弧段编号" width="100" align="center"></el-table-column>
        <el-table-column prop="satelliteId" label="卫星编号" width="120" align="center"></el-table-column>
        <el-table-column prop="entryTime" label="入境时刻(北京时间)" width="150" align="center"></el-table-column>
        <el-table-column prop="exitTime" label="出境时刻(北京时间)" width="150" align="center"></el-table-column>
        <el-table-column prop="duration" label="时长(sec)" width="80" align="center"></el-table-column>
        <el-table-column prop="groundStation" label="地面站" width="90" align="center"></el-table-column>
        <el-table-column prop="trackingType" label="测控类型" width="80" align="center"></el-table-column>
        <!-- <el-table-column prop="operationResult" label="操作结果" width="100" align="center">
          <template #default="scope">
             {{ scope.row.operationResult }}
            
          </template>
        </el-table-column> -->
          </el-table>
        </div>
      </div>
    </div>

    <!-- 地面系统 -->
    <div class="ground-system-section">
      <div class="section-divider">
        <div class="divider-line"></div>
        <h3 class="section-title">卫星告警信息</h3>
        <div class="divider-line"></div>
      </div>
      
      <!-- 地面站设备数量 -->
      <div class="equipment-panel">
        <div class="orbit-visualization-container">
          <div class="table-header">
            <el-input placeholder="搜索" size="small" class="search-input" @input="searchAlterList" v-model="searchAlterValue">
              <template #prefix>
                <el-icon class="search-icon">
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>

          <el-table :data="alertData" size="small" height="300px" class="custom-table" @row-click="handleAlertDataRowClick">
            <el-table-column prop="alertCode" label="告警编码" width="80" align="center"></el-table-column>
            <el-table-column prop="alertName" label="告警名称" width="80" align="center"></el-table-column>
            <el-table-column prop="alertObject" label="告警对象" width="80" align="center"></el-table-column>
            
            <el-table-column prop="alertLevel" label="告警等级" width="80" align="center">
              <template #default="scope">
                <el-tag :class="`alert-level_${scope.row.alertLevel}`">
                  {{ alertLevelMap[scope.row.alertLevel] }}
                </el-tag>
              </template>
            </el-table-column>
             <!-- <el-table-column prop="faultServiceLeve" label="服务故障等级" width="150" align="center"></el-table-column> -->
            <el-table-column prop="alterCreateTime" label="告警产生时间" width="150" align="center"></el-table-column>
            <el-table-column prop="alertStatus" label="告警状态" width="150" align="center">
              <template #default="scope">
                <el-tag :class="`alert-status_${scope.row.alertStatus}`">
                  {{ scope.row.alertStatus === '0' ? '未处理' : '已处理' }}
                </el-tag>
              </template>
            </el-table-column>
       
          </el-table>
        </div>
      </div>
    </div>

    <el-dialog v-model="errorDataShowDialogVisible" :show-close="false"
    :modal="false"
    width="300"
    hight="50"
    :before-close="handleIsErrorDataCloseFn"
    :close-on-click-modal="true"
    style="background: rgba(0, 0, 0, 0);padding: 0;margin: 0;"
  >
  <errorDataShowComponent @handleIsErrorDataCloseFn="handleIsErrorDataCloseFn" :errorDetailItems="errorDetailItems"></errorDataShowComponent>
  </el-dialog>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue';
import errorDataShowComponent from './component/errorDataShowComponent.vue'
import useAppStore from '@/store/module/app'
import { da } from 'element-plus/es/locales.mjs';

const useAppStoreInstance = useAppStore();
// 星座构型提取转换函数
const transformConstellationData = (data) => {
  return data.map(item => ({
    headerTitle: [
      { label: '组网卫星数', value: item.satelliteCount },
      { label: '轨道面数', value: item.orbitalPlaneCount },
      { label: '每轨卫星数', value: item.satellitesPerOrbit }
    ],
    label: item.constellationName,
    content: [
      { label: '在轨卫星数', value: item.satelliteCount, statusClass: 'top-left' },
      { label: '在网卫星数', value: item.satelliteCount, statusClass: 'top-right' },
      { label: '轨道高度(km)', value: item.orbitalAltitude, statusClass: 'bottom-left' },
      { label: '轨道倾角', value: item.orbitalInclination+'°', statusClass: 'bottom-right' }
    ]
  }));
};
const searchSegmentValue = ref('');
const primitive_rawData_up = ref([
  // {
  //   segmentId: "SS GEN1-74",
  //   satelliteId: "satellite II -52",
  //   entryTime: "2025-09-02 10:00:00",
  //   exitTime: "2025-09-02 10:07:03",
  //   duration: 423,
  //   groundStation: "库尔勒站",
  //   trackingType: "Ku",
  //   operationResult: "帆板展开"
  // }
])
const rawData_up = ref(primitive_rawData_up)

const arcInfoTransform = (data) => {
   // 检查 data 是否为对象且不为 null
  if (typeof data === 'object' && data !== null && !Array.isArray(data)) {
    return [ 
       {
    orginData: data,
    segmentId: data.missionId ? data.missionId : '-',
    satelliteId: data.satName ? data.satName : '-',
    entryTime: data.arcStartTime ? data.arcStartTime : '-',
    exitTime: data.arcEndTime ? data.arcEndTime : '-',
    duration: data.arcDuration ? data.arcDuration : '-',
    groundStation: data.stationName ? data.stationName : '-',
    trackingType: data.missionType ? data.missionType : '-',
    // operationResult: "帆板展开"
  },
  ];
  } else if (Array.isArray(data)) {
    // 如果意外传入了数组，仍然处理数组
    
    
    return data.map(item => (
      // console.log("传输的是数组",item.missionId,item.satName,item.arcStartTime,item.arcEndTime,item.arcDuration,item.stationName,item.missionType)
     {
    orginData: item,
    segmentId: item.missionId ? item.missionId : '-',
    satelliteId: item.satName ? item.satName : '-',
    entryTime: item.arcStartTime ? item.arcStartTime : '-',
    exitTime: item.arcEndTime ? item.arcEndTime : '-',
    duration: item.arcDuration ? item.arcDuration : '-',
    groundStation: item.stationName ? item.stationName : '-',
    trackingType: item.missionType ? item.missionType : '-',
    // operationResult: "帆板展开"
  }
  ));
  }

  // 如果 data 不是对象也不是数组，返回空数组
  return [];
}




const searchSegmentList_up = () => {
  
  rawData_up.value = primitive_rawData_up.value.filter(item => 
    item.segmentId.toLowerCase().includes(searchSegmentValue.value.toLowerCase()) ||
     item.satelliteId.toLowerCase().includes(searchSegmentValue.value.toLowerCase()) ||
    item.groundStation.toLowerCase().includes(searchSegmentValue.value.toLowerCase()) ||
    item.trackingType.toLowerCase().includes(searchSegmentValue.value.toLowerCase()) ||
    item.operationResult.toLowerCase().includes(searchSegmentValue.value.toLowerCase())
  )
}




onMounted(() => {
  nextTick(() => {
    watch(() => useAppStoreInstance.subsystemSocketContent, (newValue, oldValue) => {
  // console.log("******************",newValue === oldValue);
  
  if (newValue !== oldValue) {
    primitive_rawData_up.value = arcInfoTransform(newValue.arcSegmentInfoArray)
    rawData_up.value = primitive_rawData_up.value
    primitiveAlertData.value = alertInfoTransformFn(newValue.satelliteAlertInfoArray)
    alertData.value = primitiveAlertData.value
    console.log("222222222right2---------",rawData_up.value,newValue.arcSegmentInfoArray);
    
  }

  },{ deep: true, immediate: true });
  })
// useAppStoreInstance.subsystemSocket.onmessage = (event) => {
//     const Jsondata = JSON.parse(event.data);
//     primitive_rawData_up.value = arcInfoTransform(Jsondata.arcSegmentInfoArray)
//     rawData_up.value = primitive_rawData_up.value
//     primitiveAlertData.value = alertInfoTransformFn(Jsondata.satelliteAlertInfoArray)
//     alertData.value = primitiveAlertData.value
//     console.log("222222222right2---------",rawData_up.value,Jsondata.arcSegmentInfoArray);
//     // useAppStoreInstance.setSubsystemSocketContent(Jsondata)
//   }
})
const alertLevelMap = {
  '1': 'Ⅰ级',
  '2': 'Ⅱ级',
  '3': 'Ⅲ级',
  '4': 'Ⅳ级'
}
// 卫星告警信息数据（随机生成）
const primitiveAlertData = [
  { 
    alertCode: "500", 
    alertName: "电源系统电压异常", 
    alertObject: "电源系统", 
    alertLevel: "1", 
    faultServiceLeve: "F4(灾难性)", 
    alterCreateTime: "2025-12-13 10:23:45", 
    alertStatus: "0" 
  },
  { 
    alertCode: "500", 
    alertName: "通信链路中断", 
    alertObject: "通信分系统", 
    alertLevel: "2", 
    faultServiceLeve: "F3(严重)", 
    alterCreateTime: "2025-12-13 09:15:22", 
    alertStatus: "1" 
  },
  { 
    alertCode: "500", 
    alertName: "姿态控制偏差超限", 
    alertObject: "姿控系统", 

    alertLevel: "3", 
    faultServiceLeve: "F2(中度)", 
    alterCreateTime: "2025-12-13 08:47:10", 
    alertStatus: "0" 
  },
  { 
    alertCode: "500", 
    alertName: "温度传感器故障", 
    alertObject: "热控系统", 

    alertLevel: "4", 
    faultServiceLeve: "F1(轻微)", 
    alterCreateTime: "2025-12-13 07:52:33", 
    alertStatus: "1" 
  },
  { 
    alertCode: "500", 
    alertName: "星敏感器数据异常", 
    alertObject: "星敏感器", 

    alertLevel: "2", 
    faultServiceLeve: "F3(严重)", 
    alterCreateTime: "2025-12-13 06:18:59", 
    alertStatus: "1" 
  },
  { 
    alertCode: "500", 
    alertName: "电池组充放电异常", 
    alertObject: "蓄电池组", 
    alertService: "能源管理", 
    alertLevel: "2", 
    faultServiceLeve: "F4(灾难性)", 
    alterCreateTime: "2025-12-13 05:42:17", 
    alertStatus: "0" 
  },
  { 
    alertCode: "501", 
    alertName: "载荷数据传输错误", 
    alertObject: "载荷设备", 
    alertService: "载荷控制", 
    alertLevel: "3", 
    faultServiceLeve: "F2(中度)", 
    alterCreateTime: "2025-12-13 04:33:08", 
    alertStatus: "0" 
  },
  { 
    alertCode: "500", 
    alertName: "测控链路误码率高", 
    alertObject: "测控分系统", 
    alertService: "轨道控制", 
    alertLevel: "4", 
    faultServiceLeve: "F0(无影响)", 
    alterCreateTime: "2025-12-13 03:19:52", 
    alertStatus: "1" 
  },
  { 
    alertCode: "500", 
    alertName: "电源系统电压异常", 
    alertObject: "电源系统", 
    alertLevel: "1", 
    faultServiceLeve: "F4(灾难性)", 
    alterCreateTime: "2025-12-13 10:23:45", 
    alertStatus: "0" 
  },
  { 
    alertCode: "500", 
    alertName: "通信链路中断", 
    alertObject: "通信分系统", 
    alertLevel: "2", 
    faultServiceLeve: "F3(严重)", 
    alterCreateTime: "2025-12-13 09:15:22", 
    alertStatus: "1" 
  },
  { 
    alertCode: "500", 
    alertName: "姿态控制偏差超限", 
    alertObject: "姿控系统", 

    alertLevel: "3", 
    faultServiceLeve: "F2(中度)", 
    alterCreateTime: "2025-12-13 08:47:10", 
    alertStatus: "0" 
  },
  { 
    alertCode: "500", 
    alertName: "温度传感器故障", 
    alertObject: "热控系统", 

    alertLevel: "4", 
    faultServiceLeve: "F1(轻微)", 
    alterCreateTime: "2025-12-13 07:52:33", 
    alertStatus: "1" 
  },
  { 
    alertCode: "500", 
    alertName: "星敏感器数据异常", 
    alertObject: "星敏感器", 

    alertLevel: "2", 
    faultServiceLeve: "F3(严重)", 
    alterCreateTime: "2025-12-13 06:18:59", 
    alertStatus: "1" 
  },
  { 
    alertCode: "500", 
    alertName: "电池组充放电异常", 
    alertObject: "蓄电池组", 
    alertService: "能源管理", 
    alertLevel: "2", 
    faultServiceLeve: "F4(灾难性)", 
    alterCreateTime: "2025-12-13 05:42:17", 
    alertStatus: "0" 
  },
  { 
    alertCode: "501", 
    alertName: "载荷数据传输错误", 
    alertObject: "载荷设备", 
    alertService: "载荷控制", 
    alertLevel: "3", 
    faultServiceLeve: "F2(中度)", 
    alterCreateTime: "2025-12-13 04:33:08", 
    alertStatus: "0" 
  },
  { 
    alertCode: "500", 
    alertName: "测控链路误码率高", 
    alertObject: "测控分系统", 
    alertService: "轨道控制", 
    alertLevel: "4", 
    faultServiceLeve: "F0(无影响)", 
    alterCreateTime: "2025-12-13 03:19:52", 
    alertStatus: "1" 
  }
];
const alertData = ref(primitiveAlertData)

const AlertDataLevelMap = ref({
  '一级告警':1,
  '二级告警':2,
  '三级告警':3,
  '四级告警':4,
})
const AlertDataStatusMap = ref({
  '手工清除':1,
  '活动':0,
})
const alertInfoTransformFn = (data) => {
   // 检查 data 是否为对象且不为 null
  if (typeof data === 'object' && data !== null && !Array.isArray(data)) {
    return [ 
       {
    orginData: data,


    
    alertCode: data.alarmCode ? data.alarmCode : '-', 
    alertName: data.alarmlame ? data.alarmlame : '-', 
    alertObject: data.objectName ? data.objectName : '-', 
    alertLevel: AlertDataLevelMap.value[data.alertLevel] ? AlertDataLevelMap.value[data.alertLevel] : '-', 
    // faultServiceLeve: "F4(灾难性)", 
    alterCreateTime: data.alarmOccurrencelime ? data.alarmOccurrencelime : '-', 
    alertStatus: AlertDataStatusMap.value[data.clearstatus] ? AlertDataStatusMap.value[data.clearstatus] : '-', 
  




  },
  ];
  } else if (Array.isArray(data)) {
    // 如果意外传入了数组，仍然处理数组
    
    
    return data.map(item => (
      // console.log("传输的是数组",item.missionId,item.satName,item.arcStartTime,item.arcEndTime,item.arcDuration,item.stationName,item.missionType)
     {
    orginData: item,
    alertCode: item.alarmCode ? item.alarmCode : '-', 
    alertName: item.alarmlame ? item.alarmlame : '-', 
    alertObject: item.objectName ? item.objectName : '-', 
    alertLevel: AlertDataLevelMap.value[item.alertLevel] ? AlertDataLevelMap.value[item.alertLevel] : '-', 
    // faultServiceLeve: "F4(灾难性)", 
    alterCreateTime: data.alarmOccurrencelime ? data.alarmOccurrencelime : '-', 
    alertStatus: AlertDataStatusMap.value[data.clearstatus] ? AlertDataStatusMap.value[data.clearstatus] : '-', 
    // operationResult: "帆板展开"
  }
  ));
  }

  // 如果 data 不是对象也不是数组，返回空数组
  return [];
}




const searchAlterValue = ref('');
const searchAlterList = () => {
  alertData.value = primitiveAlertData.filter(item => 
    item.alertCode.toLowerCase().includes(searchAlterValue.value.toLowerCase()) ||
    item.alertName.toLowerCase().includes(searchAlterValue.value.toLowerCase()) ||
    item.alertObject.toLowerCase().includes(searchAlterValue.value.toLowerCase()) ||

    // item.alertLevel.toLowerCase().includes(searchAlterValue.value.toLowerCase()) ||
    item.faultServiceLeve.toLowerCase().includes(searchAlterValue.value.toLowerCase()) ||
    item.alterCreateTime.toLowerCase().includes(searchAlterValue.value.toLowerCase()) 
    // item.alertStatus.toLowerCase().includes(searchAlterValue.value.toLowerCase())
  )
}

const errorDataShowDialogVisible = ref(false);
const errorDetailItems = ref([
//   { label: '告警码', value: row.alertCode },
//   { label: '告警名称', value: row.alertName },
//   { label: '告警对象', value: row.alertObject },
//   { label: '告警服务', value: row.alertService || 'N/A' },
//   { label: '告警等级', value: row.alertLevel },
//   { label: '故障服务等级', value: row.faultServiceLeve },
//   { label: '告警创建时间', value: row.alterCreateTime },
//   { label: '告警状态', value: row.alertStatus === '1' ? '已处理' : '未处理' }
]);
const handleAlertDataRowClick = (row) => {
  console.log(row);
  errorDetailItems.value = [

  { label: '告警码', value: row.alertCode },
  { label: '告警状态', value: row.alertStatus === '1' ? '已处理' : '未处理' },
  { label: '告警名称', value: row.alertName },
  { label: '告警对象', value: row.alertObject },
  { label: '告警服务', value: row.alertService || 'N/A' },
  { label: '告警等级',value: alertLevelMap[row.alertLevel]},
  { label: '故障服务等级', value: row.faultServiceLeve },
  { label: '告警创建时间', value: row.alterCreateTime },

]
  errorDataShowDialogVisible.value = true;
}


const handleIsErrorDataCloseFn = () => {
  errorDataShowDialogVisible.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: 10px;
}

/* 标题栏 */
.section-divider {
  display: flex;
  align-items: center;
  margin: 0px 0 5px 0;
  background-image: url('@/assets/images/lefts/bg_title.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(59, 130, 246, 0.3), transparent);
}

.section-title {
  font-size: 14px;
  color: #ffffff;
  font-weight: 900;
  padding: 0 15px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* 轨道参数可视化 */
.orbit-visualization {
  /* background: rgba(189, 40, 40, 0.4); */
  border-radius: 8px;
  min-height: 70%;
  overflow-y: auto;
}

/* 表格样式 */
.table-header {
  display: flex;
  justify-content: flex-end;
  /* margin-bottom: 10px; */
  width: 100%;
  height: 30px;
  background-color: #4e37b8;
}

.search-input {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.search-input:focus-within {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.search-input :deep(.el-input__wrapper) {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.search-input :deep(.el-input__inner) {
  background-color: transparent;
  color: #e0f2fe;
  font-size: 15px;
  border: none;
  box-shadow: none;
}

.search-input :deep(.el-input__inner::placeholder) {
  color: rgba(224, 231, 255, 0.7);
}

.search-icon {
  color: #94a3b8;
}

.custom-table {
  background: #000000;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  height:100%;
  margin-top: 5px;
  overflow-y: auto;
  
  /* margin-right: 20px; */
}

.satellite-icon {
  width: 20px;
  height: 20px;
}

:deep(.custom-table .el-table__header th) {
  background: #000000 !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.3) !important;
}

:deep(.custom-table .el-table__body td) {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

:deep(.custom-table .el-table__body tr:hover) {
  background: linear-gradient(to right, #2c4f89 0%, rgb(0, 0, 0)) 100% !important;
}

:deep(.custom-table .el-table__body tr:hover td) {
  background: transparent !important;
}

/* 状态标签样式 */
.status-tag {
  background: #000000;
}

.el-tag {
  border: none;
  font-size: 10px; 
}

.status-normal {
  color: #22c55e;
}

.status-normal::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  background-color: #22c55e;
}

.status-error {
  color: #ef4444;
}

.status-error::before { 
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  background-color: #ef4444;
}

.status-warning {
  color: #facc15;
}

.status-warning::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  background-color: #facc15;
}

/* 地面系统 */
.ground-system-section {
  display: flex;
  flex-direction: column;
  /* gap: 15px; */
}

.equipment-panel {
  margin-top: 15px;
}

:deep(.el-table__body-wrapper) {
 color: #ffffff;
}

[class*="alert-level_"]{
  color: #ffffff;
}
.alert-level_1{
  background-color: #ed323e;
}
.alert-level_2 {
  background-color: #eea929;
}
.alert-level_3 {
  background-color: #3270ed;
}
.alert-level_4 {
  background-color: #17a0e0;
}



.alert-status_1 {
 color: red;
 background:none;
}
.alert-status_0 {
  color: green;
  background:none;
}



:deep(.el-table tr){
  background: black;
}
:deep(.custom-table .el-table__body tr:hover) {
  background: linear-gradient(to right, #2c4f89 0%, rgb(0, 0, 0)) 100% !important;
}

:deep(.custom-table .el-table__body tr:hover td) {
  background: transparent !important;
}

/* 滚动条样式 */
::-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);
}


































:deep(.el-table--fit .el-table__inner-wrapper:before){
  width:  calc(100% );
  background: black;
}














</style>