<template>
  <div class="hazard-photos">
    <!-- 标题 -->
    <div class="hazard-header">
      <div class="hazard-title">
        <a-icon type="exclamation-triangle" style="color: #fa8c16;" />
        <span>隐患项与现场照片</span>
      </div>
      <div class="hazard-count">
        隐患 {{ (hazardList || []).length }} 项
      </div>
    </div>

    <!-- 隐患列表 -->
    <div class="hazard-content">
      <div class="hazard-list">
        <div
          v-for="hazard in hazardList"
          :key="hazard.id"
          class="hazard-item"
          :class="hazard.levelClass"
        >
          <!-- 隐患头部 -->
          <div class="hazard-item-header">
            <div class="hazard-main-info">
              <div class="hazard-category-item">
                <!--                <span class="category-name">{{ hazard.type || '隐患项' }}</span>-->
                <!--                <span class="item-separator">-</span>-->
                <span class="item-name">{{ hazard.title || '未知项目' }}</span>
              </div>
              <div class="hazard-level">
                <a-tag
                  :color="getAntdTagColor(hazard.level)"
                  class="hazard-level-tag"
                >
                  <a-icon :type="getHazardLevelIcon(hazard.level)" />
                  {{ getHazardLevelText(hazard.level) }}
                </a-tag>
              </div>
            </div>
          </div>

          <!-- 隐患描述 -->
          <div class="hazard-description">
            {{ hazard.description || '—' }}
          </div>

          <!-- 处理方式 -->
          <div class="hazard-suggestion" v-if="hazard.handleMethod && hazard.handleMethod !== '—'">
            <div class="suggestion-label">
              <a-icon type="bulb" />
              <span>处理方式</span>
            </div>
            <div class="suggestion-content">{{ hazard.handleMethod }}</div>
          </div>

          <!-- 隐患照片 -->
          <div class="hazard-photos-section" v-if="hazard.f_defect_paths && hazard.f_defect_paths.length > 0">
            <div class="photos-label">
              <a-icon type="camera" />
              隐患照片
            </div>
            <file-image-group
              :file-ids="hazard.f_defect_paths"
              :service-name="serviceName"
              :columns="3"
              :image-size="70"
              :gap="10"
              alt-prefix="隐患照片"
              empty-text="暂无隐患照片"
            />
          </div>

          <!-- 无照片状态 -->
          <div v-else class="hazard-no-photos">
            <a-icon type="camera" />
            <span>暂无隐患照片</span>
          </div>

          <!-- 现场处理的照片 -->
          <div class="hazard-photos-section" v-if="hazard.handleMethod && hazard.handleMethod === '现场处理' && hazard.f_process_paths && hazard.f_process_paths.length > 0">
            <div class="photos-label">
              <a-icon type="camera" />
              现场处理照片
            </div>
            <file-image-group
              :file-ids="hazard.f_process_paths"
              :service-name="serviceName"
              :columns="3"
              :image-size="70"
              :gap="10"
              alt-prefix="现场处理照片"
              empty-text="暂无现场处理照片"
            />
          </div>
        </div>

        <!-- 无隐患状态 -->
        <div v-if="!hazardList || hazardList.length === 0" class="hazard-empty">
          <div class="empty-icon">
            <a-icon type="safety-certificate" style="color: #52c41a;" />
          </div>
          <div class="empty-text">
            <div class="empty-title">安检正常</div>
            <div class="empty-subtitle">未发现安全隐患</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { FileImageGroup } from '@vue2-client/base-client/components/common/FileImage'
import { getConfigByNameAsync } from '@vue2-client/services/api/common'

export default {
  name: 'HazardPhotos',
  components: {
    FileImageGroup
  },
  inject: {
    serviceName: { default: '' }
  },
  props: {
    hazardList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      hazardLevelConfig: []
    }
  },
  methods: {
    /**
     * 加载隐患等级配置
     */
    async loadHazardLevelConfig () {
      try {
        const config = await getConfigByNameAsync('riskLevelConfig', 'af-system')
        this.hazardLevelConfig = config?.riskLevel || []
      } catch (e) {
        console.warn('[HazardPhotos] 加载隐患等级配置失败:', e)
        this.hazardLevelConfig = []
      }
    },

    /**
     * 获取隐患等级文本
     * 优先使用 hazardLevelConfig（格式: [{value: "紧急隐患", result: "级别4"}, ...]）
     * 如果配置为空则使用默认映射
     */
    getHazardLevelText (level) {
      // 优先使用配置的映射
      if (this.hazardLevelConfig && this.hazardLevelConfig.length > 0) {
        const item = this.hazardLevelConfig.find(r => r.value === level)
        if (item) return item.result || level
      }
      // 配置为空时使用默认映射
      const textMap = {
        紧急隐患: '紧急隐患',
        重大隐患: '重大隐患',
        中等隐患: '中等隐患',
        一般隐患: '一般隐患',
        其他隐患: '其他隐患',
        urgent: '紧急隐患',
        major: '重大隐患',
        medium: '中等隐患',
        minor: '一般隐患'
      }
      return textMap[level] || '其他隐患'
    },

    /**
     * 获取Ant Design Vue Tag颜色
     */
    getAntdTagColor (level) {
      const colorMap = {
        紧急隐患: 'red',
        重大隐患: 'red',
        中等隐患: 'orange',
        一般隐患: 'gold',
        urgent: 'red',
        major: 'red',
        medium: 'orange',
        minor: 'gold'
      }
      return colorMap[level] || 'orange'
    },

    /**
     * 获取隐患等级图标
     */
    getHazardLevelIcon (level) {
      const iconMap = {
        紧急隐患: 'exclamation-circle',
        重大隐患: 'exclamation-circle',
        中等隐患: 'warning',
        一般隐患: 'info-circle',
        其他隐患: 'info-circle',
        urgent: 'exclamation-circle',
        major: 'exclamation-circle',
        medium: 'warning',
        minor: 'info-circle'
      }
      return iconMap[level] || 'warning'
    }
  },
  mounted() {
    this.loadHazardLevelConfig()
  }
}
</script>

<style lang="less" scoped>
.hazard-photos {
  border-radius: 8px;
  background: white;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.hazard-header {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hazard-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.hazard-count {
  font-size: 14px;
  color: #6b7280;
  font-weight: 400;
}

.hazard-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

.hazard-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 120px;
}

.hazard-item {
  border-radius: 12px;
  padding: 16px;
  border: 1px solid;
  transition: all 0.2s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
  }

  &.hazard-high {
    background: #fff1f0;
    border-color: #ffa39e;

    &:hover {
      background: #ffebee;
      border-color: #ff7875;
    }
  }

  &.hazard-medium {
    background: #fff7e6;
    border-color: #ffd591;

    &:hover {
      background: #fff2e8;
      border-color: #ffb347;
    }
  }

  &.hazard-low {
    background: #feffe6;
    border-color: #fff566;

    &:hover {
      background: #fffef0;
      border-color: #ffec3d;
    }
  }

  &.hazard-unknown {
    background: #f5f5f5;
    border-color: #e0e0e0;

    &:hover {
      background: #f0f0f0;
      border-color: #d0d0d0;
    }
  }
}

.hazard-item-header {
  margin-bottom: 12px;
}

.hazard-main-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.hazard-category-item {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
}

.category-name {
  color: #6b7280;
  font-weight: 500;
}

.item-separator {
  margin: 0 6px;
  color: #9ca3af;
}

.item-name {
  color: #1f2937;
  font-weight: 600;
}

.hazard-level {
  flex-shrink: 0;
}

.hazard-level-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  white-space: nowrap; // 禁止换行，防止打印时文字竖排显示

  .anticon {
    font-size: 12px;
  }
}

.hazard-description {
  font-size: 13px;
  color: #374151;
  line-height: 1.5;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  border-left: 3px solid #fa8c16;
}

.hazard-suggestion {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(24, 144, 255, 0.05);
  border: 1px solid rgba(24, 144, 255, 0.15);
  border-radius: 6px;

  .suggestion-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #1890ff;
    margin-bottom: 4px;

    .anticon {
      font-size: 12px;
      color: #1890ff;
    }
  }

  .suggestion-content {
    font-size: 13px;
    color: #1f2937;
    line-height: 1.4;
    padding-left: 18px;
  }
}

.hazard-photos-section {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 12px;
}

.photos-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 8px;

  .anticon {
    color: #9ca3af;
  }
}

.hazard-no-photos {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  color: #9ca3af;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;

  .anticon {
    font-size: 14px;
  }
}

.hazard-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;
  text-align: center;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 8px;
  padding: 20px;
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.empty-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.empty-title {
  font-size: 16px;
  font-weight: 600;
  color: #135200;
}

.empty-subtitle {
  font-size: 12px;
  color: #389e0d;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .hazard-header {
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .hazard-content {
    padding: 12px;
  }

  .hazard-item {
    padding: 12px;
  }

  .hazard-main-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hazard-category-item {
    font-size: 14px;
  }

  .hazard-description {
    font-size: 12px;
    padding: 6px 10px;
  }

  .hazard-suggestion {
    font-size: 11px;
    padding: 4px 8px;
  }
}

@media (max-width: 480px) {
  .hazard-title {
    font-size: 14px;
  }

  .hazard-count {
    font-size: 12px;
  }
}

/* 滚动条样式 */
.hazard-content::-webkit-scrollbar {
  width: 4px;
}

.hazard-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.hazard-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;

  &:hover {
    background: #a8a8a8;
  }
}

/* Ant Design Tag 样式增强 */
:deep(.ant-tag) {
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

/* 图片网格样式 */
:deep(.image-grid){
  display: flex !important;
}
</style>
