<template>
  <div class="drone-card" v-for="drone in drone">
    <!-- 无人机基本信息 -->
    <div class="drone-info" >
      <img :src="drone.image" alt="Drone image" class="drone-img" />
      <div class="drone-model">
        <h2>{{ drone.model }}</h2>
        <div class="channels">
          <span class="available-channels">可用载弹数: 
            <div class="currentchannels"> <!-- 水平排列，间距 8px -->
              {{ drone.availableChannels }}
            </div>
          </span>
          <span class="actual-channels">实际载弹: 
            <div class="currentchannels">
              {{ drone.actualChannels }}
            </div>
          </span>
          <span class="available-channels">当前弹药: 
            <div class="currentchannels"> 
              <div 
                v-for="(value, index) in drone.availableChannels" 
                :key="index"  
                class="circle"  
              
              ></div>
            </div>
          </span>
        </div>
      </div>
      
      <!-- 实时信息按钮 -->
      <button class="live-data-btn">实时信息</button>
    </div>
    
    <!-- 飞行数据 -->
    <div class="flight-data">
      <div class="data-column">
        <div class="data-item">
          <span class="label">高度</span>
          <span class="value">{{ drone.height }}m</span>
        </div>
        <div class="data-item">
          <span class="label">距离</span>
          <span class="value">{{ drone.distance }}m</span>
        </div>
      </div>
      
      <div class="data-column">
        <div class="data-item">
          <span class="label">高度</span>
          <span class="value">{{ drone.height }}m</span>
        </div>
        <div class="data-item">
          <span class="label">距离</span>
          <span class="value">{{ drone.distance }}m</span>
        </div>
      </div>
      <div class="data-column">
        <div class="data-item">
          <span class="label">高度</span>
          <span class="value">{{ drone.height }}m</span>
        </div>
        <div class="data-item">
          <span class="label">距离</span>
          <span class="value">{{ drone.distance }}m</span>
        </div>
      </div>
       <div class="data-column">
        <div class="data-item">
          <span class="label">高度</span>
          <span class="value">{{ drone.height }}m</span>
        </div>
        <div class="data-item">
          <span class="label">距离</span>
          <span class="value">{{ drone.distance }}m</span>
        </div>
      </div>
      
      <!-- 状态指示器 -->
      <div class="indicators">
        <!-- <Indicator :active="drone.indicators.live" label="直播" icon="🔴" />
        <Indicator :active="drone.indicators.flying" label="飞行中" icon="✈️" />
        <Indicator :active="drone.indicators.mission" label="任务完成" icon="✅" />
        <Indicator :active="drone.indicators.warning" label="超载" icon="⚠️" /> -->
      </div>
      
      <!-- 电池状态 -->
      <div class="battery-status">
        <div class="status-label">{{ drone.status }}</div>
        <div class="battery">
          <span class="battery-icon">🔋</span>
          <span class="battery-level">{{ drone.battery }}%</span>
          <div class="battery-bar">
            <div 
              class="battery-fill" 
              :style="{ width: `${drone.battery}%`, backgroundColor: getBatteryColor(drone.battery) }"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div class="drone-info-footer">
        <el-steps style="width: 100%;" :active="2">
          <el-step  >
            <template #icon>
              <el-icon style="padding: 0;margin: 0;"><img style="width: 150%;height: 150%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="" srcset=""></el-icon>
            </template>
            <template #title>
              <span>待命</span>
            </template>
          </el-step>
          <el-step  >
            <template #icon>
              <el-icon style="background-color: rgba(0, 0, 0, 0);"><Edit style="background-color: rgba(0, 0, 0, 0);"/></el-icon>
            </template>
            <template #title>
              <span>飞行中</span>
            </template>
          </el-step>
          <el-step  >
            <template #icon>
              <el-icon style="background-color: rgba(0, 0, 0, 0);"><Edit style="background-color: rgba(0, 0, 0, 0);"/></el-icon>
            </template>
            <template #title>
              <span >任务完成</span>
            </template>
          </el-step>
          <el-step  >
            <template #icon>
              <el-icon style="background-color: rgba(0, 0, 0, 0);"><Edit style="background-color: rgba(0, 0, 0, 0);"/></el-icon>
            </template>
            <template #title>
              <span>返航</span>
            </template>
          </el-step>
            
        </el-steps>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import StepProgress from './stepProgress.vue';




const props = defineProps({
  drone: {
    type: Object,
    required: true
  }
});
console.log(props.drone);
const getBatteryColor = (level) => {
  if (level > 70) return '#4CAF50';
  if (level > 30) return '#FFC107';
  return '#F44336';
};
</script>

<style scoped>
.drone-card {
  background-color: white;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.drone-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.drone-info {
   /* background-color: #0E4CD1; */
  display: flex;
  align-items: center;
  gap: 12px;
}

.drone-img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

.drone-model h2 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 600;
}

.channels {
  display: flex;
  /* margin-left: 1rem; */
  gap: 12rem;
  font-size: 0.8rem;
  color: #666;

}
.currentchannels{
  margin-top: 3px;
  display: flex;
  flex-direction: row;
}
.circle{
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #0E4CD1;
}
.live-data-btn {
  margin-left: auto;
  padding: 4px 10px;
  background-color: #165DFF;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.live-data-btn:hover {
  background-color: #0E4CD1;
}

.flight-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}


.drone-info-footer{
  height: 10%;
  width: 100%;
  /* background-color: #165DFF; */
}

.drone-info-footer span{

  font-size: small;
  /* background-color: #165DFF; */
}
.data-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.data-item {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
}

.label {
  color: #666;
  font-size: 0.7rem;
}

.value {
  font-weight: 500;
}

.indicators {
  display: flex;
  gap: 12px;
}

.battery-status {
  text-align: right;
}

.status-label {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 4px;
}

.battery {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.battery-bar {
  width: 80px;
  height: 6px;
  background-color: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.battery-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s, backgroundColor 0.3s;
}
</style>