<template>
  <div class="fire-history-container">
    <ul class="fire-list">
      <li v-for="(item, index) in buildFireData" :key="index" class="fire-item">
        <div class="fire-card expanded">
          <div class="fire-header">
            <div class="header-content">
              <span class="building-name">{{ item.unitBuilding }}</span>
              <div class="badge" :class="getFireLevelClass(item.fireLevel)">
                {{ item.fireLevel || '未知' }}
              </div>
              <el-tooltip content="导出记录" placement="top">
                <el-button 
                  type="primary" 
                  circle 
                  size="small"
                  @click.stop="exportRecord(item)"
                  class="export-btn"
                >
                  <el-icon><Download /></el-icon>
                </el-button>
              </el-tooltip>
            </div>
          </div>
          
          <div class="fire-content">
            <div class="responsive-table-wrapper">
              <table class="fire-details-table">
                <tbody>
                  <tr 
                    v-for="(row, i) in tableRows(item)" 
                    :key="i"
                    :class="{
                      'media-row': row.isMedia,
                      'odd-row': i % 2 === 0,
                      'even-row': i % 2 !== 0
                    }"
                  >
                    <th>{{ row.label }}</th>
                    <td :class="row.class">
                      <template v-if="!row.isMedia">
                        {{ row.value }}
                      </template>
                      <template v-else>
                        <div v-if="row.type === 'image'" class="media-scroll-container">
                          <div class="media-gallery">
                            <div class="demo-image__custom-toolbar">
                              <el-image
                                style="width: 100px; height: 100px"
                                :src="row.value[0]"
                                :preview-src-list="row.value"
                                fit="cover"
                                show-progress
                              >
                                <template
                                    #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
                                  >
                                    <el-icon @click="prev"><Back /></el-icon>
                                    <el-icon @click="next"><Right /></el-icon>
                                    <el-icon @click="setActiveItem(srcList.length - 1)">
                                      <DArrowRight />
                                    </el-icon>
                                    <el-icon @click="actions('zoomOut')"><ZoomOut /></el-icon>
                                    <el-icon
                                      @click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })"
                                    >
                                      <ZoomIn />
                                    </el-icon>
                                    <el-icon
                                      @click="
                                        actions('clockwise', { rotateDeg: 180, enableTransition: false })
                                      "
                                    >
                                      <RefreshRight />
                                    </el-icon>
                                    <el-icon @click="actions('anticlockwise')"><RefreshLeft /></el-icon>
                                    <el-icon @click="reset"><Refresh /></el-icon>
                                    <el-icon @click="fireRecordImgDownload(activeIndex)"><Download /></el-icon>
                                  </template>
                              </el-image>
                            </div>
                          </div>
                          <div class="scroll-bar"></div>
                        </div>
                        <div v-else class="media-scroll-container">
                          <div class="media-video-container">
                            <div 
                              v-for="(video, vIdx) in row.value" 
                              :key="vIdx" 
                              class="media-video"
                            >
                              <video 
                                :src="video" 
                                controls
                                preload="metadata"
                              >
                                您的浏览器不支持视频播放
                              </video>
                            </div>
                          </div>
                          <div class="scroll-bar"></div>
                          <span v-if="!row.value || row.value.length === 0" class="no-media">暂无视频</span>
                        </div>
                      </template>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </li>
    </ul>

    <el-dialog 
      v-model="showImageDialog" 
      class="image-preview-dialog"
      append-to-body
      width="500"
      :show-close="false"
    >
      <div class="image-preview-container">
        <img :src="currentImage" class="full-image">
        <div class="image-actions">
          <el-tooltip content="下载当前图片" placement="top">
            <el-button 
              type="primary" 
              circle 
              class="download-btn"
              @click.stop="downloadImage(currentImage)"
            >
              <el-icon><Download /></el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElDialog, ElButton, ElIcon, ElTooltip, ElImage } from 'element-plus';
import { Download } from '@element-plus/icons-vue';

const props = defineProps(["buildFireData"])

const showImageDialog = ref(false);
const currentImage = ref('');

const tableRows = (item) => [
  { label: '建筑名称', value: item.unitName },
  { label: '楼层', value: item.unitFloor },
  { label: '房间号', value: item.unitRoom },
  { label: '着火点', value: item.firePoint },
  { label: '详细描述', value: item.fireDescribe, class: 'description' },
  { label: '记录人', value: item.fireRecord },
  { label: '联系电话', value: item.fireRecordPhone },
  { 
    label: '火势图片', 
    value: item.fireImg || [], 
    isMedia: true, 
    type: 'image' 
  },
  { 
    label: '记录视频', 
    value: item.fireVideo || [], 
    isMedia: true, 
    type: 'video' 
  },
  { label: '记录时间', value: item.fireRecordTime }
];

const fireRecordImgDownload = (index) => {
  console.log('当前获取的是要下载的图片索引下表:', index,props.buildFireData[0].fireImg[index]);
};

const getFireLevelClass = (level) => {
  switch(level) {
    case '一级': return 'level-high';
    case '二级': return 'level-medium';
    case '三级': return 'level-low';
    default: return 'level-unknown';
  }
};

const exportRecord = (item) => {
  console.log('导出记录:', item);
};

const downloadImage = (url) => {
  console.log('下载图片:', url);
  showImageDialog.value = false;
};
</script>

<style scoped>
/* 基础变量 */
:root {
  --primary-color: #06B0E1;
  --dark-bg: #072547;
  --border-color: #06B0E1;
  --text-light: #ffffff;
  --table-header-bg: rgba(13, 84, 104, 0.5);
  --scrollbar-bg: #023375;
  --scrollbar-thumb: #0d68c1;
  --scrollbar-height: 6px;
  --odd-row-bg: rgba(6, 176, 225, 0.05);
  --even-row-bg: rgba(6, 176, 225, 0.1);
}

/* 容器样式 */
.fire-history-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0a284b;
}

.fire-list {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow-y: auto;
}

.fire-item {
  margin: 5px;
}

.fire-card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--dark-bg);
  display: flex;
  flex-direction: column;
  cursor: default;
  overflow: hidden;
}

.fire-card.expanded {
  background-color: rgba(7, 37, 71, 0.9);
  box-shadow: 0 2px 8px rgba(13, 79, 155, 0.9);
  border-radius: 1%;
}

/* 头部样式 */
.fire-header {
  padding: 12px 16px;
  color: var(--text-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.header-content {
  padding-left: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 30px;
  color: #fff;
  flex-grow: 1;
  
  
}

.building-name {
  font-weight: bold;
  font-size: 16px;
}

.badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.badge.level-high {
  background-color: #f56c6c;
}

.badge.level-medium {
  background-color: #e6a23c;
}

.badge.level-low {
  background-color: #67c23a;
}

.badge.level-unknown {
  background-color: #909399;
}

.export-btn {
  margin-left: 85%;
  background-color: rgba(247, 247, 247, 0.2);
  border: none;
  color: white;
}

/* 表格样式 */
.responsive-table-wrapper {
  width: 100%;
  overflow-x: auto;
  padding: 0;
}

.fire-details-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.fire-details-table th,
.fire-details-table td {
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  color: white;
}

.fire-details-table th {
  background-color: var(--table-header-bg);
  text-align: center;
  width: 180px;
  min-width: 180px;
  position: sticky;
  left: 0;
}

/* 奇偶行不同色实现 */
.fire-details-table tr.odd-row td {
  background-color: var(--odd-row-bg);
}

.fire-details-table tr.even-row td {
  background-color: var(--even-row-bg);
}

/* 媒体行特殊样式 */
.fire-details-table tr.media-row td {
  padding: 8px 16px;
}

.description {
  white-space: pre-wrap;
}

/* 媒体区域 */
.media-scroll-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.media-gallery, .media-video-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.demo-image__custom-toolbar {
  position: relative;
  display: inline-block;
}

.image-counter {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 1;
}

.media-video {
  flex: 0 0 auto;
  width: 200px;
  height: 120px;
}

.media-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.no-media {
  color: #9ca3af;
  font-style: italic;
}

/* 图片预览 */
.image-preview-container {
  position: relative;
}

.full-image {
  width: 100%;
  display: block;
  border-radius: 4px;
  max-height: 80vh;
  object-fit: contain;
}

.image-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .fire-details-table th {
    width: 120px;
    min-width: 120px;
  }
  
  .media-video {
    width: 160px;
    height: 90px;
  }
}

@media (max-width: 576px) {
  .fire-details-table th,
  .fire-details-table td {
    padding: 8px 12px;
  }
  
  .building-name {
    font-size: 14px;
  }
}
</style>