<template>
  <div class="practice-record-card">
    <!-- 题目标题 -->
    <p class="card-title">{{ record.title }}</p>

    <!-- 做题数 & 正确率 -->
    <div class="box">
      <div class="card-stats">
        <span class="stat-count"
          >做题数：<strong>{{ record.count }}次</strong></span
        >
        <span class="stat-accuracy">
          正确率：
          <strong :class="accuracyClass">{{ record.accuracy }}%</strong>
        </span>
      </div>

      <!-- 标签 & 时间 -->
      <div class="card-footer">
        <div class="card-tags">
          <span
            v-for="tag in record.tags"
            :key="tag.label"
            class="tag"
            :class="tag.type"
          >
            {{ tag.label }}
          </span>
        </div>
        <span class="card-time">{{ record.time }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

export interface RecordTag {
  label: string;
  /** 'blue' | 'orange' | 'green' */
  type: string;
}

export interface PracticeRecord {
  id: number;
  title: string;
  count: number;
  accuracy: number;
  tags: RecordTag[];
  time: string;
}

const props = defineProps<{
  record: PracticeRecord;
}>();

const accuracyClass = computed(() => {
  if (props.record.accuracy >= 80) return "accuracy--high";
  if (props.record.accuracy >= 60) return "accuracy--mid";
  return "accuracy--low";
});
</script>

<style scoped lang="scss">
@use "@/styles/variate.scss" as *;

.practice-record-card {
  display: flex;
  flex-direction: column;
  //   gap: 18px;
  //   padding: 24px 28px;
  background: #f2fbff;
  border: 1.5px solid #ebebeb;
  border-radius: 16px;
//   width: 502px;
// height: 220px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;

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

.box {
  width: 502px;
  height: 138px;
  background: #fff;
  padding: 16px 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 19px;
}

// 题目标题
.card-title {
  font-size: 28px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 24px;
}

// 做题数 & 正确率行
.card-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 22px;
  color: #666;
}

.stat-count strong {
  color: #333;
  font-weight: 500;
}

.stat-accuracy strong {
  font-weight: 600;
}

.accuracy--high {
  color: var(--color-text-brand);
}

.accuracy--mid {
  color: var(--color-text-brand);
}

.accuracy--low {
  color: #f44336;
}

// 标签 & 时间行
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-tags {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tag {
  padding: 4px 14px;
  border-radius: 99px;
  font-size: 20px;

  &.blue {
    background: #e8effd;
    color: var(--color-text-brand);
  }

  &.orange {
    background: #fff0e0;
    color: #f5820d;
  }

  &.green {
    background: #e6faf3;
    color: #07cc89;
  }
}

.card-time {
  font-size: 20px;
  color: #aaa;
  white-space: nowrap;
}
</style>
