<template>
  <div class="device-status">
    <a-card class="device-card" :bordered="false">
      <!-- 头部 -->
      <template slot="title">
        <div class="device-header">
          <div class="device-title">
            <a-icon type="tool" style="color: #1890FF;" />
            <span>设备安检情况</span>
          </div>
          <div class="device-count">
            设备 {{ (deviceList || []).length }} 项
          </div>
        </div>
      </template>

      <!-- 设备网格 -->
      <div class="device-grid">
        <div
          v-for="device in deviceList"
          :key="device.id"
          class="device-item"
          :class="device.statusClass"
        >
          <!-- 状态指示条 -->
          <!-- 设备内容 -->
          <div class="device-content">
            <!-- 设备头部：图标、名称、品牌型号和状态 -->
            <div class="device-item-header">
              <div class="device-info-section">
                <div class="device-icon">
                  <device-icon :type="getDeviceIconType(device.name)" />
                </div>
                <div class="device-info">
                  <div class="device-name">{{ device.name }}</div>
                  <div class="device-brand-model">品牌：{{ device.brand }} | 型号：{{ device.model }}</div>
                </div>
              </div>
              <div class="device-status-badge" :class="getStatusBadgeClass(device.status)">
                <span class="status-text">{{ device.statusText }}</span>
              </div>
            </div>

            <!-- 基本信息表格 -->
            <div class="basic-info-section" v-if="device.formFields && device.formFields.length > 0">
              <div class="section-title">基本信息</div>
              <div class="basic-info-tags">
                <span
                  v-for="field in device.formFields"
                  :key="field.key"
                  class="info-tag"
                >
                  <span class="tag-label">[{{ field.label }}]</span>
                  <span class="tag-value">{{ formatFieldValue(field) }}</span>
                </span>
              </div>
            </div>

            <!-- 安全检查 -->
            <div class="safety-checks-section" v-if="device.safetyChecks && device.safetyChecks.length > 0">
              <div class="section-title">安全检查</div>
              <div class="safety-checks-grid">
                <div
                  v-for="check in device.safetyChecks"
                  :key="check.name"
                  class="check-item"
                  :class="{ 'check-risk': check.isRisk }"
                >
                  <span class="check-label">{{ check.name }}：</span>
                  <span class="check-value" :class="getCheckValueClass(check.isRisk)">{{ check.value }}</span>
                </div>
              </div>
            </div>

            <!-- 设备照片 -->
            <div class="device-photos-section" v-if="device.photos && device.photos.length > 0">
              <div class="section-title">设备照片</div>
              <file-image-group
                :file-ids="device.photos"
                :service-name="serviceName"
                :columns="2"
                :image-size="60"
                :gap="8"
                :alt-prefix="device.name + '照片'"
                empty-text="暂无设备照片"
              />
            </div>

            <!-- 隐患照片 -->
            <div class="hazard-photos-section" v-if="device.hazardPhotos && device.hazardPhotos.length > 0">
              <div class="section-title">隐患照片</div>
              <!-- 隐患照片使用FileImageGroup -->
              <file-image-group
                v-if="hasRealFileIds(device.hazardPhotos)"
                :file-ids="getFileIds(device.hazardPhotos)"
                :service-name="serviceName"
                :columns="2"
                :image-size="60"
                :gap="8"
                :alt-prefix="device.name + '隐患'"
                empty-text="暂无隐患照片"
              />
              <!-- 备用显示方式 -->
              <div v-else class="hazard-photos-grid">
                <div
                  v-for="(photo, index) in device.hazardPhotos"
                  :key="photo.id"
                  class="hazard-photo-item"
                  @click="handlePreviewHazardPhotos(device.hazardPhotos, index)"
                >
                  <img :src="photo.url" :alt="photo.title" />
                  <div class="photo-overlay">
                    <a-icon type="eye" />
                  </div>
                  <div class="hazard-description">{{ photo.description }}</div>
                </div>
              </div>
            </div>

            <!-- 处理建议 -->
            <div class="processing-advice-section">
              <div class="advice-content" :class="getAdviceClass(device.status)">
                <a-icon :type="getAdviceIcon(device.status)" />
                <span>{{ device.processingAdvice }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="!deviceList || deviceList.length === 0" class="device-empty">
          <a-icon type="tool" style="font-size: 48px; color: #d9d9d9;" />
          <p style="color: #999; margin-top: 16px;">暂无设备信息</p>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { FileImageGroup } from '@vue2-client/base-client/components/common/FileImage'
import DeviceIcon from './DeviceIcon.vue'

export default {
  name: 'DeviceStatus',
  components: {
    FileImageGroup,
    DeviceIcon
  },
  inject: {
    serviceName: { default: '' }
  },
  props: {
    deviceList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    /**
     * 根据设备信息获取图标类型
     */
    getDeviceIconType (deviceName) {
      // 根据设备名称判断类型
      if (deviceName.includes('灶') || deviceName.includes('stove') || deviceName.includes('cooker')) {
        return 'stove'
      }
      if (deviceName.includes('热水器') || deviceName.includes('water') && deviceName.includes('heater')) {
        return 'water-heater'
      }
      if (deviceName.includes('壁挂炉') || deviceName.includes('boiler') || deviceName.includes('wall')) {
        return 'wall-boiler'
      }

      // 默认设备图标
      return 'default'
    },

    /**
     * 检查照片是否有真实文件ID
     */
    hasRealFileIds (photos) {
      return photos && photos.length > 0 && photos.some(photo => photo.fileId)
    },

    /**
     * 获取文件ID数组
     */
    getFileIds (photos) {
      return photos.filter(photo => photo.fileId).map(photo => photo.fileId)
    },

    /**
     * 获取状态徽章样式类
     */
    getStatusBadgeClass (status) {
      const statusMap = {
        normal: 'status-normal',
        warning: 'status-warning',
        error: 'status-error'
      }
      return statusMap[status] || 'status-unknown'
    },

    /**
     * 格式化字段值
     */
    formatFieldValue (field) {
      if (!field.value) return '——'

      // 如果是日期类型，格式化显示
      if (field.type === 'datePicker' || field.key.includes('_date')) {
        return this.formatDate(field.value)
      }

      return field.value
    },

    /**
     * 格式化日期
     */
    formatDate (dateStr) {
      if (!dateStr) return '——'

      try {
        const date = new Date(dateStr)
        if (isNaN(date.getTime())) return dateStr

        return date.toISOString().substring(0, 10)
      } catch (error) {
        return dateStr
      }
    },

    /**
     * 获取当前时间（模拟）
     */
    getCurrentTime () {
      return new Date().toISOString().substring(0, 16).replace('T', ' ')
    },

    /**
     * 预览隐患照片
     */
    handlePreviewHazardPhotos (hazardPhotos, currentIndex = 0) {
      const photos = hazardPhotos.map(photo => photo.url)
      this.$emit('preview-photos', photos, currentIndex)
    },

    /**
     * 获取检查值样式类
     */
    getCheckValueClass (isRisk) {
      return isRisk ? 'check-value-risk' : 'check-value-normal'
    },

    /**
     * 获取建议样式类
     */
    getAdviceClass (status) {
      const classMap = {
        normal: 'advice-normal',
        warning: 'advice-warning',
        error: 'advice-error'
      }
      return classMap[status] || 'advice-normal'
    },

    /**
     * 获取建议图标
     */
    getAdviceIcon (status) {
      const iconMap = {
        normal: 'check-circle',
        warning: 'exclamation-circle',
        error: 'close-circle'
      }
      return iconMap[status] || 'info-circle'
    }
  }
}
</script>

<style lang="less" scoped>
.device-status {
  .device-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

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

.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  min-height: 200px;
}

.device-item {
  position: relative;
  border: 1px solid #e5e7eb;
  border-top: 5px solid #e5e7eb;
  border-radius: 5px;
  overflow: hidden;
  background: white;
  transition: all 0.3s ease;

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

.device-status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
}

.device-content {
  padding: 16px;
}

.device-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.device-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  flex: 1;
}

.device-status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid;
  white-space: nowrap; // 禁止换行，防止打印时文字竖排显示

  &.status-normal {
    background: #f6ffed;
    color: #135200;
    border-color: #b7eb8f;
  }

  &.status-warning {
    background: #fff7e6;
    color: #ad4e00;
    border-color: #ffd591;
  }

  &.status-error {
    background: #fff1f0;
    color: #a8071a;
    border-color: #ffa39e;
  }

  &.status-unknown {
    background: #f5f5f5;
    color: #757575;
    border-color: #e0e0e0;
  }
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.device-photos {
  margin-bottom: 12px;
}

.photo-placeholder {
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  background: #f9fafb;

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

.device-no-photos {
  height: 80px;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #9ca3af;
  background: #f9fafb;
  margin-bottom: 12px;

  .anticon {
    font-size: 20px;
  }

  span {
    font-size: 11px;
  }
}

.device-details {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
  max-height: 120px;
  overflow-y: auto;

  // 滚动条样式
  &::-webkit-scrollbar {
    width: 3px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;

    &:hover {
      background: #a8a8a8;
    }
  }
}

.detail-item {
  display: flex;
  margin-bottom: 4px;

  &:last-child {
    margin-bottom: 0;
  }
}

.detail-label {
  color: #9ca3af;
  margin-right: 4px;
  white-space: nowrap;
}

.detail-value {
  color: #374151;
  flex: 1;
  word-break: break-all;
}

.device-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  text-align: center;
}

/* 响应式适配 */
@media (max-width: 1200px) {
  .device-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .device-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .device-content {
    padding: 12px;
  }

  .device-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .device-name {
    font-size: 14px;
  }

  .device-no-photos {
    height: 70px;
  }
}

@media (max-width: 480px) {
  .device-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .device-title {
    font-size: 14px;
  }

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

/* 新设计组件样式 */
.device-info-section {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.device-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  i {
    font-size: 18px;
    color: #1890ff;
  }
}

.device-info {
  flex: 1;
  min-width: 0;
}

.device-brand-model {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  line-height: 1.2;
}

.section-title {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.basic-info-section,
.safety-checks-section,
.device-photos-section,
.hazard-photos-section,
.processing-advice-section {
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }
}

.basic-info-tags {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.info-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.tag-label {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
}

.tag-value {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

.safety-checks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.check-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;

  &.check-risk {
    .check-label {
      color: #f5222d;
    }
  }
}

.check-label {
  color: #6b7280;
  flex-shrink: 0;
}

.check-value-normal {
  color: #374151;
  font-weight: 500;
}

.check-value-risk {
  color: #f5222d;
  font-weight: 600;
}

.hazard-photos-section {
  .hazard-photos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

.hazard-photo-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #ffccc7;
  background: #fff1f0;

  &:hover {
    .photo-overlay {
      opacity: 1;
    }
  }

  img {
    width: 100%;
    height: 60px;
    object-fit: cover;
  }
}

.hazard-description {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(245, 34, 45, 0.9);
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.processing-advice-section {
  .advice-content {
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;

    .anticon {
      flex-shrink: 0;
      margin-top: 1px;
    }

    span {
      flex: 1;
    }

    &.advice-normal {
      background: #e6f7ff;
      color: #003a8c;
      border: 1px solid #91d5ff;

      .anticon {
        color: #1890ff;
      }
    }

    &.advice-warning {
      background: #fff7e6;
      color: #ad4e00;
      border: 1px solid #ffd591;

      .anticon {
        color: #fa8c16;
      }
    }

    &.advice-error {
      background: #fff1f0;
      color: #a8071a;
      border: 1px solid #ffa39e;

      .anticon {
        color: #f5222d;
      }
    }
  }
}

/* 状态样式 */
.device-pass {
  border-color: rgb(82, 196, 26);
  border-top: 5px solid rgb(82, 196, 26);

  &:hover {
    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.2);
  }
}

.device-warn {
  border-color: #fa8c16;
  border-top: 5px solid #fa8c16;

  &:hover {
    box-shadow: 0 4px 12px rgba(250, 140, 22, 0.2);
  }
}

.device-fail {
  border-color: #f5222d;
  border-top: 5px solid #f5222d;

  &:hover {
    box-shadow: 0 4px 12px rgba(245, 34, 45, 0.2);
  }
}

/* 响应式适配优化 */
@media (max-width: 1024px) {
  .basic-info-tags {
    gap: 6px 10px;
    padding: 10px;
  }

  .tag-label {
    font-size: 10px;
  }

  .tag-value {
    font-size: 11px;
  }

  .device-icon {
    width: 36px;
    height: 36px;

    i {
      font-size: 16px;
    }
  }

  .device-info-section {
    gap: 10px;
  }

  .device-brand-model {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .basic-info-tags {
    gap: 4px 8px;
    padding: 8px;
  }

  .tag-label {
    font-size: 10px;
  }

  .tag-value {
    font-size: 10px;
  }

  .hazard-photos-section {
    .hazard-photos-grid {
      grid-template-columns: 1fr;
    }
  }

  .hazard-photo-item {
    img {
      height: 80px;
    }
  }

  .section-title {
    font-size: 11px;
  }

  .check-item {
    font-size: 11px;
  }
}
</style>
