<template>
  <view class="course-info">
    <!-- 课程封面 -->
    <view class="course-cover">
      <image 
        :src="course.image || '/static/nobg.jpg'" 
        mode="widthFix"
        class="cover-image"
      />
    </view>
    
    <!-- 课程标题 -->
    <view class="course-title">
      <text class="title-text">{{ course.title }}</text>
    </view>
    
    <!-- 课程简介 -->
    <view v-if="course.content && course.content !== ''" class="course-content">
      <view class="content-wrapper">
        <view 
          :class="['content-html', isCollapsed ? 'collapsed' : '']"
          v-html="parsedContent"
        />
        
        <!-- 图片列表 -->
        <view v-if="images.length > 0" class="content-images">
          <image
            v-for="(img, index) in images"
            :key="index"
            :src="img"
            mode="widthFix"
            class="content-image"
            @click="previewImage(img, index)"
          />
        </view>
        
        <!-- 展开/收起按钮 -->
        <view class="toggle-btn" @click="toggleContent">
          <text>{{ isCollapsed ? '展开' : '收起' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { ICourseDetail } from '@/types/course'

interface Props {
  course: ICourseDetail
}

const props = defineProps<Props>()

const isCollapsed = ref(true)
const parsedContent = ref('')
const images = ref<string[]>([])

/**
 * 解析课程内容，分离文本和图片
 */
const parseContent = () => {
  if (!props.course.content) {
    parsedContent.value = ''
    images.value = []
    return
  }
  
  // 提取图片URL
  const imgRegex = /<img[^>]+src="([^"]+)"[^>]*>/g
  const imgUrls: string[] = []
  let match
  
  while ((match = imgRegex.exec(props.course.content)) !== null) {
    imgUrls.push(match[1])
  }
  
  // 移除图片标签，保留文本内容
  const cleanText = props.course.content.replace(/<img[^>]*>/g, '')
  
  parsedContent.value = cleanText
  images.value = imgUrls
}

/**
 * 切换展开/收起
 */
const toggleContent = () => {
  isCollapsed.value = !isCollapsed.value
}

/**
 * 预览图片
 */
const previewImage = (current: string, index: number) => {
  uni.previewImage({
    current,
    urls: images.value,
    currentIndex: index
  })
}

// 监听课程变化，重新解析内容
watch(() => props.course, () => {
  parseContent()
}, { immediate: true, deep: true })
</script>

<style lang="scss" scoped>
.course-info {
  background-color: #fff;
}

.course-cover {
  width: 100%;
  
  .cover-image {
    width: 100%;
    display: block;
  }
}

.course-title {
  padding: 30rpx 20rpx;
  
  .title-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
  }
}

.course-content {
  padding: 0 20rpx 20rpx;
  
  .content-wrapper {
    position: relative;
    
    .content-html {
      font-size: 28rpx;
      line-height: 1.8;
      color: #666;
      text-align: justify;
      word-break: break-all;
      
      &.collapsed {
        max-height: 200rpx;
        overflow: hidden;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 60rpx;
          background: linear-gradient(to bottom, transparent, #fff);
        }
      }
    }
    
    .content-images {
      margin-top: 20rpx;
      
      .content-image {
        width: 100%;
        display: block;
        margin-bottom: 20rpx;
        border-radius: 8rpx;
      }
    }
    
    .toggle-btn {
      text-align: right;
      padding: 20rpx 0 0;
      
      text {
        color: #838588;
        font-size: 26rpx;
      }
    }
  }
}
</style>
