<template>
  <div class="contenter">
    <!-- 建筑管理 -->
    <div class="box_title">
      火情管理
    </div>
    <div class="contenterTitle">
      <div class="title">
        <div class="title1">建筑详情</div>
      
      </div>

      <div class="buildfilter">
        <div class="buildf1">
          <div class="buildf1t1">建筑名称:</div>
          <el-select class="buildf1t2 select__" placeholder="请选择建筑名称" v-model="build.buildName" @change="buildchangeFn">
            <el-option v-for="item in buildList" :key="item.value" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
          <div class="buildf1t1">建筑楼层:</div>
          <el-select class="buildf1t2 select__" placeholder="请选择建筑名称" v-model="build.buildFloor" @change="buildchangeFn">
            <el-option v-for="item in buildList" :key="item.value" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="buildf2">
            <el-button type="primary" color="#06B0E1" size="large" style="width: 150px;height: 34px;color: #fff;" @click="buildDataChangeFn" >查询</el-button>
          <!-- <div class="buildbutton bucolor2">新增建筑</div> -->
        </div>
      </div>
       <div class="horizontal_container">
          <div >火情列表</div>
          <el-button type="primary" size="large" color="#06B0E1" style="width: 150px; margin-left: 20px;height: 34px;color: #fff;" @click="addFireManageTaskFn">新增火情</el-button>
       </div>
      
      <el-table stripe :data="taskList" width="1000" v-loading="loading1" class="table___"
        element-loading-background="rgba(0, 0, 0, 0.3)" :max-height="545" >
       <!-- :max-height="545"，显示13行记录 -->
        <el-table-column label="建筑名称" align="center">
          <template #default="scope">
            <div >{{ scope.row.aaa0 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="楼层" align="center">
          <template #default="scope">
            {{ scope.row.aaa1 }}
          </template>
        </el-table-column>
        <el-table-column label="着火点" align="center">
          <template #default="scope">
            {{ scope.row.aaa5 }}
          </template>
        </el-table-column>
        <el-table-column label="详细描述" align="center">
          <template #default="scope">
            {{ scope.row.aaa3 }}
          </template>
        </el-table-column>
        <el-table-column label="记录人" align="center">
          <template #default="scope">
            {{ scope.row.aaa3 }}
          </template>
        </el-table-column>
        <el-table-column label="火势记录(图片/视频)" align="center">
          <template #default="scope">
            <div @click="showImgFn(scope.row)" >查看</div>
          </template>
        </el-table-column>
        <el-table-column label="记录时间" align="center">
          <template #default="scope">
            {{ (Date.now())}}
          </template>
        </el-table-column>
        <el-table-column label="任务调度" align="center">
          <template #default="scope">
            <div>前往</div>
          </template>
        </el-table-column>
        <el-table-column label="任务状态" align="center" >
          <template #default="scope">
            <div :style="{color: taskStateColor[scope.row.taskState]}">{{taskStateDes[scope.row.taskState]}}</div>
          </template>
        </el-table-column>
     
      </el-table>
      <div class="page" >
        <el-pagination class="page__"  v-model:current-page="pagination.PageNum" v-model:page-size="pagination.PageSize"
          layout="prev, pager, next " :total="pagination.total" @current-change="handleCurrentChange" />
      </div>

    </div>

    <!-- 新增火情 -->
     <el-dialog 
        v-model="isAddFireManageshowDialog" 
        title="新增火情" 
        width="680px"
        class="fire-manage-dialog"
      >
        <el-form 
          :model="addFireManageForm" 
          label-width="110px" 
          :rules="rules" 
          ref="addFireManageFormRef"
          label-position="top"
        >
          <div class="form-grid">
            <!-- 目标建筑选择 -->
            <el-form-item label="目标建筑" prop="building" class="grid-item">
              <el-select 
                v-model="addFireManageForm.building" 
                placeholder="请选择建筑"
                @change="handleBuildingChange"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="building in buildingList"
                  :key="building.id"
                  :label="building.name"
                  :value="building.id"
                />
              </el-select>
            </el-form-item>

            <!-- 所属楼层选择 -->
            <el-form-item label="所属楼层" prop="floor" class="grid-item">
              <el-select 
                v-model="addFireManageForm.floor" 
                placeholder="请选择楼层"
                clearable
                style="width: 100%"
                :disabled="!addFireManageForm.building"
              >
                <el-option
                  v-for="floor in floorList"
                  :key="floor"
                  :label="floor"
                  :value="floor"
                />
              </el-select>
            </el-form-item>
          </div>

          <!-- 着火点输入 -->
          <el-form-item label="着火点位置" prop="firePoint" class="full-width">
            <el-input 
              v-model="addFireManageForm.firePoint" 
              placeholder="请输入具体着火位置（如：305室东侧）"
              maxlength="100"
              show-word-limit
              clearable
            >
              <template #prefix>
                <el-icon><Location /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <!-- 火源等级选择 -->
          <el-form-item label="火源危险等级" prop="fireLevel" class="full-width">
            <el-select 
              v-model="addFireManageForm.fireLevel" 
              placeholder="请选择火源等级"
              style="width: 100%"
              @click="recordOldFireLevel"
              @change="handleFireLevelChange"
   
            >
              <el-option label="一级（严重）" value="一级"  />
              <el-option label="二级（中等）" value="二级" />
              <el-option label="三级（轻微）" value="三级" />
            </el-select>
          </el-form-item>

          <!-- 详细描述 -->
          <el-form-item label="火情详细描述" prop="description" class="full-width">
            <el-input
              v-model="addFireManageForm.description"
              type="textarea"
              :rows="4"
              placeholder="请详细描述火情情况（如：办公室内电脑起火，伴有浓烟）"
              maxlength="300"
              show-word-limit
              resize="none"
            />
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button 
              @click="addFireManageClose" 
              class="cancel-btn"
            >
              取消
            </el-button>
            <el-button 
              type="primary" 
              @click="addFireManageSubmitForm" 
              class="submit-btn"
              :loading="isSubmitting"
            >
              确认提交
            </el-button>
          </div>
        </template>
     </el-dialog>
     <!-- 火势/图片查看 -->
      <div>
        <el-dialog class="dialogbig" v-model="isFireImgVideoShow" style="background-color: rgba(0, 0, 0, 0)"  >
            <div class="media-container">
                <!-- 图片展示行 -->
                <div class="image-row" >
                    <h3>图片</h3>
                    <div class="image-list" v-if="fireImgVideoShow.fireImages">
                      <div v-for="item in fireImgVideoShow.fireImages" class="image-item" @click="FireImgVideoShowBigImg(item)">
                          <img src="../../static/image/loginback.png" :alt="item.name" />

                          {{ typeof item.url }}--{{ item }}
                          
                      </div>
                    </div>
                    <div v-else> 暂无图片数据</div>
                </div>
                
                <!-- 视频展示行 -->
                <div class="video-row" v-if="fireImgVideoShow.fireVideos">
                    <h3>视频</h3>
                    <div class="video-list" v-if="fireImgVideoShow.fireVideos">
                    <div v-for="(video, index) in fireImgVideoShow.fireVideos" :key="index" class="video-item">
                        <video :src="video.url" controls :poster="video.poster">
                        您的浏览器不支持视频播放
                        </video>
                    </div>
                    </div>
                    <div v-else> 暂无视频数据</div>
                </div>
                </div>
        </el-dialog>
    </div>
    <!-- 放大图片 -->
    <el-dialog
      v-model="isFireImgVideoShowBigImg"
  
      width="1000"
      :before-close="handleClose"
      style="background-color: rgba(0, 0, 0, 0);"
    >
      <img :src="FireImgVideoShowBigImgUrl" alt="加载失败" class="imgbig" />
    </el-dialog>
  </div>
</template>
<script setup>

//import fireShow from '../dialog_infoShow_img_vid/fireShow_img_vid.vue'
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus';

import { number } from 'echarts/core';
import AddFireManage from './addFireManage.vue';
import FireShow_img_vid from '../dialog_infoShow_img_vid/fireShow_img_vid.vue';
// import { filter } from 'echarts/types/src/export/api/util.js';
const isAddFireManageshowDialog = ref(false)
const route = useRoute()
const router = useRouter()
const taskList = ref([])
const props = defineProps({
  taskId: {
    type: number,
  },
 
})
const addFireManageTaskFn = () => {
  console.log("addFireManageTaskFn")
  isAddFireManageshowDialog.value = true
}
const buildDataChangeFn = () => {
  console.log("buildDataChangeFn", build.value.buildFloor)
  // taskList.value = buildData.value.filter(item => item.aaa0 == build.value.name)
  if (build.value.buildName ==="" && build.value.buildFloor==="") {
     ElMessage({
        type: 'warning',
        message: "两个参数不能都为空",
      })
  }else {

    const temp = buildData.value.filter(item => item.aaa0 == (build.value.buildName==''?item.aaa0:build.value.buildName ) && item.aaa1 ==( build.value.buildFloor==''?item.aaa1:build.value.buildFloor))
    
    if (temp != "") {
      taskList.value = temp
    }
    
    
    
    console.log("buildDataChangeFn", temp)
  }
}





onMounted(() => {
  // console.log("000000000--------------",route.query.taskId,"*****",router)
  if (route.query.taskId) {
    taskList.value = buildData.value.filter(item => item.id == route.query.taskId)
  }else {
    taskList.value = buildData.value
  }

})



const isFireImgVideoShow = ref(false)
const imgUrl = ref('')//图片地址
const showImgFn = (scopeImgUrl) => {

  imgUrl.value = '../../static/image/loginback.png'
  isFireImgVideoShow.value = true
  console.log("showImgFn------------",scopeImgUrl)
}
const pagination = ref({
  PageNum: 1,
  PageSize: 10,
  total: 100
})


//切换分页
const handleCurrentChange = () => {

}


const build = ref({
  buildName: '',
  buildFloor: ""
})
const buildList = ref([
  { name: '建筑1', value: '建筑1' }, { name: '建筑2', value: '建筑2' }
])
const taskStateColor=ref(['red','green','yellow'])
const taskStateDes=ref(['等待任务调度','已完成灭火','正在执行灭火任务'])

const buildData = ref([
  {
    id:2 , 
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室大大着火',
    taskState: 0

  },
  {
    aaa0: '建筑2',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 1

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
])
const fireImgVideoShow = ref({
  fireImages:[
  {id:1,name: 'image1', url: '../../static/image/loginback.png' },
  { id:1,name: 'image2', url: '../../static/image/loginback.png' },
  { id:1,name: 'image3', url: '../../static/image/loginback.png' },
  { id:1,name: 'image4', url: '../../static/image/loginback.png' },
  { id:1,name: 'image5', url: '../../static/image/loginback.png' },
  { id:1,name: 'image6', url: '../../static/image/loginback.png' },
],
  fireVideos:[
  { id:1,name: 'video1', url: '../../static/image/loginback.png' },
  { id:1,name: 'video2', url: '../../static/image/loginback.png' },
  { id:1,name: 'video3', url: '../../static/image/loginback.png' },
  { id:1,name: 'video4', url: '../../static/image/loginback.png'},
  { id:1,name: 'video5', url: '../../static/image/loginback.png' },
  { id:1,name: 'video6', url: '../../static/image/loginback.png' },
]
})


//切换选项时更新列表
const buildchangeFn = () => {

}

const isFireImgVideoShowBigImg = ref(false)//放大图片
const FireImgVideoShowBigImgUrl = ref('')//放大图片的url
// 火情列表放大图片
const FireImgVideoShowBigImg = (info) => {
  isFireImgVideoShowBigImg.value = true
  FireImgVideoShowBigImgUrl.value = "@/"+info.url
  console.log("FireImgVideoShowBigImg",FireImgVideoShowBigImgUrl.value)
}


// 新增火情
// 建筑列表数据
const buildingList = ref([
  { id: '1', name: '1号楼', floors: ['1层', '2层', '3层', '4层', '5层'] },
  { id: '2', name: '2号楼', floors: ['1层', '2层', '3层'] },
  { id: '3', name: '3号楼', floors: ['1层', '2层'] }
])

// 楼层列表（动态）
const floorList = ref([])

// 表单数据
const addFireManageForm = ref({
  building: '',
  floor: '',
  firePoint: '',
  fireLevel: '一级',
  description: ''
})

// 验证规则
const rules = {
  building: [{ required: true, message: '请选择建筑', trigger: 'change' }],
  floor: [{ required: true, message: '请选择楼层', trigger: 'change' }],
  firePoint: [
    { required: true, message: '请输入着火点', trigger: 'blur' },
    { max: 100, message: '长度不超过100个字符', trigger: 'blur' }
  ],
  fireLevel: [{ required: true, message: '请选择火源等级', trigger: 'change' }],
  description: [
    { required: true, message: '请输入详细描述', trigger: 'blur' },
    { max: 300, message: '长度不超过300个字符', trigger: 'blur' }
  ]
}

// 对话框控制
const showDialog = ref(false)
const addFireManageFormRef = ref(null)
const previousFireLevelValue = ref('')
// 保留上次的火情等级
const recordOldFireLevel = () => {
  previousFireLevelValue.value = addFireManageForm.value.fireLevel
}
// 修改火情等级回调
const handleFireLevelChange = (newValue) => {
  const oldValue = addFireManageForm.value.fireLevel;
  console.log('-----------oldValue',oldValue)
  ElMessageBox.confirm(
    `确定要修改火情等级为【${newValue}】吗？`, 
    '提示', 
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      // 添加关闭前回调，在对话框关闭前恢复值（可选）
      beforeClose: (action, instance, done) => {
        if (action === 'cancel') {
          addFireManageForm.value.fireLevel = previousFireLevelValue.value;
        }
        done();
      }
    }
  ).then(() => {
    ElMessage({
      type: 'success',
      message: `火情等级已修改为: ${newValue}`,
      duration: 2000
    });

    
  }).catch(() => {

    ElMessage({
      type: 'info',
      message: '已取消修改',
      duration: 1500
    });
  });
}

// 建筑选择变化处理
const handleBuildingChange = (buildingId) => {
  const building = buildingList.value.find(b => b.id === buildingId)
  floorList.value = building ? building.floors : []
  addFireManageForm.floor = ''
}
const addFireManageClose = () => {
  console.log('关闭对话框')
  isAddFireManageshowDialog.value = false
  addFireManageFormRef.value.resetFields()
}
// 提交表单
const addFireManageSubmitForm = () => {
  addFireManageFormRef.value.validate((valid) => {
    if (valid) {
      // 这里实际应该调用API提交数据
      console.log('提交火情数据:', {
        ...addFireManageForm,
        buildingName: buildingList.value.find(b => b.id === addFireManageForm.building)?.name || ''
      })
      
      // 提交成功后关闭对话框并重置表单
      showDialog.value = false
      addFireManageFormRef.value.resetFields()
    }
  })

}
</script>
<style scoped>
.title {
  height: 30px;
  display: flex;
  justify-content: flex-start;
}

.title1 {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF 国际花园小区鸟瞰图
}

.title2 {
  width: 80px;
  height: 25px;
  background-color: #06B0E1;
  /* background-color: linear-gradient(194deg, #06B0E1 0%, #06B0E1 100%); */
  color: #ffffff;
  text-align: center;
  line-height: 25px;
  margin-left: 20px;
  border-radius: 5px;
}

.titleimg {
  width: 25vw;
  height: 30vh;
  margin-top: 10px;
}

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

.buildfilter {
  display: flex;
  width: 100%;
  height: 10%;
  margin-top: 10px;
  border: 1px solid #064D77;
  border-radius: 1%;
  align-items: center; /* 垂直居中 */
}

.buildf1 {
  width: 40vw;
  height: 40px;
  display: flex;
  justify-items: center;
  align-items: center;

}

.buildf1t1 {
  font-size: 14px;
  line-height: 40px;
  width: 200px;
  text-align: center;
  flex-direction:row  ;
  /* background-color: #69878f; */
}

.buildf2 {
  width: 250px;
  height: 40px;
  margin-left: 50px;

  align-items: center;
  display: flex;
  justify-content: space-between;


}

.buildbutton {
 
}

.buildf1t1 {
  font-size: 14px;
  line-height: 40px;
  width: 200px;
  text-align: center;
  flex-direction:row  ;
  /* background-color: #69878f; */
}

.buildf2 {
  width: 250px;
  height: 40px;
  margin-left: 50px;

  align-items: center;
  display: flex;
  justify-content: space-between;


}

.buildbutton {
  
  width: 90px;
  height: 25px;
  border-radius: 5px;
  text-align: center;
  line-height: 25px;
  margin-left: 25px;
  
}


.bucolor1 {
  background-color: #072547;
  color: #06a8d9;
  border: 1px solid #0194f4;
}

.bucolor2 {
  background-color: #06b0e1;
  color: #ffffff;
}

:deep().el-select .el-select__wrapper {
  background-color: #06325c !important;
  border: 1px solid #064d77 !important;
  box-shadow: none;
}

/* :deep() .el-table--border .el-table__cell {
  background-color: #062e51;
} */

/* 斑马行的背景色 */
:deep() .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #062e51 !important;
}

:deep() .el-table--striped .el-table__body tr.el-table__row td {
  background-color: #072547;
  border: none !important;
}

/* 表头背景色 */
:deep() .el-table th {
  background: linear-gradient(to bottom, #063563, #063563);
  border: none !important;
}

/* 表头字体色 */
:deep() .el-table thead {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 16px;
  text-align: right;
}

/* 鼠标经过时 行的背景色 */
:deep() .el-table__body tr:hover>td {
  background-color: #072547 !important;
}


.horizontal_container{
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  align-items: center;

}

.vertical_container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.table_container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.table_container1{
  display: flex;
}
.table___ {
  --el-table-border: 0.5px solid #69878f;
  --el-table-border-color: #69878f;
  border-radius: 5px;
  color: #ffffff;
  max-height: calc(100% - 195px - 30vh);
  overflow: hidden;
}

:deep() .el-table__inner-wrapper::before {
  border: none;
  height: 0 !important;
}

/* //分页 */
.page {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
}

.page__ {
  /* width: 100%; */
  height: 40px;
}

:deep().el-pagination {
  background-color: rgba(0, 0, 0, 0) !important;
}

:deep().el-pagination .btn-prev {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
}

:deep() .el-pagination .btn-next {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
  margin-left: 5px;
}

:deep().el-pagination .el-pager .number {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
  margin-left: 5px;
}

:deep().el-pagination .el-pager .more {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
  margin-left: 5px;

}

/* 新增火情 */

.fire-manage-dialog {
  
  :deep(.el-dialog__header) {
    border-bottom: 1px solid #f0f0f0;
    margin-right: 0;
    padding: 16px 24px;
   
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #1d2129;
    }
  }

  :deep(.el-dialog__body) {
    padding: 20px 24px;
  }

  .el-form-item {
    margin-bottom: 22px;

    &:last-child {
      margin-bottom: 0;
    }

    .el-form-item__label {
      font-weight: 500;
      color: #606266;
      padding-bottom: 8px;
      line-height: 1.4;
    }
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 10px;
    
  }

  .full-width {
    grid-column: span 2;
  }

  :deep(.el-input__prefix) {
    display: flex;
    align-items: center;
    color: var(--el-color-primary);
    padding-right: 8px;
  }

  :deep(.el-textarea__inner) {
    min-height: 120px !important;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;

    .cancel-btn {
      width: 100px;
      &:hover {
        color: var(--el-color-primary);
        border-color: var(--el-color-primary-light-5);
      }
    }

    .submit-btn {
      width: 120px;
      margin-left: 16px;
    }
  }
}

/* 查看火势记录 */
.horizontal-container {
  margin: 20px 0 10px 0;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.media-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: rgb(4, 33, 54);
  border-radius: 10px;
}
/* 图片行样式 */
.image-row {
  margin-bottom: 40px;
}

.image-list {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 10px 0;
}

.image-item {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.image-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-item:hover .image-overlay {
  opacity: 1;
}

/* 视频行样式 */
.video-row {
  margin-bottom: 20px;
}

.video-list {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 10px 0;
}

.video-item {
  flex-shrink: 0;
  width: 300px;
  border-radius: 8px;
  overflow: hidden;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
  /* background: white; */
}

.video-item video {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.video-info {
  padding: 10px;
  background: white;
  text-align: center;
  font-weight: 500;
  color: #333;
}

/* 图片模态框 */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.modal-content img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

.close-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: white;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 标题样式 */
h3 {
  color: #fcfcfc;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 600;
  padding-left: 10px;
  border-left: 4px solid #007bff;
}

/* 滚动条美化 */
.image-list::-webkit-scrollbar,
.video-list::-webkit-scrollbar {
  height: 8px;
}

.image-list::-webkit-scrollbar-track,
.video-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.image-list::-webkit-scrollbar-thumb,
.video-list::-webkit-scrollbar-thumb {
  background: #154e8a;
  border-radius: 4px;
}

.image-list::-webkit-scrollbar-thumb:hover,
.video-list::-webkit-scrollbar-thumb:hover {
  background: #3b5775;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .media-container {
    padding: 15px;
  }
  
  .image-item {
    width: 150px;
    height: 120px;
  }
  
  .video-item {
    width: 250px;
  }
  
  .video-item video {
    height: 150px;
  }
}



</style>