<template>
  <div class="learning-records">
    <div class="records-header">
      <h2>学习记录</h2>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleDateChange"
      />
    </div>

    <div class="records-list">
      <div class="record-item" v-for="record in records" :key="record.id">
        <div class="record-icon">
          <i :class="getRecordIcon(record.type)"></i>
        </div>
        <div class="record-content">
          <h3>{{ record.title }}</h3>
          <p class="record-description">{{ record.description }}</p>
          <div class="record-meta">
            <span class="record-type">{{ record.typeName }}</span>
            <span class="record-duration">学习时长：{{ record.duration }}分钟</span>
            <span class="record-date">{{ record.learnDate }}</span>
          </div>
        </div>
        <div class="record-progress">
          <div class="progress-circle" :class="`progress-${record.status}`">
            <span>{{ record.progress }}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElDatePicker } from 'element-plus';

const dateRange = ref<[Date, Date] | null>(null);
const records = ref<any[]>([]);

onMounted(() => {
  // TODO: 加载学习记录
});

function handleDateChange() {
  // TODO: 根据日期筛选记录
}

function getRecordIcon(type: string) {
  const iconMap: Record<string, string> = {
    'article': '📄',
    'video': '🎥',
    'audio': '🎵',
    'course': '📚'
  };
  return iconMap[type] || '📄';
}
</script>

<style lang="scss" scoped>
.learning-records {
  .records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    
    h2 {
      font-size: 24px;
      font-weight: 600;
      color: #141F38;
    }
  }
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.record-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s;
  
  &:hover {
    border-color: #C62828;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.record-icon {
  width: 48px;
  height: 48px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.record-content {
  flex: 1;
  
  h3 {
    font-size: 18px;
    font-weight: 600;
    color: #141F38;
    margin-bottom: 8px;
  }
}

.record-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

.record-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
}

.record-type {
  color: #C62828;
  font-weight: 500;
}

.record-duration,
.record-date {
  color: #999;
}

.record-progress {
  flex-shrink: 0;
}

.progress-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  
  &.progress-completed {
    background: #e8f5e9;
    color: #4caf50;
  }
  
  &.progress-in-progress {
    background: #fff3e0;
    color: #ff9800;
  }
  
  &.progress-not-started {
    background: #f5f5f5;
    color: #999;
  }
}
</style>

