<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>{{ config?.titleText || 'AI检测结果' }}</span>
          </div>
          <div class="device-count">
            总计项数：<span class="count-total">{{ checkTotalCount }}</span>&nbsp;项
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;识别一致：<span class="count-matched">{{ checkTotalCount - unmatchedCount }}</span>&nbsp;项
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;识别不一致：<span class="count-unmatched">{{ unmatchedCount }}</span>&nbsp;项
          </div>
        </div>
      </template>

      <!-- 设备网格 -->
      <div class="device-grid">
        <!-- 第一行：两个卡片并排 -->
        <div class="device-row">
          <!-- 操作违规 -->
          <div class="device-item">
            <div class="device-content">
              <div class="device-item-header">
                <div class="device-info-section">
                  <div class="device-icon">
                    <device-icon type="stove"/>
                  </div>
                  <div class="device-info">
                    <div class="device-name">{{ getDeviceByName('operationalViolation')?.name }}</div>
                    <div class="device-brand-model">{{ getDeviceByName('operationalViolation')?.desc }}</div>
                  </div>
                </div>
                <div class="device-status-badge status-warning">
                  <span class="status-text">{{ getDeviceByName('operationalViolation')?.tag }}</span>
                </div>
              </div>
              <div class="violation-section">
                <div class="violation-row section-header">
                  <span class="header-item">详情</span>
                  <span class="header-item">图片</span>
                </div>
                <div
                  v-for="item in getDeviceByName('operationalViolation')?.item || []"
                  :key="item.key"
                  class="violation-row">
                  <span class="violation-key">{{ item.key }}</span>
                  <div class="violation-images" v-if="item.img && item.img.length > 0">
                    <file-image-group
                      :file-ids="getImagesPhotos(item.img)"
                      :service-name="serviceName"
                      :columns="2"
                      :image-size="60"
                      :gap="8"
                    />
                  </div>
                  <div v-else class="violation-images-empty"></div>
                </div>
                <div v-if="(!getDeviceByName('operationalViolation')?.item || getDeviceByName('operationalViolation')?.item.length === 0)" class="empty-content">
                  <span>暂无数据</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 检测结果不一致 -->
          <div class="device-item">
            <div class="device-content">
              <div class="device-item-header">
                <div class="device-info-section">
                  <div class="device-icon">
                    <device-icon type="stove"/>
                  </div>
                  <div class="device-info">
                    <div class="device-name">{{ getDeviceByName('detectionResultInconsistent')?.name }}</div>
                    <div class="device-brand-model">{{ getDeviceByName('detectionResultInconsistent')?.desc }}</div>
                  </div>
                </div>
                <div class="device-status-badge status-warning">
                  <span class="status-text">{{ getDeviceByName('detectionResultInconsistent')?.tag }}</span>
                </div>
              </div>
              <div class="inconsistent-section">
                <div class="inconsistent-row section-header">
                  <span class="header-item">详情</span>
                  <span class="header-item">图片</span>
                  <span class="header-item">安检结果</span>
                  <span class="header-item">AI检测结果</span>
                </div>
                <div
                  v-for="item in getDeviceByName('detectionResultInconsistent')?.item || []"
                  :key="item.index"
                  class="inconsistent-row">
                  <div class="inconsistent-item">{{ item.name }}</div>
                  <div class="inconsistent-item">
                    <file-image-group
                      v-if="item.inspectorImg"
                      :file-ids="getImagesPhotos([item.inspectorImg])"
                      :service-name="serviceName"
                      :columns="2"
                      :image-size="60"
                      :gap="8"
                    />
                    <span v-else></span></div>
                  <div class="inconsistent-item">
                    <a-tag :color="getStatusTag(item.inspectorVal, item.options)?.color">
                      {{ getStatusTag(item.inspectorVal, item.options)?.text }}
                    </a-tag>
                  </div>
                  <div class="inconsistent-action">
                    <a-tag
                      :color="getStatusTag(item.aiVal, item.options)?.color"
                      :class="{ 'clickable-tag': isInconsistent(item) }"
                      @click="isInconsistent(item) && handleProcess(item)"
                    >
                      {{ getStatusTag(item.aiVal, item.options)?.text }}
                    </a-tag>
                  </div>
                </div>
                <div v-if="(!getDeviceByName('detectionResultInconsistent')?.item || getDeviceByName('detectionResultInconsistent')?.item.length === 0)" class="empty-content">
                  <span>暂无数据</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 第二行：新增隐患（只有item长度大于0才展示） -->
        <div class="device-row" v-if="getDeviceByName('addDanger')?.item && getDeviceByName('addDanger')?.item.length > 0">
          <div class="device-item danger-full-width">
            <div class="device-content">
              <div class="device-item-header">
                <div class="device-info-section">
                  <div class="device-icon">
                    <device-icon type="stove"/>
                  </div>
                  <div class="device-info">
                    <div class="device-name">{{ getDeviceByName('addDanger')?.name }}</div>
                    <div class="device-brand-model">{{ getDeviceByName('addDanger')?.desc }}</div>
                  </div>
                </div>
                <div class="device-status-badge status-warning">
                  <span class="status-text">{{ getDeviceByName('addDanger')?.tag }}</span>
                </div>
              </div>
              <div class="danger-section">
                <div class="danger-row section-header">
                  <span class="header-item">详情</span>
                  <span class="header-item">图片</span>
                  <span class="header-item">AI检测结果</span>
                </div>
                <div
                  v-for="item in getDeviceByName('addDanger')?.item || []"
                  :key="item.index"
                  class="danger-row">
                  <div class="danger-item">{{ item.name }}</div>
                  <div class="danger-item">
                    <file-image-group
                      v-if="item.aiImg"
                      :file-ids="getImagesPhotos([item.aiImg])"
                      :service-name="serviceName"
                      :columns="2"
                      :image-size="60"
                      :gap="8"
                    />
                    <span v-else></span></div>
                  <div class="danger-item">{{ item.aiVal }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="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: 'AiDeviceStatus',
  components: {
    FileImageGroup,
    DeviceIcon
  },
  inject: {
    serviceName: {default: ''}
  },
  props: {
    deviceList: {
      type: Array,
      default: () => []
    },
    config: {
      type: Object,
      default: () => {
      }
    },
    checkTotalCount: {
      type: Number,
      default: 0
    }
  },
  computed: {
    unmatchedCount() {
      const unmatched =
        (this.getDeviceByName('detectionResultInconsistent')?.item || []).length

      const add =
        (this.getDeviceByName('addDanger')?.item || []).length

      return  unmatched + add
    },
  },
  methods: {

    /**
     * 根据key获取设备数据
     * @param {string} key - 设备key
     * @returns {object|null} - 设备数据
     */
    getDeviceByName(key) {
      return this.deviceList.find(device => device.key === key)
    },

    /**
     * 判断安检结果和AI检测结果是否不一致
     * @param {object} item - 检测项数据
     * @returns {boolean} - 是否不一致
     */
    isInconsistent(item) {
      const inspectorTag = this.getStatusTag(item.inspectorVal, item.options)
      const aiTag = this.getStatusTag(item.aiVal, item.options)
      return inspectorTag?.text !== aiTag?.text
    },

    /**
     * 根据值和options判断状态
     * @param {string} value - 当前值
     * @param {array} options - 选项配置数组
     * @returns {object} - { color, text }
     */
    getStatusTag(value, options) {
      if (!options || !Array.isArray(options)) {
        return { color: 'default', text: value || '未知' }
      }

      // 扁平化 options（处理二维数组）
      const flatOptions = options.flat()
      const matchedOption = flatOptions.find(opt => opt.data === value)

      if (matchedOption) {
        if (matchedOption.isdefect) {
          return { color: 'red', text: '隐患' }
        } else {
          return { color: 'green', text: '正常' }
        }
      }

      return { color: 'default', text: value || '未知' }
    },

    /**
     * 处理按钮点击事件 - 将数据抛出到父组件
     */
    handleProcess(item) {
      this.$emit('process-item', item)
    },

    /**
     * 获取设备照片（将 url 数组转换为 {url} 数组）
     */
    getImagesPhotos(images) {
      return Array.isArray(images)
        ? images.map(url => ({url, photo_name: url}))
        : []
    },

    /**
     * 预览隐患照片
     */
    handlePreviewHazardPhotos(hazardPhotos, currentIndex = 0) {
      const photos = hazardPhotos.map(photo => photo.url)
      this.$emit('preview-photos', photos, currentIndex)
    }
  }
}
</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;
  white-space: pre-wrap;

  .count-total {
    color: #1890ff;
    font-weight: 600;
  }
  .count-matched {
    color: #52c41a;
    font-weight: 600;
  }
  .count-unmatched {
    color: #f5222d;
    font-weight: 600;
  }
}

.device-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 150px;
}

.device-row {
  display: flex;
  gap: 16px;
}

.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;
  width: calc(50% - 8px);

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

  &.danger-full-width {
    width: calc(50% - 8px);
  }
}

.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: 12px;
  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: 12px;
  }
}

.device-details {
  font-size: 12px;
  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;
}

/* 空内容样式 */
.empty-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #9ca3af;
  font-size: 12px;
}

/* 响应式适配 */
@media (max-width: 1200px) {
  .device-grid {
    gap: 12px;
  }

  .device-row {
    gap: 12px;
  }

  .device-item {
    width: calc(50% - 6px);
  }
}

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

  .device-row {
    flex-direction: column;
    gap: 12px;
  }

  .device-item {
    width: 100%;
  }

  .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: 12px;
  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: grid;
  grid-template-columns: 1fr 60px;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;

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

.check-text {
  display: flex;
  align-items: center;
}

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

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

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

.check-photo {
  width: 60px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
}

.check-photo-placeholder {
  width: 60px;
  height: 40px;
}

.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);
  }
}

/* 标题行样式 */
.section-header {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 8px;
}

/* 操作违规样式 */
.violation-section {
  margin-top: 12px;

  .section-header {
    .header-item:nth-child(1) {
      flex: 3;
    }
    .header-item:nth-child(2) {
      flex: 1;
    }
  }
}

.violation-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.violation-key {
  font-size: 12px;
  color: #374151;
  flex: 1;
}

.violation-images {
  display: flex;
  gap: 8px;
}

.violation-img {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  object-fit: cover;
}

.violation-images-empty {
  width: 50px;
  height: 50px;
  border: 1px dashed #d1d5db;
  border-radius: 4px;
  background: #f9fafb;
}

/* 检测结果不一致样式 */
.inconsistent-section {
  margin-top: 12px;

  .section-header {
    display: grid;
    grid-template-columns: 5fr 3fr 3fr 3fr;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
  }
}

.inconsistent-row {
  display: grid;
  grid-template-columns: 5fr 3fr 3fr 3fr;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #6b7280;

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

.inconsistent-item {
  display: flex;
  align-items: center;
  justify-content: left;
  word-break: break-word;
  text-align: left;
}

.inconsistent-action {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clickable-tag {
  cursor: pointer;
}

/* 新增隐患样式 */
.danger-section {
  margin-top: 12px;

  .section-header {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr;
    gap: 8px;
    padding: 8px;
    //border-bottom: 1px solid #e5e7eb;
    //margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
  }
}

.danger-row {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr;
  gap: 8px;
  padding: 8px;
  //background: #fff5f5;
  border-radius: 8px;
  margin-bottom: 8px;
  //border: 1px solid #ffccc7;
  font-size: 12px;
  color: #6b7280;

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

.danger-item {
  display: flex;
  align-items: center;
  justify-content: left;
  word-break: break-word;
  text-align: left;
}

.danger-action {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

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

    i {
      font-size: 16px;
    }
  }

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

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

@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: 12px;
  }

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