<template>
  <view class="learning-progress">
    <view class="stats" v-if="stats">
      <view class="stat-item">
        <text class="stat-value">{{ stats.totalCourses || 0 }}</text>
        <text class="stat-label">总课程</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ stats.completedLessons || 0 }}</text>
        <text class="stat-label">已完成课时</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ stats.progress || 0 }}%</text>
        <text class="stat-label">完成度</text>
      </view>
    </view>
    <view class="course-list">
      <view class="course-item" v-for="item in records" :key="item.courseId">
        <text class="course-name">{{ item.course?.title }}</text>
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: item.progress + '%' }"></view>
        </view>
        <text class="progress-text">{{ item.progress }}%</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from '../../api/index'

const stats = ref<any>(null)
const records = ref<any[]>([])

onMounted(async () => {
  try {
    const [s, r]: any = await Promise.all([
      api.dashboard.stats(),
      api.courses.myLearning(),
    ])
    stats.value = s
    records.value = r.items || r || []
  } catch (e) {
    console.error(e)
  }
})
</script>

<style scoped>
.learning-progress { padding: 30rpx; }
.stats { display: flex; gap: 20rpx; margin-bottom: 40rpx; }
.stat-item {
  flex: 1; background: var(--card); border-radius: 16rpx; padding: 30rpx; text-align: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}
.stat-value { font-size: 40rpx; font-weight: bold; color: var(--brand); display: block; }
.stat-label { font-size: 24rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; }
.course-list { }
.course-item {
  display: flex; align-items: center; background: var(--card); border-radius: 12rpx;
  padding: 24rpx; margin-bottom: 16rpx;
}
.course-name { width: 200rpx; font-size: 26rpx; font-weight: 500; }
.progress-bar { flex: 1; height: 16rpx; background: var(--border); border-radius: 8rpx; margin: 0 20rpx; overflow: hidden; }
.progress-fill { height: 100%; background: var(--brand); border-radius: 8rpx; }
.progress-text { font-size: 24rpx; color: var(--brand); width: 80rpx; text-align: right; }
</style>
