<template>
  <div class="contenter">
    <!-- 无人机管理 -->
    <div class="box_title box_title1">无人机列表</div>
    <div class="contenterTitle">
      <div class="title">
        <el-button type="primary" size="large" style="width: 150px; color: #fff;" color="#06B0E1" @click="addUvaHandFn" >添加无人机</el-button>   
        
        <!-- 这里的显示不对 -->
        <div class="uavshow"> 
          <div class="uavlist" >
            <el-scrollbar>
              <div class="scrollbar-flex-content"  >
                <p v-for="item in CurWorkUavInfo" :key="item" class="scrollbar-demo-item step-icon1">
                  <el-tooltip effect="dark" > 
                  <div class="image-container"  >
                    <img src="../../static/image/uav/wurenjiditu.png" alt="" class="background-image">
                    <div class="uavInfoShow" @click.stop="showUavdetailedInformation(item)">
                      <div class="first-item">
                        <img 
                          src="../../static/image/uav/wurenjitop.png" 
                          class="uav-icon"
                          alt="无人机图标"
                        > 
                        <span class="uav-number">无人机：{{ item.UavNum }}</span>
                      </div>
                      <div class="second-item" >
                      </div>
                      <div class="third-item" :style="{color: StateColor[item.UavCurState]}">
                        <span class="state-label">状态显示</span>
                        <span class="state-value">{{ item.UavNum }}</span>
                      </div>
                    </div>
                  </div>
                  <template #content>
                        <div>
                            <strong>无人机编号:</strong> {{ item.UavNum }}<br>
                            状态: 
                            <span :style="{color: StateColor[item.UavCurState]}">
                              {{ item.UavCurState }}
                            </span>
                        </div>
                    </template>
                </el-tooltip>
                </p>
              </div>
            </el-scrollbar>
          </div>
        </div>





        
      </div>
    </div>
    <div class="box_footer">
      <div class="box_footer_left">
         <div class="box_title">无人机：{{UavInfoSelect[0].UavNum}}</div>
         <div class="box_footer_content">
          <div v-for="UavInfoSelect in UavInfoSelect" :key="item" style="margin-top: 30px; height: 100%; overflow: hidden;">
            <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>{{ 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>{{ 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>{{ 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>{{ 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>{{ 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>{{ 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>{{ UavInfoSelect.UavCurBattery }}</div>
              </div>
            </div>
          </div>
          <div class="box_footer_content_down">
            <el-button  type="primary" size="large" style="width: 150px; color: #fff;" color="#06B0E1" @click="showUavMeiHuoInfo(UavInfoSelect)">实时灭火视频</el-button>
            <el-button  type="primary" size="large" style="width: 150px; color: #fff;" color="#06B0E1" @click="showUavWorkTableInfo(UavInfoSelect)">查看详细记录</el-button>
          </div>
         </div> 
      </div>
      <!-- 可视无人机调度栏 -->
      
       <div class="box_footer_right" style="height: 100%;width: 70%;">
            <div class="box_title">可视无人机调度栏</div>
            <div class="box_footer_right_content">
              <div class="box_footer_content_right" > 
                 
                 <uavTaskShow :key="Date.now()" :showWorkUavInfo="CurWorkUavInfo" style="width: 100%;"></uavTaskShow>
              </div>
             
            </div>
        </div>

    </div>
    <!-- 展示无人机的增加页面  -->
     <el-drawer 
            v-model="isAddUav" 
            :with-header="false" 
            direction="ttb" 
            custom-class="top-center-drawer"
            size="auto"
            @close="closeAddNewUavInfo">
            <div class="drawer-content">
                <el-form 
                  ref="addNewUavInfoRef"
                  :model="addUavInfoList"
                  :rules="uavAddRules"
                  label-width="200px"
                  label-position="left"
                >
                <!-- 编号 -->
                <el-form-item label="无人机编号" prop="UavNum">
                    <el-input 
                    v-model="addUavInfoList.UavNum" 
                    placeholder="请输入无人机编号"
                    clearable>
                    </el-input>
                </el-form-item>
                
              
                <el-form-item label="无人机记录时间" >
                    <el-input 
                    :value="addUavInfoList.UavRecodeTime = dayjs().format('YYYY-MM-DD HH:mm:ss') "
                    disabled>
                    </el-input>
                </el-form-item>

                <el-form-item label="无人机状态" >
                    <el-input 
                    value="正常" 
                    placeholder="请输入无人机状态"
                    disabled>
                    </el-input>
                </el-form-item>

                <el-form-item label="无人机载弹量" prop="uavBullet">
                    <el-input 
                    v-model="addUavInfoList.uavBullet" 
                    placeholder="请输入无人机载弹量"
                    clearable
                    >
                    </el-input>
                </el-form-item>

                <el-form-item label="无人机上次保养时间" >
                    <el-input 
                    :value="addUavInfoList.UavPreMaintain=dayjs().format('YYYY-MM-DD HH:mm:ss') "
                    disabled>
                    </el-input>
                </el-form-item>

                <el-form-item label="无人机上次加水时间" >
                    <el-input 
                    :value="addUavInfoList.UavWaterNumber = dayjs().format('YYYY-MM-DD HH:mm:ss') "
                    disabled>
                    </el-input>
                </el-form-item>
                <el-form-item label="无人机当前电量" prop="UavCurBattery">
                    <el-input 
                    v-model="addUavInfoList.UavCurBattery" 
                    placeholder="请输入无人机当前电量"
                    clearable>
                    </el-input>
                </el-form-item>

                <!-- 操作按钮（关键修改部分） -->
                <el-form-item class="action-buttons">
                    <el-button 
                      type="primary" 
                      @click="submitForm"
                      style="flex: 1;">
                      确认添加
                    </el-button>
                    <el-button 
                      @click="isAddUav = false"
                      style="flex: 1; margin-left: 10px;">
                      取消
                    </el-button>
                </el-form-item>
                </el-form>
            </div>
        </el-drawer>

   
    <!-- 展示实时灭火信息 -->
    <el-dialog
      v-model="isShowUavdetailedInfo"
      width="1300px"
    
      align-center
      class="uav-detail-dialog"
      @close="closeUavdetailedInfo"
      style="background-color: rgba(0, 0, 0, 0);"
    >
      <!-- 主内容区 -->
      <div class="uav-detail-container">
        <!-- 无人机信息区块 -->
        <div class="uav-info-card">
          <div class="section-header">
            <el-icon class="header-icon"><Monitor /></el-icon>
            <span class="header-title">无人机信息</span>
          </div>
          <div class="uav-content-grid">
            <div class="uav-table-section">
              <UavTable 
                :UavInfoSelect="UavInfoSelect[0]"
          
              />
            </div>
            <div class="uav-visual-section" >
              <uavTaskShow 
                :showWorkUavInfo="UavInfoSelect"
                
              />
            </div>
          </div>
        </div>

        <!-- 实时视频区块 -->
        <div class="video-card">
          <div class="section-header">
            <el-icon class="header-icon"><VideoCamera /></el-icon>
            <span class="header-title">实时灭火视频</span>
          </div>
          <div class="video-content">
            <div class="video-wrapper elevated-card">
              <video 
              
                controls
                class="video-player"
              >
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
              </video>
              <div class="video-badge">
                <el-tag type="danger" effect="dark" class="live-tag">
                  <el-icon><VideoPlay /></el-icon>
                  实时视频
                </el-tag>
              </div>
            </div>
            <div class="video-controls">
              <el-button 
                type="primary" 
                size="large" 
                class="control-btn"
                @click="handleControl"
              >
                <el-icon><Connection /></el-icon>
                接管控制
              </el-button>
            </div>
          </div>
        </div>
      </div>

    
    </el-dialog>
        <!-- 展示无人机的具体的历史作业信息 -->
     <el-dialog
      v-model="isUavWorkDialogVisible"
      width="1300px"
      align-center
      class="uav-detail-dialog"
      @close="closeUavdetailedInfo"
      style="background-color: rgba(0, 0, 0, 0);"
    >
      <!-- 主内容区 -->
      <div class="uav-detail-container">
        <!-- 无人机信息区块 -->
        <div class="uav-info-card">
          <div class="section-header">
            <el-icon class="header-icon"><Monitor /></el-icon>
            <span class="header-title">无人机信息</span>
          </div>
          <div class="uav-content-grid">
            <div class="uav-table-section">
              <UavTable 
                :UavInfoSelect="UavInfoSelect[0]"
          
              />
            </div>
            <div class="uav-visual-section" >
              <uavTaskShow 
                :showWorkUavInfo="UavInfoSelect"
                
              />
            </div>
          </div>
        </div>

        <!-- 实时视频区块 -->
        <div class="video-card">
          <div class="section-header">
            <el-icon class="header-icon"><VideoCamera /></el-icon>
            <span class="header-title">详细记录信息</span>
          </div>
          <div class="video-content1">
            
            <uavWorkTable ></uavWorkTable>
          </div>
        </div>
      </div>

    
    </el-dialog>

  </div>
</template>
<script setup>
import uavTaskShow from '../dialog_infoShow_img_vid/uavTaskShow.vue';
import { dayjs } from 'element-plus'
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import UavTable from '../dialog_infoShow_img_vid/uavTable.vue';
import uavWorkTable from '../dialog_infoShow_img_vid/uavWorkTable.vue';
import AddUav from '../dialog_infoShow_img_vid/addUav.vue';
const isAddUav = ref(false) // 控制是否展示增加无人机的页面
const uavAddRules = {
  UavNum: [
    { required: true, message: '请输入无人机编号', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  uavBullet: [
    { required: true, message: '请输入无人机载弹量', trigger: 'blur' },
    { 
      validator: (rule, value, callback) => {
        if (!/^\d+$/.test(value)) {
          callback(new Error('载弹量必须为数字'));
        } else if (value < 0 || value > 4) {
          callback(new Error('载弹量在0-4之间'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  UavCurBattery: [
    { required: true, message: '请输入无人机当前电量', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!/^\d+$/.test(value)) {
          callback(new Error('电量必须为数字'));
        } else if (value < 0 || value > 100) {
          callback(new Error('电量必须在0-100之间'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
};
// 定义一个名为isUavWorkDialogVisible的响应式变量，是否展示详细无人机工作信息表
const isUavWorkDialogVisible = ref(false)
const showUavWorkTableInfo = () => {
  isUavWorkDialogVisible.value = true
  
}
const addUavInfoList = ref({
  id:"",
  UavNum: 'dfasdfasdfadfadsfd',
  UavRecodeTime: "",
  UavCurState: 0,
  UavCruWorkState: 0,
  UavPreMaintain:"",
  UavWaterNumber:"",
  UavCurBattery:0,
  isFiex:0,
  active:0,
  uavBullet:0
})

const addNewUavInfoRef = ref(null)
const closeAddNewUavInfo = () => {
  console.log("----------------closeAddNewUavInfo")
  addNewUavInfoRef.value?.resetFields()
}
const submitForm = () => {
  // if (!formEl) returnaddNewUavInfoRef
  console.log("addUavInfoList---------------------****************----------------",addUavInfoList.value)
  addNewUavInfoRef.value.validate((valid) => {
    if (valid) {
      addUavInfoList.value.id = Date.now()
      // 这里要发往服务器，获取返回的状态码，根据状态码判断是否成功
      
      ElMessage({
        message: '添加无人机成功',
        type: 'success',
      })
      addNewUavInfoRef.value?.resetFields() 
      isAddUav.value = false
      CurWorkUavInfo.value.unshift(addUavInfoList.value)
    }else {
      ElMessage({
        message: '请输入正确的无人机信息',
        type: 'error',
      })

    }
      
      
})
}
const route = useRoute();
const router = useRouter();
const curSelsetOneUavInfo = ref({})
onMounted(() => {
  if (route.query.uavId) {
    // taskList.value = buildData.value.filter(item => item.id == route.query.taskId)
    curSelsetOneUavInfo.value = CurWorkUavInfo.value.filter(item => item.id == route.query.uavId)
    CurWorkUavInfo.value = CurWorkUavInfo.value.filter(item => item.id != route.query.uavId)
    CurWorkUavInfo.value.unshift(curSelsetOneUavInfo.value[0])
    UavInfoSelect.value = curSelsetOneUavInfo.value[0]
   console.log("curSelsetOneUavInfo", curSelsetOneUavInfo.value,CurWorkUavInfo)
  }
})
const isShowUavdetailedInfo = ref(false)

const uavTaskShowInfo = ref({})

const showOneUavTaskShowInfo = ref({})
const addUvaHandFn = () => {

  isAddUav.value = true
}
function showUavMeiHuoInfo(UavInfoSelect){
  
  showOneUavTaskShowInfo.value = UavInfoSelect
  isShowUavdetailedInfo.value = true
  console.log("-----------------------------------------uavInfo",showOneUavTaskShowInfo.value )
}
// 当前页面展示的无人机信息
const CurWorkUavInfo = ref([{
  id:1,
  UavNum: "001",
  UavRecodeTime: 10,
  UavCurState: 0,
  UavCruWorkState: 1,
  UavPreMaintain:"20235153-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:0,
  active:1,
  uavBullet :3
},
{
  id: 2,
  UavNum: "002",
  UavRecodeTime: 10,
  UavCurState: 1,
  UavCruWorkState: 1,
  UavPreMaintain:"2023-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:1,
  active:2,
  uavBullet :3
},
{
  id: 3,
  UavNum: "003",
  UavRecodeTime: 10,
  UavCurState: 2,
  UavCruWorkState: 1,
  UavPreMaintain:"2023-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:0,
  active:3,
  uavBullet :3
},
{
  id: 4,
  
  UavNum: "004",
  UavRecodeTime: 10,
  UavCurState: 2,
  UavCruWorkState: 1,
  UavPreMaintain:"2023-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:0,
  active:4,
  uavBullet :3
},
{
  id:1,
  UavNum: "001",
  UavRecodeTime: 10,
  UavCurState: 0,
  UavCruWorkState: 1,
  UavPreMaintain:"20235153-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:0,
  active:1,
  uavBullet :3
},
{
  id: 2,
  UavNum: "002",
  UavRecodeTime: 10,
  UavCurState: 1,
  UavCruWorkState: 1,
  UavPreMaintain:"2023-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:1,
  active:2,
  uavBullet :3
},
{
  id: 3,
  UavNum: "003",
  UavRecodeTime: 10,
  UavCurState: 2,
  UavCruWorkState: 1,
  UavPreMaintain:"2023-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:0,
  active:3,
  uavBullet :3
},
{
  id: 4,
  
  UavNum: "004",
  UavRecodeTime: 10,
  UavCurState: 2,
  UavCruWorkState: 1,
  UavPreMaintain:"2023-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:0,
  active:4,
  uavBullet :3
},
{
  id:1,
  UavNum: "001",
  UavRecodeTime: 10,
  UavCurState: 0,
  UavCruWorkState: 1,
  UavPreMaintain:"20235153-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:0,
  active:1,
  uavBullet :3
},
{
  id: 2,
  UavNum: "002",
  UavRecodeTime: 10,
  UavCurState: 1,
  UavCruWorkState: 1,
  UavPreMaintain:"2023-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:1,
  active:2,
  uavBullet :3
},
{
  id: 3,
  UavNum: "003",
  UavRecodeTime: 10,
  UavCurState: 2,
  UavCruWorkState: 1,
  UavPreMaintain:"2023-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:0,
  active:3,
  uavBullet :3
},
{
  id: 4,
  
  UavNum: "004",
  UavRecodeTime: 10,
  UavCurState: 2,
  UavCruWorkState: 1,
  UavPreMaintain:"2023-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:0,
  active:4,
  uavBullet :3
},
])

const closeUavdetailedInfo = () => {
   
  console.log("要在这里断开实时画面的连接")
}
const UavInfoSelect = ref([{
  id: 4,
  UavNum: "004",
  UavRecodeTime: 10,
  UavCurState: 2,
  UavCruWorkState: 1,
  UavPreMaintain:"2023-03-01",
  UavWaterNumber:"2023-03-01",
  UavCurBattery:100,
  isFiex:0,
  active:4,
  uavBullet :3
}])

const StateColor = ref(["#FBFA22","#06B0E1","#C50D10"])
const UvaCurState = ref(2)
const showUavdetailedInformation = (item) => {
  console.log("test",item)
  UavInfoSelect.value.unshift(item)
  UavInfoSelect.value.splice(1, 1)
  // UavInfoSelect.value.shift(item) 
  // UvaCurState.value = item.UavCurState
}

</script>
<style scoped>


/* 外层容器 */
.uavshow {
  width: 100%;
  height: 230px;
  color: #ffffff;
  border-radius: 5px;
  margin-top: 15px;

}

/* 中间容器 */
.uavlist {
  width: 100%;
  height: 100%;
  position: relative; /* 关键2: 为滚动条提供定位上下文 */
}

/* Element Plus 滚动条容器 */
.el-scrollbar {
  width: 100%;
  height: 100%;
}

/* 滚动内容区域 - 水平排列关键 */
.scrollbar-flex-content {
  /* background-color: #fff; */
  display: flex;
  flex-direction: row;
 
  /* flex-wrap: nowrap; 关键3: 禁止换行 */
  height: 100%;
  /* width: 50%; 关键4: 让宽度由内容决定 */
  /* padding: 20px; */
  /* box-sizing: border-box; */
}

/* 每个滚动项目 */
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* min-width: 200px;  */
  /* width: 20%;
  height: 90%; */
  /* margin-right: 15px; */
  /* background-color: rgba(255, 255, 255, 0.2); */
  border-radius: 4px;
  flex-shrink: 0; 
}

/* 自定义滚动条样式 */
:deep(.el-scrollbar__bar.is-horizontal) {
  height: 8px;
  bottom: 5px;
}

:deep(.el-scrollbar__thumb) {
  background-color: rgba(255, 255, 255, 0.5);
}


.contenter{
  height: 351px;
}
.contenterTitle {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 303px;
  
}
.title1 {
  width: 100px;
  height: 25px;
  background-color: #06B0E1;
  color: #ffffff;
  text-align: center;
  line-height: 25px;
  margin-left: 10px;
  border-radius: 5px;
  /* margin-top:88px */
}



.image-container {
  /* margin-top: 8%; */
  left: -10%;
  /* position: relative; */
  width: 100%;

  display: flex;
}

.background-image {
  /* margin-left: 18px; */
  width: 100%;
  height: 80%;

}

.uavInfo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white; /* 根据需要调整 */
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 100%;
}

.uavInfoShow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white; /* 根据需要调整 */
  overflow: hidden;
}


.first-item {
  max-width: 200px;
  margin-bottom: 10px;
  width: 100%;
  padding-left: 10px;
  /* background-color: #000000; */
  padding-left: 10%;

  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center;
  overflow: hidden;
}


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

.uav-number {
  flex: 1; /* 文字区域占剩余所有空间 */
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 超出部分隐藏 */
  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: 90px;
 
  background-image: url('../../static/image/uav/uav.png');
  background-size: cover; /* 或者使用 contain */
  background-position: center; /* 图片居中 */
  background-repeat: no-repeat; /* 防止图片重复 */
  /* background-color: #1976d2; */
}

.third-item {
  
  margin-top: 15px;
  display: flex; /* 容器使用 Flex 布局 */
  width: 50%;
  min-height: 36px; /* 设置最小高度（根据需求调整），确保垂直居中有效 */
  padding: 0 8px;
  box-sizing: border-box;
  display: flex; /* 子元素用 Flex 实现自身内容居中 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */

}

/* "状态显示" 区域：占5%宽度，文字垂直水平居中 */
.state-label {
  width: 15%; /* 固定占比 */
  min-width: 50px; /* 最小宽度，防止挤压 */
  display: flex; /* 子元素用 Flex 实现自身内容居中 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 15px;
  white-space: nowrap; /* 禁止文字换行 */

}

/* 无人机编号区域：占剩余宽度，文字垂直水平居中 */
.state-value {
  flex: 1; /* 占剩余空间 */
  display: flex; /* 子元素用 Flex 实现自身内容居中 */
  justify-content: center; /* 水平居左（或改为 center 完全居中） */
  align-items: center; /* 垂直居中 */
  font-size: 15px;
  padding-left: 4px;
  margin-left: 15px; /* 与左侧标签间距 */
 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

/* 响应式调整 */
@media (max-width: 768px) {
  .third-item {
    min-height: 30px;
  }
  .state-label, .state-value {
    font-size: 12px;
  }
}

.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_content{
  margin-left: 24px;
  width: 100%;
  height: 60%;

}
.box_footer_content_right{
  /* margin-left: 24px; */
  width: 100%;
  height: 100%;

}
.box_footer_content_up{
 
  margin-left: 30px;
  width: 80%;
  height: 100%;
  color: #ffffff;
  display: flex;
  flex-direction: column; /* 使容器为垂直方向的 Flex 容器 */
  justify-content: center; /* 垂直居中 */
  overflow: hidden;
  /* 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_footer_content_right {
  height: 100%;
  width: 100%;
  overflow: auto;
  position: relative; /* 为内部绝对定位元素提供参考 */
}

/* 可选：美化滚动条（仅支持WebKit浏览器） */
.box_footer_content_right::-webkit-scrollbar {
  width: 6px;
}
.box_footer_content_right::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}



.box_title{
  width: 100%;
  height: 10%;

  /* max-width: calc(100%  ); */
  overflow: hidden;

  color: #ffffff;
  /* text-align: center; */
  line-height: 25px;
  /* margin-top: 14px; */
  border-radius: 4px;
   display: flex;
  /* justify-content: center; 水平居中 */
  align-items: center; /* 垂直居中 */
}
.box_title1{
  width: 100%;
  height: 13%;
}
.box_footer_content_down{
  width: 80%;
  overflow: hidden;
  /* margin-top: -15%; */
  height: 20%;
  /* margin-bottom: 32px; */
  /* padding-left: -10%; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* background-color: #000000; */
}

.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);
}

.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;
}


/* 图片样式 - 放大一倍 */
.step-icon {
  width: 100% !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: 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));
}

.step-icon1:hover {
  transform: scale(0.95);
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}











.highlight {
  color: var(--highlight-color);
  font-weight: bold;
}

/* 时间线样式 */
.status-timeline {
  padding: 10px;
  flex: 1;
}
:deep(.el-step__title) {
  color: #fff !important;
  font-size: 13px;
  line-height: 1.5;
}


.uav-detail-container {
  padding: 20px;
  color: #e0e0e0;
  background-color: #051d39;
}

.section-header {
  display: flex;
  align-items: center;
  margin-top: 16px;
  
  .header-icon {
    font-size: 20px;
    color: #409eff;
    margin-right: 8px;
  }
  
  .header-title {
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(90deg, #64b5f6, #1976d2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.uav-detail-dialog {

  /* :deep(.el-dialog__header) {
    display: none;
  } */
  
  /* :deep(.el-dialog__body) {
    padding: 0;
    background: linear-gradient(135deg, #051d39 0%, #0a2b50 100%);
  } */
}

.uav-detail-container {
  padding: 20px;
  color: #e0e0e0;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  
  .header-icon {
    font-size: 20px;
    color: #409eff;
    margin-right: 8px;
  }
  
  .header-title {
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(90deg, #64b5f6, #1976d2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.uav-visual-section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(64, 158, 255, 0.2);
  background: rgba(16, 42, 77, 0.7);
}



.uav-info-card {
  margin-bottom: 24px;
  
  .uav-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    
    > div {
      padding: 16px;
    }
  }
}

.video-card {
  
  .video-content {
    /* display: grid;
    grid-template-columns: 4fr; */
    /* gap: 16px; */
    background: rgba(16, 42, 77, 0.7);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(64, 158, 255, 0.2);
    border-radius: 6px;
  }
  
  .video-wrapper {
    position: relative;
    overflow: hidden;
    
    .video-player {
      width: 100%;
      display: block;
      border-radius: 6px;
    }
    
    .video-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      
      .live-tag {
        font-weight: bold;
        letter-spacing: 1px;
      }
    }
  }
  
  .video-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
  
    .control-btn {
      width: 40%;
      height: 48px;
      font-size: 16px;
      margin-right: 20px;
      i {
        margin-right: 8px;
      }
    }
  }
}

.dialog-footer {
  padding: 10px 20px;
  background: rgba(5, 29, 57, 0.8);
  text-align: right;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.uav-table-section{
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(64, 158, 255, 0.2);
  background: rgba(16, 42, 77, 0.7);
}


.uav-info-card {
  margin-bottom: 10px;
  .uav-content-grid {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    > div {
      padding: 5px;
    }
  }
}

.video-card {
  .video-content {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 16px;
  }
  
  .video-wrapper {
    position: relative;
    overflow: hidden;
    
    .video-player {
      width: 100%;
      display: block;
      border-radius: 6px;
    }
    
    .video-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      
      .live-tag {
        font-weight: bold;
        letter-spacing: 1px;
      }
    }
  }
  
  .video-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    .control-btn {
      width: 100%;
      height: 48px;
      font-size: 16px;
      
      i {
        margin-right: 8px;
      }
    }
  }
}


</style>