<!-- src/components/algorithm/AlgorithmCard.vue -->
<template>
  <dv-border-box-13 class="algorithm-card">
    <div class="card-content">
      <div class="algorithm-name">{{ algorithm.name }}</div>
      <div class="task-types">
        <div class="task-title">任务类型</div>
        <div class="type-list">
            <div v-for="(type, index) in algorithm.taskTypes" 
                :key="index" 
                class="task-type">
            {{ type }}
            </div>
        </div>
      </div>
      <div class="detection-count">
        <span class="count-text">成功检测</span>
        <span class="count-number">{{ algorithm.detectionCount }}</span>
        <span class="count-unit">次</span>
      </div>
    </div>
  </dv-border-box-13>
</template>

<script setup>
defineProps({
  algorithm: {
    type: Object,
    required: true,
    default: () => ({
      name: '',
      taskTypes: [],
      detectionCount: 0
    })
  }
})
</script>

<style scoped>
.algorithm-card {
  width: 100%;
  height: 100%;
  padding: 15px;
  ::v-deep .border-box-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.algorithm-name {
  font-size: 20px;
  font-weight: bold;
  color: #7cd0ff;
  margin-bottom: 15px;
}

.task-types {
  flex: 1;
  width: 90%;
  .task-title {
    font-size: 20px;
    color: white;
    margin-bottom: 8px;
  }
  .type-list{
    display: flex;
    flex-direction: row;
    .task-type {
      border: 1px solid #7cd0ff; /* 浅蓝色边框 */
      color: #00ffc0; /* 蓝绿色文字 */
      background: rgba(16, 42, 87, 0.5); /* 半透明深蓝背景 */
      padding: 4px 20px;
      border-radius: 4px;
      text-align: center;
      margin-right: 10px;
      font-size: 12px;
    }
  }
}

.detection-count {
  width: 90%;
  display: flex;
  align-items: baseline;
  margin-top: 30px;
  align-items: center;
  .count-number {
    font-size: 40px;
    font-weight: bold;
    color: #7cd0ff; /* 大号蓝色数字 */
    margin: 0 10px;
  }
}
</style>