<template>
  <view class="course-detail-container">
    <!-- 课程基本信息 -->
    <view class="course-info-card">
      <view class="course-header">
        <text class="course-title">{{ courseInfo.course_name || '课程详情' }}</text>
        <view class="course-status" :class="getStatusClass(courseInfo.status)">
          {{ getStatusText(courseInfo.status) }}
        </view>
      </view>
      
      <view class="course-stats">
        <view class="stat-item">
          <text class="stat-label">总课时</text>
          <text class="stat-value">{{ courseInfo.total_hours || 0 }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">赠送课时</text>
          <text class="stat-value">{{ courseInfo.gift_hours || 0 }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">已用课时</text>
          <text class="stat-value">{{ (courseInfo.use_total_hours || 0) + (courseInfo.use_gift_hours || 0) }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">剩余课时</text>
          <text class="stat-value remaining">{{ getRemainingHours() }}</text>
        </view>
      </view>
      
      <view class="course-dates">
        <text class="date-item">开始日期：{{ courseInfo.start_date || '--' }}</text>
        <text class="date-item">结束日期：{{ courseInfo.end_date || '--' }}</text>
      </view>
    </view>

    <!-- 课程安排列表 -->
    <view class="section-title">
      <text class="title-text">课程安排</text>
      <text class="title-count">({{ scheduleList.length }})</text>
    </view>
    
    <view class="schedule-list">
      <view 
        v-for="(item, index) in scheduleList" 
        :key="item.id"
        class="schedule-item"
        @tap="showScheduleDetail(item)"
      >
        <view class="schedule-date">
          <text class="date-text">{{ formatDate(item.course_date) }}</text>
          <text class="time-text">{{ item.time_slot }}</text>
        </view>
        
        <view class="schedule-info">
          <view class="schedule-type">
            <text class="type-tag" :class="getScheduleTypeClass(item.schedule_type)">
              {{ getScheduleTypeText(item.schedule_type) }}
            </text>
            <text class="course-type-tag" :class="getCourseTypeClass(item.course_type)">
              {{ getCourseTypeText(item.course_type) }}
            </text>
          </view>
          
          <view class="schedule-status">
            <text class="status-text" :class="getScheduleStatusClass(item.status)">
              {{ getScheduleStatusText(item.status) }}
            </text>
          </view>
        </view>
        
        <view class="schedule-arrow">
          <text class="arrow-icon">></text>
        </view>
      </view>
    </view>

    <!-- 课程使用记录 -->
    <view class="section-title">
      <text class="title-text">使用记录</text>
      <text class="title-count">({{ usageList.length }})</text>
    </view>
    
    <view class="usage-list">
      <view 
        v-for="(item, index) in usageList" 
        :key="item.id"
        class="usage-item"
      >
        <view class="usage-date">
          <text class="date-text">{{ formatDate(item.usage_date) }}</text>
          <text class="time-text">{{ item.time_slot || '--' }}</text>
        </view>
        
        <view class="usage-info">
          <text class="usage-hours">消耗课时：{{ item.hours_used || 0 }}</text>
          <text class="usage-type">{{ item.usage_type || '正常上课' }}</text>
        </view>
        
        <view class="usage-status">
          <text class="status-text confirmed">已确认</text>
        </view>
      </view>
    </view>

    <!-- 无数据提示 -->
    <view v-if="scheduleList.length === 0 && usageList.length === 0" class="no-data">
      <text class="no-data-text">暂无课程安排和使用记录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      courseId: '',
      courseInfo: {},
      scheduleList: [],
      usageList: []
    }
  },
  
  onLoad(options) {
    this.courseId = options.courseId || ''
    if (this.courseId) {
      this.loadCourseDetail()
    }
  },
  
  methods: {
    // 加载课程详情
    async loadCourseDetail() {
      try {
        uni.showLoading({ title: '加载中...' })
        
        const res = await this.$http.get('/xy/course/detail', {
          course_id: this.courseId
        })
        
        if (res.data.code === 1) {
          this.courseInfo = res.data.data.course_info || {}
          this.scheduleList = res.data.data.schedule_list || []
          this.usageList = res.data.data.usage_list || []
        } else {
          uni.showToast({
            title: res.data.msg || '加载失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载课程详情失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 计算剩余课时
    getRemainingHours() {
      const total = (this.courseInfo.total_hours || 0) + (this.courseInfo.gift_hours || 0)
      const used = (this.courseInfo.use_total_hours || 0) + (this.courseInfo.use_gift_hours || 0)
      return Math.max(0, total - used)
    },
    
    // 获取课程状态文本
    getStatusText(status) {
      const statusMap = {
        1: '有效',
        2: '过期',
        3: '等待期',
        4: '延期'
      }
      return statusMap[status] || '未知'
    },
    
    // 获取课程状态样式
    getStatusClass(status) {
      const classMap = {
        1: 'status-active',
        2: 'status-expired',
        3: 'status-waiting',
        4: 'status-delayed'
      }
      return classMap[status] || 'status-unknown'
    },
    
    // 获取课程安排类型文本
    getScheduleTypeText(type) {
      const typeMap = {
        1: '临时课',
        2: '固定课'
      }
      return typeMap[type] || '未知'
    },
    
    // 获取课程安排类型样式
    getScheduleTypeClass(type) {
      const classMap = {
        1: 'type-temp',
        2: 'type-fixed'
      }
      return classMap[type] || 'type-unknown'
    },
    
    // 获取课程类型文本
    getCourseTypeText(type) {
      const typeMap = {
        1: '加课',
        2: '补课',
        3: '等待位'
      }
      return typeMap[type] || '正常课'
    },
    
    // 获取课程类型样式
    getCourseTypeClass(type) {
      const classMap = {
        1: 'course-add',
        2: 'course-makeup',
        3: 'course-waiting'
      }
      return classMap[type] || 'course-normal'
    },
    
    // 获取课程安排状态文本
    getScheduleStatusText(status) {
      const statusMap = {
        0: '待上课',
        1: '已上课',
        2: '请假'
      }
      return statusMap[status] || '未知'
    },
    
    // 获取课程安排状态样式
    getScheduleStatusClass(status) {
      const classMap = {
        0: 'schedule-pending',
        1: 'schedule-completed',
        2: 'schedule-leave'
      }
      return classMap[status] || 'schedule-unknown'
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '--'
      const date = new Date(dateStr)
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${month}-${day}`
    },
    
    // 显示课程安排详情
    showScheduleDetail(item) {
      // 可以跳转到课程安排详情页面
      console.log('查看课程安排详情:', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.course-detail-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.course-info-card {
  background: white;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

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

.course-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.course-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  
  &.status-active {
    background: #e8f5e8;
    color: #52c41a;
  }
  
  &.status-expired {
    background: #fff2f0;
    color: #ff4d4f;
  }
  
  &.status-waiting {
    background: #f6ffed;
    color: #faad14;
  }
  
  &.status-delayed {
    background: #f0f5ff;
    color: #1890ff;
  }
}

.course-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.stat-value {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  
  &.remaining {
    color: #1890ff;
  }
}

.course-dates {
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.date-item {
  font-size: 24rpx;
  color: #666;
}

.section-title {
  display: flex;
  align-items: center;
  margin: 30rpx 0 16rpx;
}

.title-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.title-count {
  font-size: 24rpx;
  color: #666;
  margin-left: 8rpx;
}

.schedule-list, .usage-list {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.schedule-item, .usage-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.schedule-date, .usage-date {
  display: flex;
  flex-direction: column;
  width: 140rpx;
  margin-right: 20rpx;
}

.date-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 4rpx;
}

.time-text {
  font-size: 24rpx;
  color: #666;
}

.schedule-info, .usage-info {
  flex: 1;
}

.schedule-type {
  display: flex;
  gap: 8rpx;
  margin-bottom: 8rpx;
}

.type-tag, .course-type-tag {
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  font-size: 20rpx;
  
  &.type-temp {
    background: #fff7e6;
    color: #fa8c16;
  }
  
  &.type-fixed {
    background: #f6ffed;
    color: #52c41a;
  }
  
  &.course-add {
    background: #e6f7ff;
    color: #1890ff;
  }
  
  &.course-makeup {
    background: #f9f0ff;
    color: #722ed1;
  }
  
  &.course-waiting {
    background: #fff2f0;
    color: #ff4d4f;
  }
}

.schedule-status, .usage-status {
  display: flex;
  align-items: center;
}

.status-text {
  font-size: 24rpx;
  font-weight: 500;
  
  &.schedule-pending {
    color: #faad14;
  }
  
  &.schedule-completed {
    color: #52c41a;
  }
  
  &.schedule-leave {
    color: #ff4d4f;
  }
  
  &.confirmed {
    color: #52c41a;
  }
}

.schedule-arrow {
  margin-left: 16rpx;
}

.arrow-icon {
  font-size: 24rpx;
  color: #ccc;
}

.usage-hours {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 4rpx;
}

.usage-type {
  font-size: 24rpx;
  color: #666;
}

.no-data {
  text-align: center;
  padding: 100rpx 0;
}

.no-data-text {
  font-size: 24rpx;
  color: #999;
}
</style> 