<template>
  <div class="fire-report-detail">
    <!-- 页面标题 -->
    <div class="report-header">
      <h2>火情上报详情</h2>
      <span class="close-btn" @click="handleClose"> <el-icon><Close /></el-icon></span>
    
    </div>

    <!-- 表单内容 -->
    <div class="report-content">
      <!-- 基本信息区域 -->
      <div class="info-section">
        <div class="info-item">
          <label class="info-label">上报人:</label>
          <div class="info-value">
            <input type="text" placeholder="请输入" class="info-value" disabled :value="`${userAppStoreInstance.userInfo.name}`">
           </div>
        </div>

        <div class="info-item">
          <label class="info-label">着火建筑:</label>
          <div class="info-value"><input type="text" placeholder="请输入" class="info-value" ></div>
        </div>
        
        <div class="info-item">
          <label class="info-label">着火楼层:</label>
          <div class="info-value"><input type="text" placeholder="请输入" class="info-value" ></div>
        </div>
      </div>

      <!-- 图片区域 -->
      <div class="media-section">
        <h3 class="section-title">现场图片</h3>
        <div class="image-container">
     
             <updataImg  :updataImageCount="1"></updataImg>
         
        </div>
      </div>

      <!-- 视频区域 -->
      <div class="media-section">
        <h3 class="section-title">现场视频</h3>
        <div class="video-container">
        <video src="" controls></video>
        </div>
      </div>

      <!-- 描述区域 -->
      <div class="description-section">
        <h3 class="section-title">描述</h3>
        <el-input
          type="textarea"
          placeholder="请输入"
          class="description-input"
          :rows="4"
        />
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

import useAppStore from '../../../../store/module/app';
import updataImg from '../../../systemmanage/components/updataImg.vue';
const userAppStoreInstance = useAppStore();
// 关闭按钮事件
const handleClose = () => {
  // 这里可以添加关闭当前页面或弹窗的逻辑
  console.log('关闭火情上报详情');
};

// 监听窗口大小变化，实现自适应
const handleResize = () => {
  // 可以在这里添加需要响应式调整的逻辑
  console.log('窗口大小变化');
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped lang="scss">
.fire-report-detail {
  width: 100%;
  height: 90%;
  min-height: 100vh;
  padding: 10px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  
  .report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    
    h2 {
      margin: 0;
      font-size: 1.5rem;
      color: #333;
    }
    
    .close-btn {
      padding: 5px 10px;
    }
    .close-btn:hover{
      background-color: rgb(118, 143, 168,0.1);
      cursor: pointer
    }
  }
  
  .report-content {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .info-section {
    display: flex;
  flex-direction: column; /* 子元素竖直排列 */
  gap: 16px; /* info-item 之间的间距（竖直方向） */
  padding: 10px; /* 可选：整体内边距 */
    
    .info-item {
      display: flex; /* 内部元素水平排列 */
  align-items: center; /* 垂直居中对齐 */
  gap: 12px; /* label 和 value 之间的间距（水平方向） */
      .info-label {
        width: 80px; /* 固定宽度，确保所有 label 对齐 */
  font-weight: 500; /* 可选：加粗标签文字 */
  color: #666; /* 可选：标签文字颜色 */
      }
      
      .info-value {
         flex: 1; /* 占满剩余宽度 */
    padding: 0px 4px; /* 内边距，增强可读性 */
    border-radius: 4px; /* 可选：圆角边框 */
    min-height: 36px; /* 可选：固定高度，确保对齐 */
    display: flex; /* 内容垂直居中 */
    align-items: center;
      }
    }
  }
  
  .section-title {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 15px;
    padding-left: 5px;
    border-left: 3px solid #409eff;
  }
  
  .media-section {
    margin-bottom: 30px;
    
    .image-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      
      .image-item {
        aspect-ratio: 4/3;
        background-color: #f0f0f0;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        
        .placeholder-image {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #999;
          
          .image-icon {
            font-size: 2rem;
          }
        }
      }
    }
    
    .video-container {
      width: 100%;
      
      .video-placeholder {
        width: 100%;
        aspect-ratio: 16/9;
        background: linear-gradient(to bottom, #444, #222);
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        
        .video-overlay {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          font-size: 1rem;
          text-align: center;
        }
        
        .video-controls {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 10px;
          background: linear-gradient(transparent, rgba(0,0,0,0.7));
          color: #fff;
          display: flex;
          align-items: center;
          gap: 15px;
          
          .play-btn {
            background: rgba(0,0,0,0.5);
            color: #fff;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          .video-time {
            font-size: 0.8rem;
            min-width: 80px;
          }
          
          .video-progress {
            flex: 1;
            height: 4px;
            background-color: rgba(255,255,255,0.3);
            border-radius: 2px;
            position: relative;
            
            .progress-bar {
              position: absolute;
              left: 0;
              top: 0;
              height: 100%;
              width: 30%;
              background-color: #409eff;
              border-radius: 2px;
              
              .progress-indicator {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translate(50%, -50%);
                width: 12px;
                height: 12px;
                background-color: #fff;
                border-radius: 50%;
                box-shadow: 0 0 5px rgba(0,0,0,0.3);
              }
            }
          }
          
          .volume-btn, .fullscreen-btn {
            color: #fff;
            background: transparent;
            padding: 5px;
          }
        }
      }
    }
  }
  
  .description-section {
    .description-input {
      width: 100%;
      min-height: 120px;
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .fire-report-detail {
    padding: 15px 10px;
    
    .info-section {
      grid-template-columns: 1fr;
    }
    
    .image-container {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .video-controls {
      gap: 10px;
      
      .video-time {
        display: none;
      }
    }
  }
}
</style>