<!--
 * @Author: chris
 * @Date: 2025-08-12 11:19:45
 * @LastEditors: chris
 * @LastEditTime: 2025-08-14 17:15:58
-->
<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.num }}</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>
    <el-empty description="请点击“查看”按钮查看" v-else></el-empty>
  </div>
</template>

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

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;
  }
}
</style>
