<template>
  <div class="building-detail-container">
    <!-- 页面标题 -->
    <div class="page-title">
      XX 单元 XX 号楼 XX 层详情信息
    </div>

    <!-- 折叠面板容器 -->
    <el-collapse v-model="activeNames" class="detail-collapse" accordion>
      <!-- 楼栋信息详情面板 -->
      <el-collapse-item title="楼栋信息详情" name="buildingInfo">
        <searchtop :searchShowData="searchShowData"></searchtop>
        
      </el-collapse-item>

      <!-- 楼层平面结构图面板 -->
      <el-collapse-item title="楼层平面结构图" name="floorPlan">
        <div class="floor-plan-container">
          <el-empty 
            v-if="!floorPlanImage" 
            description="暂无楼层平面图" 
            class="empty-state"
          />
          <el-image
            v-else 
            style="width: 100px; height: 100px;background-color: aquamarine;"
            :src="floorPlanImage[0]"
            :preview-src-list="floorPlanImage"
            show-progress
            hide-on-click-modal="true"
            fit="cover"
            alt="楼层平面结构图" 
          />
       
        </div>
      </el-collapse-item>

      <!-- 航线列表面板 -->
      <el-collapse-item title="航线列表" name="routeList">
        <div class="table-container">
          <el-table 
            :data="routeTableData" 
            stripe 
            border 
            class="custom-table"
            :header-cell-style="headerCellStyle"
          >
            <el-table-column prop="id" label="序号"  align="center" />
            <el-table-column prop="routeId" label="航线ID"  align="center" />
            <el-table-column prop="takeoffPoint" label="起飞点" align="center" />
            <el-table-column prop="task" label="任务点"  align="center" />
            <el-table-column prop="updateTime" label="更新时间"  align="center">
              <template #default="scope">
                <el-popover 
                  placement="top" 
                  width="200" 
                  trigger="hover"
                  content="具体于安防信息库内容填写<br>Zhen.2025.08.13"
                >
                  <template #reference>
                    <span class="time-link">{{ scope.row.updateTime }}</span>
                  </template>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination 
              layout="total, sizes, prev, pager, next"
              :total="routeTotal"
              :page-size="routePageSize"
              :page-sizes="[5, 10, 20, 50]"
              v-model:current-page="routeCurrentPage"
              @size-change="handleRouteSizeChange"
              @current-change="handleRouteCurrentChange"
            />
          </div>
        </div>
      </el-collapse-item>

      <!-- 火情信息列表面板 -->
      <el-collapse-item title="火情信息列表" name="fireInfo">
        <div class="table-container">
          <el-table 
            :data="fireTableData" 
            stripe 
            border 
            class="custom-table"
            :header-cell-style="headerCellStyle"
          >
            <el-table-column prop="id" label="序号" width="80" align="center" />
            <el-table-column prop="fireTime" label="火情时间" width="180" align="center" />
            <el-table-column prop="location" label="着火点" width="150" align="center" />
            <el-table-column prop="description" label="火情描述" min-width="200" />
            <el-table-column prop="recorder" label="记录人" width="120" align="center" />
            <el-table-column prop="image" label="火情图片" width="120" align="center">
              <template #default="scope">
           
               <el-image @click="handleFireImageClick(scope.row)" style="width: 100px; height: 100px" :src="scope.row.image[0]" fit="fill" />
                <!-- <el-image 
                  v-if="scope.row.image"
                  :src="scope.row.image[0]" 
                  alt="火情图片"
                  :preview-src-list="scope.row.image"
                  class="fire-image"
                  hide-on-click-modal = true
                  :initial-index="400000000000000"
                >
                  <template #error>
                    <div class="image-error">
                      <el-icon><PictureFilled /></el-icon>
                    </div>
                  </template>
                </el-image>
                <span v-else class="no-image">暂无</span> -->
              </template>
            </el-table-column>
            <el-table-column prop="level" label="火情等级" width="120" align="center">
              <template #default="scope">
                <el-tag 
                  :type="getTagType(scope.row.level)" 
                  size="small"
                >
                  {{ scope.row.level }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination 
              layout="total, sizes, prev, pager, next"
              :total="fireTotal"
              :page-size="firePageSize"
              :page-sizes="[5, 10, 20, 50]"
              v-model:current-page="fireCurrentPage"
              @size-change="handleFireSizeChange"
              @current-change="handleFireCurrentChange"
            />
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <el-dialog
      v-model="isFireImagedialogVisible"
      title="火情照片"
      width="800"
      :before-close="handleClose"
    >
      <div class="image-grid">
      <div 
        v-for="(img, index) in fireImagedialogDate.image" 
        :key="index"
        class="image-thumbnail"
        @click="openPreview(index)"
      >
        <el-image
          :src="img"
          fit="cover"
          class="thumbnail-image"
        />
      </div>
    </div>

    <!-- 图片预览组件 -->
    <el-image-viewer
      v-if="previewVisible"
      :url-list="fireImagedialogDate.image"
      :initial-index="previewIndex"
      @close="previewVisible = false"
    />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import searchtop from '../../commentcomponents/searchtop/index.vue'




// 折叠面板状态 - 默认展开第一个面板
const activeNames = ref(['floorPlan']);

// 楼栋信息
const buildingInfo = reactive({
  buildingNo: '',
  buildingName: '',
  floor: ''
});
const searchShowData = ref([
  { label: '楼栋编号', placeholder: "请输入", type: 'input',content:'' ,isShow: false},
  { label: '楼栋名称', placeholder: "请输入", type: 'input',content:'' ,isShow: false},
  { label: '对应楼层', placeholder: "请输入", type: 'input',content:'' ,isShow: false},
  
])
// 楼层平面图
const floorPlanImage = ref(['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']); // 初始为空，实际项目中可替换为真实图片URL
const handleImageError = () => {
  floorPlanImage.value = ''; // 图片加载失败时显示空状态
};

// 航线表格数据
const routeTableData = ref([
  { id: 1, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 2, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 3, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 4, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 5, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 6, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 7, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 8, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 9, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 10, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 11, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 12, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 13, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 14, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 15, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 16, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 17, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
  { id: 18, routeId: '', takeoffPoint: '', task: '', updateTime: '2025-08-13' },
]);
const routeTotal = ref(routeTableData.value.length);
const routeCurrentPage = ref(1);
const routePageSize = ref(10);

// 火情表格数据
const fireTableData = ref([
  { 
    id: 1, 
    fireTime: 'fsaf ', 
    location: 'fa', 
    description: 'gtr', 
    recorder: 'gts', 
    image: ['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',], 
    level: '' 
  },
  { 
    id: 1, 
    fireTime: '', 
    location: '', 
    description: '', 
    recorder: '', 
    image: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  ], 
    level: '' 
  },
  { 
    id: 1, 
    fireTime: '', 
    location: '', 
    description: '', 
    recorder: '', 
    image: ['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',], 
    level: '' 
  },
  { 
    id: 1, 
    fireTime: '', 
    location: '', 
    description: '', 
    recorder: '', 
    image: ['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',], 
    level: '' 
  },
  { 
    id: 2, 
    fireTime: '', 
    location: '', 
    description: '', 
    recorder: '', 
    image: '', 
    level: '' 
  },
  { 
    id: 3, 
    fireTime: '', 
    location: '', 
    description: '', 
    recorder: '', 
    image: '', 
    level: '' 
  }
]);
const fireTotal = ref(fireTableData.value.length);
const fireCurrentPage = ref(1);
const firePageSize = ref(10);

const isFireImagedialogVisible = ref(false);
const fireImagedialogDate = ref([]);
const handleFireImageClick = (info) => {
  console.log('点击图片索引：', info);
  isFireImagedialogVisible.value = true;
  fireImagedialogDate.value = info
};
// 图片预览状态
const previewVisible = ref(false);
const previewIndex = ref(0);
// 打开图片预览
const openPreview = (index) => {
  previewIndex.value = index;
  previewVisible.value = true;
};

// 表格头部样式
const headerCellStyle = {
  'background-color': '#f5f7fa',
  'color': '#1f2937',
  'font-weight': '500'
};

// 获取火情等级标签样式
const getTagType = (level) => {
  switch(level) {
    case '严重':
      return 'danger';
    case '中等':
      return 'warning';
    case '轻微':
      return 'info';
    default:
      return 'default';
  }
};

// 航线分页事件
const handleRouteSizeChange = (val) => {
  routePageSize.value = val;
  console.log('航线当前页个数：', val);
  
  // 实际项目中这里应该调用API加载数据
};

const handleRouteCurrentChange = (val) => {
  routeCurrentPage.value = val;
  console.log('航线当前页码：', val);
  // 实际项目中这里应该调用API加载数据
};

// 火情分页事件
const handleFireSizeChange = (val) => {
  firePageSize.value = val;
  console.log('火情当前页个数：', val);
  // 实际项目中这里应该调用API加载数据
};

const handleFireCurrentChange = (val) => {
  fireCurrentPage.value = val;
  console.log('火情当前页码：', val);
  // 实际项目中这里应该调用API加载数据
};
</script>

<style scoped>
.building-detail-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.page-title {
  font-size: 18px;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

/* 折叠面板样式 */
.detail-collapse {
  border: none;
}

:deep(.el-collapse-item) {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 15px;
  overflow: hidden;
}

:deep(.el-collapse-item__header) {
  padding: 12px 20px;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  font-size: 15px;
  font-weight: 500;
}

:deep(.el-collapse-item__content) {
  padding: 15px 20px;
}

/* 表格容器样式 */
.table-container {
  width: 100%;
 /* z-index: 0; */
  /* background-color: #1f2937; */
  overflow-x: auto;
}

.custom-table {
  width: 100%;
  height: 380px;
  margin-bottom: 16px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* 楼栋信息表单样式 */
.info-form {
  padding: 5px 0;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  min-width: 250px;
  flex: 1;
}

.form-label {
  width: 100px;
  color: #6b7280;
  text-align: right;
  margin-right: 12px;
  white-space: nowrap;
}

.form-input {
  flex: 1;
  min-width: 150px;
}

/* 楼层平面图样式 */
.floor-plan-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 220px;
  border: 1px dashed #e5e7eb;
  border-radius: 4px;
  padding: 20px;
}

.floor-plan-image {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
  border-radius: 4px;
}

.empty-state {
  width: 100%;
}

/* 火情信息列表样式 */
.fire-image {
  /* width: 80px;
  height: 60px; */
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
}

.image-error {
  width: 80px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  color: #909399;
}

.no-image {
  color: #909399;
  font-size: 14px;
}

/* 航线列表样式 */
.time-link {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}



.fire-image-dialog {
  --el-dialog-padding-primary: 20px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px;
}

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

.image-thumbnail:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

/* 响应式调整 */
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  
  .image-thumbnail {
    height: 120px;
  }
}

@media (max-width: 480px) {
  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .image-thumbnail {
    height: 100px;
  }
}

/* 响应式样式 */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .form-item {
    width: 100%;
  }
  
  .page-title {
    font-size: 16px;
  }
  
  .pagination-container {
    justify-content: center;
  }
  
  :deep(.el-collapse-item__header) {
    padding: 10px 15px;
    font-size: 14px;
  }
  
  :deep(.el-collapse-item__content) {
    padding: 10px 15px;
  }
}
</style>