<template>
  <div>
    <vxe-table
       style="width: 100%;"
      ref="tableRef"
      @checkbox-change="selectTableDateFn"
      @checkbox-all="selectTableDateFn"
      @edit-closed="handleAfterEdit"
      show-overflow
      :edit-config="{trigger: 'click', mode: 'cell'}"
      :data="tableShowData">
   
      <vxe-column field="checkbox" type="checkbox" width="50"></vxe-column>

      <vxe-column field="id" title="火情编号" min-width="80" ></vxe-column>
      <vxe-column field="name" title="建筑名称" min-width="150" ></vxe-column>
      <vxe-column field="floorcount" title="火情楼层" min-width="150" ></vxe-column>
      <vxe-column field="reporter" title="上报人" min-width="150" ></vxe-column>
      <vxe-column field="fireLevel" title="火情等级" width="150" :edit-render="fireLevelEditRender"   ></vxe-column>
      <vxe-column field="updateTime" title="上报时间" min-width="150" ></vxe-column>
      <vxe-column field="discription" title="火情描述" :edit-render="fireDescripEditRender"   min-width="150" ></vxe-column>
      <vxe-column  title="详情查看" min-width="220"  >
        <template #default="scope"> 

          <el-button  @click="handleClick(scope.row)">图片查看</el-button>
          <el-button  @click="handleVideoDialogFn(scope.row)">视频查看</el-button>

        </template>
      </vxe-column>
      
      <vxe-column  title="操作" min-width="220" >
        <template #default="scope"> 

          <el-button  @click="taskSchedulingFn(scope.row)">任务调度</el-button>

        </template>
      </vxe-column>

 
    </vxe-table>
    
  </div>

  <div>
    <!-- <el-table 
    :data="tableShowData" 
    style="width: 100%" 
    @select="selectTableDateFn" 
    @select-all="selectTableDateFn" >
      <el-table-column type="selection" width="55" />
      <el-table-column label="火情编号" width="120">
        <template #default="scope">{{ scope.row.id}}</template>
      </el-table-column>
      <el-table-column prop="name" label="建筑名称" width="120" />
      <el-table-column prop="floorcount" label="火情楼层" width="120"  />
      <el-table-column prop="reporter" label="上报人" width="120"  />
      <el-table-column prop="updateTime" label="上报时间" width="220" />
      <el-table-column label="火情等级" width="220" >
        <template #default="scope"> 
          <el-select v-model="scope.row.fireLevel" placeholder="Select" >
            <el-option
              v-for="item in fireLevelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="discription" label="火情描述"  />
      <el-table-column
        label="详情查看"
        show-overflow-tooltip
      >
      <template #default="scope"> 
        <el-button  @click="handleClick(scope.row)">图片查看</el-button>
        <el-button  @click="handleVideoDialogFn(scope.row)">视频查看</el-button>
      </template>
      
      </el-table-column>
      <el-table-column
      
        label="操作"
      
        show-overflow-tooltip
      >
        <template #default="scope"> 
        <el-button  @click="taskSchedulingFn(scope.row)">任务调度</el-button>

      </template>
      </el-table-column>
    </el-table> -->
    <!-- 分页区域（固定在右下角） -->
    <div class="card-tabs-footer" >
      <div class="pagination-block">
        <span class="page-text">每页显示</span>
        <el-pagination
          v-model:current-page="currentPage2"
          v-model:page-size="pageSize2"
          :page-sizes="[10, 50, 100]"
          size="small"
          background
          layout="sizes, prev, pager, next"
          :total="tableShowData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div v-if="showPreview">
   
      <el-image-viewer
        :url-list="srcList"
        show-progress
        ref="imageRef"
        style="width: 100px; height: 100px"
        fit="cover"
        @close="showPreview = false"
      />
    </div>
   
    <el-dialog
      v-model="isVideoDialogVisible"
      width="800"
      :before-close="handleClose"
    >
      <template #header>
        <span>视频文件 <span style="margin-left: 1rem; color: chartreuse;">{{ videoSrcList.length }}个</span></span>
      </template>
      
      <div class="video-container">
        <div 
          v-for="(src, index) in videoSrcList" 
          :key="index" 
          class="video-wrapper"
        >
          <div class="video-title">视频 {{ index + 1 }}</div>
          <video
            :src="src"
            controls
            class="video-player"
          ></video>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      v-model="isTaskSchedulingDialogVisible"
      width="800px"
      :before-close="handleClose"
      custom-class="task-scheduling-dialog"
    >
      <!-- 标题区域 -->
      <template #header>
        <div class="dialog-header">
          <span class="dialog-title">任务调度</span>
          
        </div>
      </template>

      <!-- 内容区域 -->
      <div class="dialog-content">
        <div class="notification-box">
          <el-icon class="notification-icon"><Bell /></el-icon>
          <span class="notification-text">已通知无人机进行任务，等待响应...</span>
        </div>


      </div>

      <!-- 底部按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" class="action-button">
            <template #icon><VideoPlay /></template>
            前往
          </el-button>
          <el-button class="action-button">
          
            确认
          </el-button>
          
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { message } from 'ant-design-vue'



const fireLevelEditRender = reactive({
  name: 'select',
  options: [
    { label: '一级火情', value: '1' },
    { label: '二级火情', value: '2' },
    { label: '三级火情', value: '3' },
    { label: '四级火情', value: '4' },
  ]
})

const fireDescripEditRender = reactive({
  name: 'input',
})

const handleAfterEdit = ({ row, column }) => {
  console.log('编辑完成后的行数据:', row);


  // 可以在这里提交数据或做其他操作
  return true; // 返回 true 表示编辑成功，false 会阻止修改
};








const  fireLevelOptions = [
  { label: '一级火情', value: '1' },
  { label: '二级火情', value: '2' },
  { label: '三级火情', value: '3' },
  { label: '四级火情', value: '4' },
  { label: '五级火情', value: '5' },
]
const emit = defineEmits(['archiveInfoDateBackcallFn'])
const props = defineProps({
  tableShowData: {
    type: Array,
    default: () => []
  },
  
})

const imageRef = ref(null)
const showPreview = ref(false)

const handleClick = (info) => {
  showPreview.value = true

  console.log("图片查看handleClick",info)
}

const srcList = ref([
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
])

// const srcList = ref([
//   'https://www.w3schools.com/html/mov_bbb.mp4',
// ])
const videoSrcList = ref([ 'https://www.w3schools.com/html/mov_bbb.mp4', 
'https://www.w3schools.com/html/mov_bbb.mp4',
'https://www.w3schools.com/html/mov_bbb.mp4', 
'https://www.w3schools.com/html/mov_bbb.mp4',]
 
)
const isVideoDialogVisible = ref(false)
const handleVideoDialogFn = (info) => { 
  isVideoDialogVisible.value = true
  console.log("图片查看handleClick",info)
}

const isTaskSchedulingDialogVisible = ref(false)
const taskSchedulingFn = (info) => { 
  console.log("任务调度",info)
  isTaskSchedulingDialogVisible.value = true
}
const tableRef = ref() // 确保这里声明了 tableRef
const selectTableDateFn = () => { 

  const $table = tableRef.value
  if ($table) {
      emit('archiveInfoDateBackcallFn',$table.getCheckboxRecords())
  }else{
    console.log('未找到表格实例')
    message.error('未找到表格实例')
  }
  // console.log('selectTableDateFn选择的数据信息',tableRef.value)
  // emit('archiveInfoDateBackcallFn',selectedRows)

} 
// 分页数据
const currentPage2 = ref(1)
const pageSize2 = ref(10)
// 分页事件处理
const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  // getNewTableData()//
};

const handleCurrentChange = (val) => {
  console.log(`当前页 ${val} 条`);
  // getNewTableData()
};


// const getNewTableData = () => { 
//   staffGetPageInfoApi({
//     "currentPageNum": currentPage2.value,
//     "currentPageSize": pageSize2.value,

//   }).then(res => { 
//       if(res.code === 200){
        
//         let tempData = res.data.list
//         // console.log(props.Operation,"--11111111111111111111111---*****---999555555555555999999----")
//         curTableShowData.value[0].tableBody = []
//         //获取未逻辑删除的数据
//         tempData = tempData.filter(element => {
//           return element.isDeleted === 0;
//         });
 
//         tempData.forEach(element => { 
//             element.Operation = [...props.Operation]
          
//           });
//         curTableShowData.value[0].tableBody = tempData
       
//         curTableShowData.value[0].total = res.data.total
//         curTableShowData.value[0].pageSize = res.data.pageSize
//           console.log(curTableShowData.value, '展示数据');

//       }
      
//     }).catch(err => { 
//       message.error(err.message)

//     })

// };
</script>
<style  scoped>
/* 分页区域固定在右下角 */
.card-tabs-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 15px;
  width: auto; /* 自适应宽度 */
}

/* 分页内部 Flex 布局 */
.pagination-block {
  display: flex; /* 核心：启用 Flex 布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 12px; /* 文本与分页间距 */
}

/* 文本样式 */
.page-text {
  color: #606266;
  font-size: 14px;
  white-space: nowrap; /* 防止文本换行 */
}

/* 穿透修改 Element Plus 分页样式 */
:deep(.el-pagination) {
  display: flex; /* 确保分页组件水平排列 */
  align-items: center;
  margin: 0; /* 清除默认外边距 */
}

/* 表格行样式（全局样式需放在 scoped 外或使用 ::v-deep） */
:deep(.el-table .warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

:deep(.el-table .success-row) {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.video-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  max-height: 70vh;
  overflow-y: auto;
}

.video-wrapper {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 0.5rem;
  background: #f9f9f9;
}

.video-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #666;
}

.video-player {
  width: 100%;
  border-radius: 4px;
  aspect-ratio: 16/9;
  background: #000;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.dialog-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.status-indicator {
  display: flex;
  align-items: center;
  color: #67c23a;
  font-size: 14px;
}

.status-icon {
  margin-right: 6px;
  font-size: 16px;
}

.dialog-content {
  padding: 0 20px;
  height: 300px;
  
}

.notification-box {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #f0f7ff;
  border-radius: 4px;
  margin-bottom: 20px;
}

.notification-icon {
  color: #409eff;
  font-size: 18px;
  margin-right: 10px;
}

.notification-text {
  color: #606266;
  font-size: 15px;
}

.progress-section {
  margin-bottom: 25px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #606266;
  font-size: 14px;
}

.progress-percent {
  color: #409eff;
  font-weight: 500;
}

.drone-info {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.info-tag {
  padding: 8px 12px;
  font-size: 13px;
}

.dialog-footer {
  width: 100%;

  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}


.action-button {
  padding: 10px 16px;
  flex: 0.21;
}

.cancel-button {
  padding: 10px 16px;
  color: #f56c6c;
  border-color: #f56c6c;
}

.cancel-button:hover {
  background-color: #fef0f0;
  color: #f56c6c;
}
</style>