<!--
 * @Author: chris
 * @Date: 2025-08-12 11:19:45
 * @LastEditors: chris
 * @LastEditTime: 2025-10-27 16:11:21
-->
<template>
  <div class="image-detail-module">
    <h3 class="image-detail-title">分析报告</h3>
    <div class="image-detail-content" v-if="!isEmptyObject(props.info)">
      <div class="detail-item">
        <span>{{ props.info.name }}:</span> <span class="num">{{ props.info.value }}</span>
      </div>
      <div class="detail-item" v-for="item in detailShowKeys" :key="item.key">
        <span>{{ item.name }}:</span> <span>{{ props.info[item.key] }}</span>
      </div>
      <div class="detail-item">
        <span>分析员:</span> <span>AI</span>
      </div>
      <div class="detail-img">
        <p>分析图片:</p>
        <div class="analysis-img">
          <ImagePreview :src="props.info.analyseCoordUrl" width="100%" />
        </div>
      </div>
    </div>
    <el-empty description="请点击“查看”按钮查看" v-else></el-empty>
  </div>
</template>

<script setup>
import { detailShowKeys } from '../config';
import { isEmptyObject } from '@/utils/validate.js'
import ImagePreview from '@/components/ImagePreview/index.vue'

const props = defineProps({
  info: {
    type: Object,
    required: true,
    default: () => ({}),
  }
});
</script>

<style lang="scss" scoped>
.detail-item {
  @apply flex items-center justify-between line-height-32px;

  span {
    &:nth-of-type(1) {
      @apply font-700;
      width: 100px;
    }

    &:nth-of-type(2) {
      // @apply text-right;
      flex: 1;
    }
  }

  .num {
    @apply font-700;
    color: $color-danger;
  }
}

.detail-img {
  p {
    @apply font-700 mb-20px;
  }
}
</style>
