<template>
  <div class="course-detail-container">
    <h2 class="page-title">课程详情</h2>
    
    <el-card shadow="never">
      <div v-loading="loading" class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="课程名称" :span="2">
            <span class="detail-value">{{ course.name || '-' }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="情感分类">
            <el-tag type="info">{{ course.categoryName || course.category_name || '-' }}</el-tag>
          </el-descriptions-item>
          
          <el-descriptions-item label="讲师">
            <span class="detail-value">{{ course.instructor || '-' }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="课程时长">
            <span class="detail-value">{{ course.duration || 0 }} 分钟</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="课程价格">
            <span v-if="course.price > 0" class="amount-text">¥{{ course.price }}</span>
            <el-tag v-else type="success" size="small">免费</el-tag>
          </el-descriptions-item>
          
          <el-descriptions-item label="课程评分">
            <el-rate v-model="course.rating" :max="5" disabled allow-half />
            <span style="margin-left: 10px;">{{ course.rating || '-' }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="是否推荐">
            <el-tag :type="(course.isRecommended || course.is_recommended) === 1 ? 'success' : 'info'">
              {{ (course.isRecommended || course.is_recommended) === 1 ? '推荐' : '普通' }}
            </el-tag>
          </el-descriptions-item>
          
          <el-descriptions-item label="状态">
            <el-tag :type="course.status === 1 ? 'success' : 'danger'">
              {{ course.status === 1 ? '上架' : '下架' }}
            </el-tag>
          </el-descriptions-item>
          
          <el-descriptions-item label="报名人数">
            <span class="detail-value">{{ course.participants || 0 }} 人</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="课程封面" :span="2">
            <div v-if="coverImage" class="cover-display">
              <el-image
                :src="coverImage"
                fit="cover"
                class="cover-preview-large"
                :preview-src-list="[coverImage]"
                preview-teleported
                hide-on-click-modal
              >
                <template #error>
                  <div class="image-error">
                    <el-icon><Picture /></el-icon>
                    <span>加载失败</span>
                  </div>
                </template>
              </el-image>
            </div>
            <span v-else class="text-muted">暂无封面</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="课程描述" :span="2">
            <div class="text-content">{{ course.description || '暂无描述' }}</div>
          </el-descriptions-item>
          
          <el-descriptions-item label="课程内容" :span="2">
            <div class="text-content">{{ course.content || '暂无内容' }}</div>
          </el-descriptions-item>
          
          <el-descriptions-item label="创建时间" :span="2">
            <span class="detail-value">{{ course.createdTime || course.created_time || '-' }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <div class="detail-actions">
        <el-button type="primary" @click="handleEdit">编辑课程</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Picture } from '@element-plus/icons-vue'
import request from '@/utils/request'
import { API_ENDPOINTS } from '@/config/api'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const course = ref({})

// 计算封面图片URL
const coverImage = computed(() => {
  return course.value.coverImage || course.value.cover_image || course.value.cover || ''
})

const loadDetail = async (id) => {
  loading.value = true
  try {
    const response = await request.get(`${API_ENDPOINTS.COURSE_DETAIL}/${id}`)
    if (response.code === 200) {
      course.value = response.data || {}
    } else {
      ElMessage.error(response.message || '加载详情失败')
    }
  } catch (error) {
    console.error('加载详情失败:', error)
    ElMessage.error('加载详情失败：' + (error.message || '网络错误'))
  } finally {
    loading.value = false
  }
}

const handleEdit = () => {
  if (course.value.id) {
    router.push(`/course/edit/${course.value.id}`)
  }
}

onMounted(() => {
  if (route.params.id) {
    loadDetail(route.params.id)
  } else {
    ElMessage.error('缺少课程ID')
    router.back()
  }
})
</script>

<style scoped>
.course-detail-container {
  padding: 0;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0 0 20px 0;
}

.detail-content {
  min-height: 200px;
}

.detail-value {
  color: #333;
  font-weight: 500;
}

.amount-text {
  color: #f56c6c;
  font-size: 16px;
  font-weight: bold;
}

.text-content {
  color: #666;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

.text-muted {
  color: #999;
}

.cover-display {
  margin-top: 10px;
}

.cover-preview-large {
  width: 300px;
  height: 168px;
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  cursor: pointer;
  transition: all 0.3s;
}

.cover-preview-large:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #909399;
  font-size: 14px;
}

.image-error .el-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.detail-actions {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

.detail-actions .el-button {
  margin-left: 10px;
}
</style>

