<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>