<!-- 用来展示无人机的任务进度展示数据 -->
<template>
    <div>
          <div >
            <ul class="infinite-list" >
                
                <li v-for="item in showWorkUavInfo" :key="item.id" class="infinite-list-item2">
                  
                    <div class="flex-item first-item2">
                        <div class="workUavInfoShow">
                        
                          <div class="second-item" ></div>
                          <div class="first-item" >
                              <img 
                                src="../../static/image/uav/wurenjitop.png" 
                                class="uav-icon"
                                alt="无人机图标"
                              > 
                               <el-tooltip effect="dark" > 
                                <span class="uav-number">无人机：{{ item.UavNum }}</span>
                                <template #content>
                                    <div>
                                      <strong>无人机编号:</strong> {{ item.UavNum }}<br>
                                    </div>
                                  </template>
                              </el-tooltip>
                            </div>
                        
                       </div>
                    </div>
                    <div class="flex-item second-item2">
                        <el-steps style="width: 100%; height: 60%;" :active="item.active"  align-center>
                        <el-step title="待机状态" class="custom-step" >
                            <template #title>
                            <span style=" font-size: 12px;">待机状态</span>
                            
                            </template>
                            <template #icon>
                            <img src="../../static/image/uav/daiji_wiexuan.png" v-if="item.active < 1" class="step-icon" />
                            <img src="../../static/image/uav/daiji_yixaun.png" v-else="item.active >= 1" class="step-icon" />
                            </template>
                        </el-step>
                        <el-step class="custom-step" >
                            <template #icon>
                            <img src="../../static/image/uav/shoudaorenwu_weixuan.png" class="step-icon" v-if="item.active <=  2"  style="width: 100%; height: auto; "/>
                            <img src="../../static/image/uav/shoudaorenwu.png" class="step-icon" v-else="item.active >2"style="width: 100%; height: auto;" />
                            </template>
                            <template #title>
                            <div v-html="stepTitle[0]" style=" font-size: 12px;margin-top: -10px;" ></div>
                            </template>
                        </el-step>
                        <el-step  class="custom-step" size="small" >
                            <template #title>
                            <span style=" font-size: 12px;">执行任务</span>
                            
                            </template>
                            <template #icon>
                            <img src="../../static/image/uav/zhixingrenwu_weixuan.png" class="step-icon" v-if="item.active <=  3"  style="width: 100%; height: auto;"/>
                            <img src="../../static/image/uav/zhixingrenwu.png" class="step-icon" v-else="item.active > 3"style="width: 100%; height: auto;" />
                            
                        
                            </template>
                        </el-step>
                        <el-step class="custom-step">
                            <template #icon>
                            <img src="../../static/image/uav/wanchengrenwu_weixaun.png" class="step-icon" v-if="item.active <=  4"  style="width: 100%; height: auto;"/>
                            <img src="../../static/image/uav/wanchengrenwu.png" class="step-icon" v-else="item.active > 4"style="width: 100%; height: auto;" />
                            
                            </template>
                            <template #title>
                            <div v-html="stepTitle[1]" style=" font-size: 12px;margin-top: -10px;"></div>
                            </template>
                        </el-step>
                        </el-steps>
                    </div>
                    <div class="flex-item step-icon1">
                        <img src="../../static/image/uav/wiexiu_wiexuan.png" v-if="item.isFiex"  style="width: 50%; height: auto;"/>
                        <img src="../../static/image/uav/wiexiu.png" v-else="item.isFiex"style="width: 50%; height: auto;" />
                        <span :style="{color: item.UavCurWorkState == 0 ? '#FBFA22' : item.UavCurState == 1 ? '#06B0E1' : '#C50D10'  } " style="font-size: 12px;" >维修中</span>
                    </div>
                    
                </li>
            </ul>
            </div>
        </div>
       
</template>

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





const stepTitle = ref(['收到任务<br>正在飞往目标','完成任务<br/>正在返回机坪']);

const props = defineProps(['showWorkUavInfo'])

// const curShowWorkUavInfo = ref("")
// onMounted(() => {
//   console.log("props.showWorkUavInfo-------------",props.showWorkUavInfo)
//   curShowWorkUavInfo.value = props.showWorkUavInfo
//   console.log("curShowWorkUavInfo.value----------",curShowWorkUavInfo.value)
// })

</script>

<style scoped>





.first-item {
  max-width: 300px;
  margin-bottom: 10px;
  width: 200px;
  padding-left: 15%;
  margin-top: 10px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center;

}


.uav-icon {
  width: 5%; /* 图片固定占5%宽度 */
  height: auto; /* 高度自动保持比例 */
  min-width: 15px; /* 最小宽度，防止图片过小 */
  max-width: 24px; /* 最大宽度，防止图片过大 */
  /* margin-right: 10px; 图片与文字间距 */
}

.uav-number {
  margin-left: 10px;
  /* background-color: #023375; */
  flex: 1; /* 文字区域占剩余所有空间 */
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-align: start;
  text-overflow: ellipsis; /* 超出显示省略号 */
  font-size: clamp(12px, 1vw, 16px); /* 响应式字体大小 */

  
  
}

.second-item{
  flex: 0 0 45%;; /* 其他div平分剩余空间 */
  display: flex;
  align-items: center; /* 垂直居中 */
  width: 105.89px;
  height: 79px;
  background-image: url('../../static/image/uav/uav.png');
  background-size: cover; /* 或者使用 contain */
  background-position: center; /* 图片居中 */
  background-repeat: no-repeat; /* 防止图片重复 */
}
.third-item {
  margin-top: 10px;
  flex: 0 0 20%;/* 其他div平分剩余空间 */
  display: flex;
  align-items: center; /* 垂直居中 */
}
.uavlist {
  width: 100%;
  height: 100%; 
  display: flex;

}
.box_footer{
  width: 100%;
  height: 470px;
  display: flex;
  justify-content: flex-start;
  margin-top: 24px;
}

.box_footer_left {
  width: 41.7%;
  height: 100%;
  color: #ffffff;
  margin-right:24px ;
  line-height: 25px;
  border-radius: 5px;
  border: 1px #06B0E1 solid ;
 
}
.box_footer_right {
  width:100%;
  height: 100%;

  /* background-color: aquamarine; */
}
.scrollbar-flex-content {
  display: flex;
  width: fit-content;
}
.scrollbar-demo-item {
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 254px;
  height: 195px;
  /* margin: 10px; */
  /* margin-left: 20px; */
  text-align: center;
  border-radius: 4px;
  /* background: var(--el-color-danger-light-9); */
  color: var(--el-color-danger);
}
.box_footer_content{
  margin-left: 24px;
  width: 100%;
  height: 80%;

}
.box_footer_content_up{
  margin-left: 30px;
  width: 80%;
  height: 85%;
  color: #ffffff;
  display: flex;
  flex-direction: column; /* 使容器为垂直方向的 Flex 容器 */
  justify-content: center; /* 垂直居中 */
  /* align-items: center; 水平居中 */
  /* text-align: center; 文字水平居中 */

}
td{
  /* width: 33.3%; */
  /* height: %; */
  text-align: center;
}
.td_shuxian{
  width: 1px;
  background-color: aquamarine;
}
.shuxian{
  width: 5px;
  height: 20px;
  display: flex;
  flex-direction: column; /* 使容器为垂直方向的 Flex 容器 */
  justify-content: center; 
 
}
.box_title{
  width: 100%;
  height: 10%;
  background-color: #06B0E1;
  color: #ffffff;
  /* text-align: center; */
  line-height: 25px;
  /* margin-top: 14px; */
  border-radius: 4px;
   display: flex;
  /* justify-content: center; 水平居中 */
  align-items: center; /* 垂直居中 */
}
.box_footer_content_down{
  width: 100%;
  height: 15%;
  margin-bottom: 32px;
  margin-left: -5%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.box_footer_right_content{
  width: 100%;
  height: 90%;
  /* margin-top: 14px; */
  color: #ffffff;
  display: flex;
  flex-direction: column; /* 使容器为垂直方向的 Flex 容器 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  text-align: center; /* 文字水平居中 */
  /* background-color: #082B4F; */

  border: 1px #06B0E1 solid  ;
  border-radius: 4px;
}
.item{
  border-bottom:  1px #979797 solid    ;
  width: 80%;
  display: flex;
  align-items: center; /* 垂直居中 */
}
.infinite-list {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 175px;
  background-color: #0571C4;
  margin: 10px;
  color: var(--el-color-primary);
}

.infinite-list-item2 {
   display: flex;
    align-items: center;
    justify-content: center;
    height: 175px;
    background-color: rgb(1, 42, 73);
    /* opacity: 0.45; */
    margin: 10px;
    
    color: var(--el-color-primary);
}
.infinite-list-item2:hover {
  background-color: rgb(1, 42, 73,0.7);
  transform: translateY(-2px) scale(0.99); /* 轻微放大 */
  box-shadow: 0 4px 4px rgba(0, 98, 163); /* 悬浮阴影 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

.flex-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */

}
.flex-item2 {
  flex: 1; /* 每个div平分剩余空间 */
  /* 添加其他样式，如边框等 */
}

.first-item2 {

  flex: 0 0 20%; /* 第一个div占20%的空间 */
  /* background-color: red; 设置背景颜色 */
}

.second-item2 {
  flex: 0 0 60%; /* 第二个div占60%的空间 */
  margin-top: 50px;

}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.workUavInfoShow {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  height: 100%; /* 根据需要调整 */
  color: #ffffff;
}
.custom-step {
  width: 100%;
  height: 100%;

  border-radius: 12px;

  transition: all 0.3s ease;
}

.custom-step:hover {
  transform: translateY(-2px);

}

/* 图片样式 - 放大一倍 */
.step-icon {
  width: 200% !important;
  height: auto !important;
  /* transform: scale(1); */
  /* transition: transform 0.3s ease; */
  /* filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); */
  background-color: rgb(1, 42, 73);
}

.step-icon:hover {
  transform: scale(1.1);
}
.step-icon1 {
  width: 400%;
  /* height: auto !important; */
  transform: scale(1);
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.step-icon1:hover {
  transform: scale(1.1);
}

/* 重置Element UI默认样式并设置文字颜色为白色 */
.custom-step :deep(.el-step__head) {
  background: transparent !important;
}

.custom-step :deep(.el-step__icon) {
  background: transparent !important;
  border: none !important;
}

.custom-step :deep(.el-step__main) {
  background: transparent !important;
}

.custom-step :deep(.el-step__title) {
  color: white !important;
  font-weight: bold !important;
  font-size: 16px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.custom-step :deep(.el-step__description) {
  color: #ffffff !important;
}
/* 定制整个滚动条 */
::-webkit-scrollbar {
  width: 10px;
  /* 滚动条宽度 */
}

/* 定制滚动条轨道 */
::-webkit-scrollbar-track {
  background: #023375;
  border-radius: 10px;

  /* 轨道颜色 */
}

/* 定制滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background: #0d68c1;
  border-radius: 10px;

  /* 滑块颜色 */
}

/* 当鼠标悬停在滑块上 */
::-webkit-scrollbar-thumb:hover {
  background: #DDDEE0;
  /* 滑块悬停颜色 */
}
</style>