<!--课程信息内容组件-->
<template>
  <view class="course-info-card">
    <!-- 课程信息列表 -->
    <view class="course-list" v-if="courseList && courseList.length > 0">
      <view 
        class="course-item" 
        v-for="(course, index) in courseList" 
        :key="course.id || index"
        @click="viewCourseDetail(course)"
      >
        <view class="course-header">
          <view class="course-title">{{ course.course_name || '未知课程' }}</view>
          <view :class="['course-status',getStatusClass(course.status)]">
            {{ getStatusText(course.status) }}
          </view>
        </view>
        
        <!-- 课程进度 -->
        <view class="course-progress" v-if="course.total_count">
          <view class="progress-bar">
            <view 
              class="progress-fill" 
              :style="{ width: getProgressPercent(course) + '%' }"
            ></view>
          </view>
          <view class="progress-text">
            {{ course.used_count || 0 }}/{{ course.total_count }}节
          </view>
        </view>
        
        <view class="course-details">
          <!-- 基本信息 -->
          <view class="detail-section">
            <view class="detail-item" v-if="course.course_type">
              <text class="detail-label">课程类型：</text>
              <text class="detail-value">{{ course.course_type }}</text>
            </view>
            <view class="detail-item" v-if="course.teacher_name || course.main_coach_name">
              <text class="detail-label">授课教练：</text>
              <text class="detail-value">{{ course.main_coach_name || course.teacher_name }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">剩余课时：</text>
              <text class="detail-value highlight">{{ getRemainingCount(course) }}节</text>
            </view>
          </view>
          
          <!-- 时间信息 -->
          <view class="detail-section" v-if="course.start_date || course.end_date || course.expiry_date">
            <view class="detail-item" v-if="course.start_date">
              <text class="detail-label">开始时间：</text>
              <text class="detail-value">{{ formatDate(course.start_date) }}</text>
            </view>
            <view class="detail-item" v-if="course.end_date || course.expiry_date">
              <text class="detail-label">结束时间：</text>
              <text class="detail-value">{{ formatDate(course.end_date || course.expiry_date) }}</text>
            </view>
          </view>
          
          <!-- 其他信息 -->
          <view class="detail-section">
            <view class="detail-item" v-if="course.course_price">
              <text class="detail-label">课程价格：</text>
              <text class="detail-value price">¥{{ course.course_price }}</text>
            </view>
            <view class="detail-item" v-if="course.class_duration || course.single_session_count">
              <text class="detail-label">单节时长：</text>
              <text class="detail-value">{{ course.single_session_count || course.class_duration }}分钟</text>
            </view>
            <view class="detail-item" v-if="course.create_time">
              <text class="detail-label">创建时间：</text>
              <text class="detail-value">{{ formatTime(course.create_time) }}</text>
            </view>
          </view>
          
          <!-- 备注信息 -->
          <view class="detail-section" v-if="course.remark">
            <view class="remark-item">
              <text class="detail-label">备注：</text>
              <text class="detail-value remark">{{ course.remark }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <view class="empty-icon">📖</view>
      <view class="empty-text">暂无课程信息</view>
      <view class="empty-tip">学生还未报名任何课程</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CourseInfoCard',
  props: {
    // 课程信息列表数据
    courseList: {
      type: Array,
      default: () => []
    }
  },
  
  methods: {
    // 查看课程详情
    viewCourseDetail(course) {
      this.$emit('view-detail', course)
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const statusMap = {
        'active': 'status-active',
        'completed': 'status-completed',
        'expired': 'status-expired',
        'pending': 'status-pending'
      }
      return statusMap[status] || 'status-default'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'active': '进行中',
        'completed': '已完成',
        'expired': '已过期',
        'pending': '待开始'
      }
      return statusMap[status] || '未知状态'
    },
    
    // 获取进度百分比
    getProgressPercent(course) {
      if (!course.total_count || course.total_count === 0) return 0
      const used = course.used_count || 0
      return Math.round((used / course.total_count) * 100)
    },
    
    // 获取剩余课时
    getRemainingCount(course) {
      const total = course.total_count || 0
      const used = course.used_count || 0
      return Math.max(0, total - used)
    },
    
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      try {
        const date = new Date(timeStr)
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
      } catch (e) {
        return timeStr
      }
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return ''
      try {
        const date = new Date(dateStr)
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
      } catch (e) {
        return dateStr
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.course-info-card {
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  max-height: 50vh;
  overflow-y: auto;
}

.course-item {
  background: #3A3A3A;
  border-radius: 16rpx;
  padding: 32rpx;
  border: 1px solid #404040;
  transition: all 0.3s ease;
  
  &:active {
    background: #4A4A4A;
  }
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.course-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
  flex: 1;
  margin-right: 20rpx;
}

.course-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  
  &.status-active {
    background: rgba(41, 211, 180, 0.2);
    color: #29D3B4;
  }
  
  &.status-completed {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
  }
  
  &.status-expired {
    background: rgba(244, 67, 54, 0.2);
    color: #F44336;
  }
  
  &.status-pending {
    background: rgba(255, 193, 7, 0.2);
    color: #FFC107;
  }
  
  &.status-default {
    background: rgba(158, 158, 158, 0.2);
    color: #9E9E9E;
  }
}

.course-progress {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 24rpx;
}

.progress-bar {
  flex: 1;
  height: 8rpx;
  background: #404040;
  border-radius: 4rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #29D3B4 0%, #4ECDC4 100%);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 24rpx;
  color: #29D3B4;
  font-weight: 600;
  min-width: 100rpx;
  text-align: right;
}

.course-details {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.remark-item {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.detail-label {
  font-size: 26rpx;
  color: #999999;
  min-width: 140rpx;
}

.detail-value {
  font-size: 26rpx;
  color: #ffffff;
  flex: 1;
  text-align: right;
  
  &.highlight {
    color: #29D3B4;
    font-weight: 600;
  }
  
  &.price {
    color: #FFC107;
    font-weight: 600;
  }
  
  &.remark {
    text-align: left;
    line-height: 1.5;
    margin-top: 8rpx;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  text-align: center;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 32rpx;
  color: #ffffff;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.empty-tip {
  font-size: 26rpx;
  color: #999999;
  line-height: 1.4;
}

/* 滚动条样式 */
.course-info-card::-webkit-scrollbar,
.course-list::-webkit-scrollbar {
  width: 6rpx;
}

.course-info-card::-webkit-scrollbar-track,
.course-list::-webkit-scrollbar-track {
  background: transparent;
}

.course-info-card::-webkit-scrollbar-thumb,
.course-list::-webkit-scrollbar-thumb {
  background: #29D3B4;
  border-radius: 3rpx;
}

.course-info-card::-webkit-scrollbar-thumb:hover,
.course-list::-webkit-scrollbar-thumb:hover {
  background: #24B89E;
}
</style>