<template>
  <div class="main-container">
    <!-- 无人机维护卡片 -->
    <div class="maintenance-card" >
      <!-- 卡片头部 -->
       <div class="maintain-card" v-for="(items, index) in uavRepairData" :key="index">
      <div class="card-header" >
        <img src="../../../static/image/huo.png" alt="" srcset="" style="width: 8%;">
        <div >
          <h2>无人机维护</h2>
          <span class="badge">{{ items.isRepaid ? '已维护' : '需维护' }}</span>
        </div>
      </div>
      
      <!-- 卡片内容 -->
      <div class="card-content" v-for="(seditems,index) in items.uavRepairSetailData" :key="index" >
        <div class="info-item" >
          <img class="info-icon" src="../../../static/image/aircraft.svg" alt="无人机编号">
          <span class="info-label">{{seditems.label}}:</span>
          <span class="info-value">{{seditems.value}}</span>
        </div>
        
        <!-- <div class="info-item">
          <img class="info-icon" src="../../../static/image/model.svg" alt="型号">
          <span class="info-label">型号:</span>
          <span class="info-value">DJI Avata</span>
        </div>
        
        <div class="info-item">
          <img class="info-icon" src="../../../static/image/maintenance.svg" alt="维护类型">
          <span class="info-label">维护类型:</span>
          <span class="info-value">电机检查</span>
        </div>
        
        <div class="info-item">
          <img class="info-icon" src="../../../static/image/time.svg" alt="时间">
          <span class="info-label">时间:</span>
          <span class="info-value">2025年8月8日 9:27</span>
        </div> -->
      </div>
      
      <!-- 卡片底部 -->
      <div class="card-footer">
        <button class="maintenance-btn">维护记录</button>
      </div>
    </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps(['uavRepairData'])
// 可以根据需要将数据改为动态获取
const maintenanceInfo = ref({
  droneId: "DJI-EP-9124",
  model: "DJI Avata",
  type: "电机检查",
  time: "2025年8月8日 9:27",
  status: "需维护" // 状态可以控制右上角徽章颜色
});

// 维护记录按钮点击事件
const handleMaintenanceRecord = () => {
  // 这里添加打开维护记录的逻辑
  console.log("查看维护记录");
};
</script>

<style scoped>
.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 99%;

  padding: 0.51rem 0;
}
.maintain-card:hover {
  transform: translateX(2px);
}
/* 卡片样式 */
.maintenance-card {
  width: 99%;
  margin-right : 0.2rem;
  background-color: #ffffff;
  border-radius: 10px;
  
}
.maintain-card{
  width: 100%;
  border-left: #fdad00 solid 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  border-radius: 10px;
  margin-bottom: 1rem;

}
/* 卡片头部 */
.card-header {
  background-color: #e3f2fd;
  padding: 1rem 1.2rem;

  display: flex;
  
  align-items: center;
 
}
.card-header div {
  padding: 0 0.6rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-header h2 {

  /* background-color: #eedd48; */
  margin: 0;
  align-items: start;
  font-size: 1.1rem;
  color: #1976d2;
  font-weight: 500;
}

.badge {
  background-color: #ff9800;
  color: white;
  font-size: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
}

/* 卡片内容 */
.card-content {
  padding: 0 1.5rem;
  
}

.info-item {
  display: flex;
  align-items: center;
  padding: 0.2rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-icon {
  width: 18px;
  height: 18px;
  margin-right: 12px;
}

.info-label {
  color: #666666;
  width: 90px;
  font-size: 0.95rem;
}

.info-value {
  color: #333333;
  flex: 1;
  font-size: 0.95rem;
}

/* 卡片底部 */
.card-footer {
  padding: 0.5rem 0.51rem;
  background-color: #f9f9f9;
  display: flex;
  justify-content: flex-end;
}

.maintenance-btn {
  background-color: #1976d2;
  color: white;
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.maintenance-btn:hover {
  background-color: #1565c0;
}
</style>