<template>
  <div class="satellite-status-container" :class="{'active':!useAppStoreInstance.isdataPanelShow}">
    
    <!-- 左侧图例标题（始终居中） -->
    <div class="legend-title">
      图例
    </div>
    
    <!-- 右侧卫星状态指示器（弹性布局） -->
    <div class="satellite-indicators">
      <div 
        class="indicator-item" 
        v-for="(item, index) in legendSource" 
        :key="index"
        :class="[item.status]"
      >
        <div class="icon">
          <img :src="item.legendImgUrl" alt="图例图标" class="legend-icon" style="width: 20px; height: 20px;">
        </div>
        <div class="label">
          {{ item.type }}
          <span v-if="item.status !== 'empty'" class="status-badge" >({{ legendstatusMap[item.status] }})</span>
          <!-- <span v-else class="status-badge">{{ legendstatusMap.empty }}</span> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import useAppStore from '@/store/module/app'
const useAppStoreInstance = useAppStore()
const legendstatusMap = ref({
  normal: '正常',
  abnormal: '异常',
  failed: '失效',
  empty: ''
})

const legendSource = ref([

  { type: '小卫星', status: 'empty' , legendImgUrl:new URL('../../../assets/images/footers/smallSatellite_normal.png' , import.meta.url).href},
  // { type: '小卫星', status: 'abnormal' , legendImgUrl:new URL('../../../assets/images/footers/smallSatellite_abnormal.png' , import.meta.url).href},
  // { type: '小卫星', status: 'failed' , legendImgUrl:new URL('../../../assets/images/footers/smallSatellite_invalid.png' , import.meta.url).href},
  { type: '格思卫星', status: 'empty' , legendImgUrl:new URL('../../../assets/images/footers/gosiSatellite_abnormal.png' , import.meta.url).href},
  // { type: '格思卫星', status: 'abnormal' , legendImgUrl:new URL('../../../assets/images/footers/gosiSatellite_abnormal.png' , import.meta.url).href},
  // { type: '格思卫星', status: 'failed' , legendImgUrl:new URL('../../../assets/images/footers/gosiSatellite_invalid.png' , import.meta.url).href},
  { type: '信关站', status: 'normal' , legendImgUrl:new URL('../../../assets/images/footers/CommunicationHub1.png' , import.meta.url).href},
  { type: '星间链路', status: 'normal' , legendImgUrl:new URL('../../../assets/images/footers/interstellarLink_normal.png' , import.meta.url).href},
  { type: '星间链路', status: 'abnormal' , legendImgUrl:new URL('../../../assets/images/footers/interstellarLink_abnormal.png' , import.meta.url).href},
  { type: '星间链路', status: 'failed' , legendImgUrl:new URL('../../../assets/images/footers/interstellarLink_invalid.png' , import.meta.url).href},  
  { type: '卫星轨道', status: 'failed' , legendImgUrl:new URL('../../../assets/images/footers/satelliteOrbit.png' , import.meta.url).href},
  { type: '服务格网', status: 'normal' , legendImgUrl:new URL('../../../assets/images/footers/serviceGrid.png' , import.meta.url).href},
  { type: '卫星波束', status: 'normal' , legendImgUrl:new URL('../../../assets/images/footers/satelliteBeam.png' , import.meta.url).href},
//   { type: '格思卫星', status: 'normal' },
//   { type: '格思卫星', status: 'abnormal' },
//   { type: '格思卫星', status: 'failed' },
//   { type: '信关站', status: 'normal' },
])
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.satellite-status-container {
  display: grid;
  grid-template-columns: 50px 1fr; /* 第一列固定宽度，第二列自适应 */
  align-items: center; /* 垂直居中 */
  background-color: #000000;
  border-radius: 8px;
  padding: 12px 12px;
  min-width: 800px;
  color: #ffffff;
  /* font-family: 'Consolas', monospace;  */
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 1); */
}

/* 图例标题（始终居中） */
.legend-title {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 16px;
  font-weight: 600;
  height: 100%; /* 撑满容器高度 */
  color: #e0e0e0;
  border-right: 1px solid #333; /* 右侧分隔线 */
}

/* 卫星状态指示器容器（弹性布局） */
.satellite-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-left: 16px; /* 与标题保持间距 */
}

/* 单个指示器样式 */
.indicator-item {
  display: flex;
  align-items: center;
  gap: 4px;
  /* padding: 8px 8px; */
  border-radius: 6px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

/* .indicator-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  border-color: #444;
} */

.indicator-item .icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.indicator-item .label {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-badge {
  font-size: 13px;
  font-weight: 500;
}

/* 状态颜色 */
/* .normal {
  border-left: 3px solid #4CAF50;
} */
.normal .status-badge {
  color: #81C784;
}

/* .abnormal {
  border-left: 3px solid #FFC107;
} */
.abnormal .status-badge {
  color: #FFD54F;
}

/* .failed {
  border-left: 3px solid #F44336;
} */
.failed .status-badge {
  color: #EF5350;
}

/* 信关站特殊样式 */
.indicator-item:last-child {
  /* background-color: rgba(33, 150, 243, 0.1); */
  /* border-left-color: #2196F3; */
}
/* .indicator-item:last-child .status-badge {
  color: #64B5F6;
} */

/* 响应式调整 */
/* */
</style>