<template>
  <div class="course-intro-content">
    <!-- 核心内容 -->
    <div v-if="course.coreContent" class="content-section">
      <div class="section-title">
        <FileTextOutlined /> 核心内容
      </div>
      <div class="section-text">{{ course.coreContent }}</div>
    </div>

    <!-- 课程简介 -->
    <div v-if="course.introSummary" class="content-section">
      <div class="section-title">
        <AlignLeftOutlined /> 课程简介
      </div>
      <div class="section-text rich-content" v-html="course.introSummary"></div>
    </div>

    <!-- 课程亮点 -->
    <div v-if="course.introHighlights" class="content-section">
      <div class="section-title">
        <StarOutlined /> 课程亮点
      </div>
      <div class="section-text rich-content" v-html="course.introHighlights"></div>
    </div>

    <!-- 课程总目标 -->
    <div v-if="course.introGoals" class="content-section">
      <div class="section-title">
        <AimOutlined /> 课程总目标
      </div>
      <div class="section-text rich-content" v-html="course.introGoals"></div>
    </div>

    <!-- 课程内容安排 -->
    <div v-if="course.introSchedule" class="content-section">
      <div class="section-title">
        <CalendarOutlined /> 课程内容安排
      </div>
      <div class="section-text rich-content" v-html="course.introSchedule"></div>
    </div>

    <!-- 教学重难点 -->
    <div v-if="course.introKeyPoints" class="content-section">
      <div class="section-title">
        <BookOutlined /> 教学重难点
      </div>
      <div class="section-text rich-content" v-html="course.introKeyPoints"></div>
    </div>

    <!-- 教学方法 -->
    <div v-if="course.introMethods" class="content-section">
      <div class="section-title">
        <ToolOutlined /> 教学方法
      </div>
      <div class="section-text rich-content" v-html="course.introMethods"></div>
    </div>

    <!-- 评价方式 -->
    <div v-if="course.introEvaluation" class="content-section">
      <div class="section-title">
        <CheckCircleOutlined /> 评价方式
      </div>
      <div class="section-text rich-content" v-html="course.introEvaluation"></div>
    </div>

    <!-- 注意事项 -->
    <div v-if="course.introNotes" class="content-section">
      <div class="section-title">
        <ExclamationCircleOutlined /> 注意事项
      </div>
      <div class="section-text rich-content" v-html="course.introNotes"></div>
    </div>

    <a-empty v-if="!course.coreContent && !course.introSummary && !hasMoreIntro" description="暂无课程介绍内容" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import {
  FileTextOutlined, AlignLeftOutlined, StarOutlined, AimOutlined,
  CalendarOutlined, BookOutlined, ToolOutlined, CheckCircleOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons-vue';

const props = defineProps<{
  course: any;
}>();

const hasMoreIntro = computed(() =>
  props.course.introHighlights || props.course.introGoals || props.course.introSchedule ||
  props.course.introKeyPoints || props.course.introMethods || props.course.introEvaluation || props.course.introNotes
);
</script>

<style scoped>
.course-intro-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.content-section {
  background: white;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.section-text {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  white-space: pre-wrap;
}

.rich-content {
  padding: 16px;
  background: #F9F9F9;
  border-radius: 8px;
  border-left: 3px solid #FF8C42;
}

.rich-content :deep(p) {
  margin-bottom: 12px;
}

.rich-content :deep(p:last-child) {
  margin-bottom: 0;
}

.rich-content :deep(ul),
.rich-content :deep(ol) {
  padding-left: 24px;
  margin-bottom: 12px;
}

.rich-content :deep(li) {
  margin-bottom: 6px;
}
</style>
