<template>
    <div>
        <div class="box_footer_content">
          <div class="box_footer_content_up">
             <div class="text item">
                <img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
                <div style=" width: 40%;">无人机编号：</div>
                <div class="info-value">{{ UavInfoSelect.UavNum }}</div>
             </div>
             <div class="text item">
                <img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
                <div style=" width: 40%;">无人机记录时间：</div>
                <div class="info-value">{{ UavInfoSelect.UavRecodeTime }}</div>
             </div>
             <div class="text item">
                <img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
                <div style=" width: 40%;">无人机当前状态：</div>
                <div class="info-value">{{ UavInfoSelect.UavCurState }}</div>
             </div>
             <div class="text item">
                <img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
                <div style=" width: 40%;;">无人机当前载弹量：</div>
                <div class="info-value">{{ UavInfoSelect.uavBullet }} 发<span :v-if="UavInfoSelect.UavPreMaintain<4" style="color: red;margin-left: 10px;">(注意当前载弹量)</span></div>
             </div>
             <div class="text item">
                <img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
                <div style="width: 40%;">无人机上次保养时间：</div>
                <div class="info-value">{{ UavInfoSelect.UavPreMaintain }}</div>
             </div>
             <div class="text item">
                <img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
                <div style="width: 40%;">无人机上次加水时间：</div>
                <div class="info-value">{{ UavInfoSelect.UavWaterNumber }}</div>
             </div>
             <div class="text item">
                <img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
                <div style=" width: 40%; ">无人机当前电量：</div>
                <div class="info-value">{{ UavInfoSelect.UavCurBattery }}</div>
             </div>
           
          </div>
          
         </div> 
    </div>
</template>

<script setup>
const props = defineProps({
    UavInfoSelect: {
        type: Object,
        default: () => ({})}
})
</script>

<style  scoped>

.text.item {
  display: flex;          /* 启用 Flex 布局 */
  align-items: center;    /* 垂直居中对齐 */
  gap: 8px;              /* 元素间间距 */
  padding: 8px 0;        /* 上下内边距 */
  border-bottom: 1px solid #eee ;

}

.info-value{
    margin-left: 10%;
}

.text.item > div {
  white-space: nowrap;   /* 防止文本换行 */
}
.uav-info-list {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 10px 0;
}

.info-item {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.info-label {
  width: 160px;
  color: #666;
}

.info-value {
  font-weight: 500;
}

/* 最后一项去掉下划线 */
.info-item:last-child {
  border-bottom: none;
}

</style>