<template>
  <div class="satellite-monitor">
    <!-- 返回按钮 -->
    <button class="back-button" aria-label="返回">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      返回
    </button>
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 卫星名称与时间 -->
      <div class="satellite-header">
        <div class="satellite-name">
          <span class="label">卫星</span>
          <h1>Satellite II - S2</h1>
        </div>
        <div class="timestamp">
          <span class="label">最后更新</span>
          <time>2025-09-01 13:00:00 UTC</time>
        </div>
      </div>
      
      <!-- 状态卡片网格 -->
      <div class="status-grid">
        <!-- 信息站 -->
        <div class="status-card">
          <div class="card-header">
            <span class="card-icon signal-icon"></span>
            <h3>信息站</h3>
          </div>
          <div class="card-value">上海站</div>
        </div>
        
        <!-- 生命周期状态 -->
        <div class="status-card">
          <div class="card-header">
            <span class="card-icon lifecycle-icon"></span>
            <h3>生命周期状态</h3>
          </div>
          <div class="card-value status-normal">正常</div>
        </div>
        
        <!-- 工作模式 -->
        <div class="status-card">
          <div class="card-header">
            <span class="card-icon workmode-icon"></span>
            <h3>工作模式</h3>
          </div>
          <div class="card-value">--</div>
        </div>
        
        <!-- 管理状态 -->
        <div class="status-card">
          <div class="card-header">
            <span class="card-icon manage-icon"></span>
            <h3>管理状态</h3>
          </div>
          <div class="card-value">--</div>
        </div>
        
        <!-- 健康状态 -->
        <div class="status-card">
          <div class="card-header">
            <span class="card-icon health-icon"></span>
            <h3>健康状态</h3>
          </div>
          <div class="card-value status-healthy">健康</div>
        </div>
        
        <!-- 剩余燃料 -->
        <div class="status-card fuel-card">
          <div class="card-header">
            <span class="card-icon fuel-icon"></span>
            <h3>剩余燃料</h3>
          </div>
          <div class="fuel-meter">
            <div class="fuel-bar" :style="{ width: '80%' }"></div>
          </div>
          <div class="fuel-percentage">80%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 组件逻辑可以在这里添加
</script>

<style scoped>
/* 基础样式与变量 */
:root {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: #27374d;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --accent-blue: #3b82f6;
  --accent-green: #10b981;
  --accent-yellow: #f59e0b;
  --accent-red: #ef4444;
  --border-radius: 8px;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --transition: all 0.3s ease;
}

/* 主容器 */
.satellite-monitor {
  /* min-height: 100vh; */
  background-color: var(--bg-primary);
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 90% 70%, rgba(16, 185, 129, 0.05) 0%, transparent 30%);
  color: var(--text-primary);
  padding: 1.5rem;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* 返回按钮 */
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

.back-button:hover {
  background-color: rgba(59, 130, 246, 0.2);
  transform: translateX(-2px);
}

.back-button svg {
  width: 16px;
  height: 16px;
}

/* 主内容区域 */
.main-content {
  /* max-width: 1200px; */
  margin: 0 auto;
}

/* 卫星头部信息 */
.satellite-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.satellite-name, .timestamp {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.satellite-name h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 600;
}

.timestamp time {
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
}

/* 状态卡片网格 */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* 状态卡片样式 */
.status-card {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.status-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  /* height: 100%; */
  background-color: var(--accent-blue);
  opacity: 0.7;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.status-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.status-card:hover::before {
  transform: scaleY(1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.card-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(59, 130, 246, 0.2);
  position: relative;
}

.card-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.card-value {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

/* 特定状态颜色 */
.status-normal {
  color: var(--accent-blue);
}

.status-healthy {
  color: var(--accent-green);
}

/* 燃料卡片特殊样式 */
.fuel-card {
  grid-column: span 2;
  min-height: 140px;
}

.fuel-meter {
  width: 100%;
  height: 12px;
  background-color: rgba(148, 163, 184, 0.1);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.fuel-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.7), var(--accent-green));
  border-radius: 6px;
  transition: width 1s ease-in-out;
}

.fuel-percentage {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: right;
  color: var(--accent-green);
}

/* 图标样式 */
.signal-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127 1.44.362 2.82.7 4.11a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c1.29.339 2.67.574 4.11.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.lifecycle-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z'/%3E%3C/svg%3E");
}

.workmode-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z'/%3E%3C/svg%3E");
}

.manage-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}

.health-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022a12.017 2.017z'/%3E%3C/svg%3E");
}

.fuel-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
}

/* 响应式调整 */
@media (max-width: 768px) {
  .satellite-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .fuel-card {
    grid-column: span 1;
  }
  
  .status-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 480px) {
  .satellite-monitor {
    padding: 1rem;
  }
  
  .status-grid {
    grid-template-columns: 1fr;
  }
  
  .satellite-name h1 {
    font-size: 1.5rem;
  }
}
</style>