<template>
  <div class="course-management-container">
    <div class="page-header">
      <h1 class="page-title">课程管理</h1>
      <div class="header-actions">
        <el-button type="primary" @click="createCourse">
          <el-icon class="el-icon--left"><Plus /></el-icon>
          新建课程
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="filter-section card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="关键词">
          <el-input v-model="filterForm.keyword" placeholder="搜索课程名称" clearable />
        </el-form-item>
        <el-form-item label="课程分类">
          <el-select v-model="filterForm.category" placeholder="请选择" clearable>
            <el-option label="基础课程" value="basic" />
            <el-option label="进阶课程" value="advanced" />
            <el-option label="产品培训" value="product" />
            <el-option label="管理课程" value="management" />
            <el-option label="高级课程" value="senior" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filterForm.status" placeholder="请选择" clearable>
            <el-option label="已发布" value="published" />
            <el-option label="草稿" value="draft" />
            <el-option label="处理中" value="processing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon class="el-icon--left"><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 课程统计 -->
    <div class="stats-section">
      <div class="stat-card card" v-for="stat in courseStats" :key="stat.label">
        <div class="stat-icon" :style="{ backgroundColor: stat.bgColor }">
          <el-icon :size="24" :color="stat.color">
            <component :is="iconComponents[stat.icon]" />
          </el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </div>
    </div>

    <!-- 课程列表 -->
    <div class="course-list card">
      <div class="list-header">
        <h3>课程列表</h3>
        <div class="view-toggle">
          <el-button-group>
            <el-button :type="viewMode === 'card' ? 'primary' : 'default'" @click="viewMode = 'card'">
              <el-icon><Grid /></el-icon>
            </el-button>
            <el-button :type="viewMode === 'list' ? 'primary' : 'default'" @click="viewMode = 'list'">
              <el-icon><List /></el-icon>
            </el-button>
          </el-button-group>
        </div>
      </div>

      <!-- 卡片视图 -->
      <div v-if="viewMode === 'card'" class="course-grid">
        <div class="course-card" v-for="course in courseList" :key="course.id">
          <div class="course-cover">
            <div class="course-placeholder">
              <el-icon :size="48" color="#c0c4cc"><Files /></el-icon>
            </div>
            <div class="course-status" :class="course.status">
              {{ getStatusText(course.status) }}
            </div>
          </div>
          <div class="course-info">
            <h4 class="course-title">{{ course.name }}</h4>
            <p class="course-desc">{{ course.description }}</p>
            <div class="course-meta">
              <span><el-icon><Files /></el-icon> {{ course.materialCount }} 个资料</span>
            </div>
            <div class="course-actions">
              <el-button link type="primary" size="small" @click="viewCourseDetail(course)">
                详情
              </el-button>
              <el-button link type="primary" size="small" @click="editCourse(course)">
                编辑
              </el-button>
              <el-button link type="primary" size="small" @click="manageCoursePositions(course)">
                岗位分配
              </el-button>
              <el-button link type="danger" size="small" @click="deleteCourse(course)">
                删除
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 列表视图 -->
      <el-table v-else :data="courseList" style="width: 100%" v-loading="loading">
        <el-table-column prop="name" label="课程名称" min-width="200" />
        <el-table-column prop="category" label="课程分类" width="120">
          <template #default="scope">
            {{ getCategoryText(scope.row.category) }}
          </template>
        </el-table-column>
        <el-table-column prop="materialCount" label="资料数" width="100">
          <template #default="scope">
            {{ scope.row.materialCount }} 个
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180" />
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="viewCourseDetail(scope.row)">
              详情
            </el-button>
            <el-button link type="primary" size="small" @click="editCourse(scope.row)">
              编辑
            </el-button>
            <el-button link type="primary" size="small" @click="manageCoursePositions(scope.row)">
              岗位分配
            </el-button>
            <el-button link type="danger" size="small" @click="deleteCourse(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 知识点管理弹窗 -->
    <el-dialog
      v-model="knowledgeDialogVisible"
      :title="`${currentCourse?.name} - 知识点管理`"
      width="90%"
      top="5vh"
    >
      <div class="knowledge-management">
        <!-- 知识点列表 -->
        <el-table :data="knowledgeList" style="width: 100%" max-height="500">
          <el-table-column type="index" width="60" label="序号" />
          <el-table-column prop="title" label="知识点标题" min-width="200" />
          <el-table-column prop="content" label="内容摘要" min-width="300">
            <template #default="scope">
              <div class="content-summary">{{ scope.row.content }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型" width="100">
            <template #default="scope">
              <el-tag size="small">{{ scope.row.type }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="source" label="来源" width="150">
            <template #default="scope">
              {{ scope.row.source }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="editKnowledge(scope.row)">
                编辑
              </el-button>
              <el-button link type="danger" size="small" @click="deleteKnowledge(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <el-button @click="knowledgeDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="addKnowledge">
          <el-icon class="el-icon--left"><Plus /></el-icon>
          添加知识点
        </el-button>
      </template>
    </el-dialog>

    <!-- 资料管理弹窗 -->
    <el-dialog
      v-model="materialDialogVisible"
      :title="`${currentCourse?.name} - 资料管理`"
      width="80%"
    >
      <div class="material-management">
        <!-- 上传区域 -->
        <el-upload
          class="upload-area"
          drag
          multiple
          :auto-upload="false"
          :file-list="fileList"
          @change="handleFileChange"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              支持格式：PDF、Word、PPT、TXT、MD，单个文件不超过50MB
            </div>
          </template>
        </el-upload>

        <!-- 已上传资料列表 -->
        <div class="material-list">
          <h4>已上传资料</h4>
          <el-table :data="materialList" style="width: 100%">
            <el-table-column prop="name" label="文件名" min-width="200">
              <template #default="scope">
                <div class="file-info">
                  <el-icon><Document /></el-icon>
                  <span>{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="size" label="大小" width="100">
              <template #default="scope">
                {{ formatFileSize(scope.row.size) }}
              </template>
            </el-table-column>
            <el-table-column prop="uploadTime" label="上传时间" width="180" />
            <el-table-column prop="status" label="处理状态" width="120">
              <template #default="scope">
                <el-tag :type="scope.row.status === 'completed' ? 'success' : ''">
                  {{ scope.row.status === 'completed' ? '已处理' : '处理中' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="downloadMaterial(scope.row)">
                  下载
                </el-button>
                <el-button link type="danger" size="small" @click="deleteMaterial(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <el-button @click="materialDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="uploadFiles" :disabled="fileList.length === 0">
          开始上传
        </el-button>
      </template>
    </el-dialog>

    <!-- 编辑知识点弹窗 -->
    <el-dialog
      v-model="knowledgeEditDialogVisible"
      :title="isEditKnowledge ? '编辑知识点' : '添加知识点'"
      width="700px"
    >
      <el-form :model="knowledgeForm" label-width="100px">
        <el-form-item label="知识点标题" prop="title">
          <el-input v-model="knowledgeForm.title" placeholder="请输入知识点标题" />
        </el-form-item>
        <el-form-item label="知识点内容" prop="content">
          <el-input
            v-model="knowledgeForm.content"
            type="textarea"
            placeholder="请输入知识点内容"
            :rows="8"
          />
        </el-form-item>
        <el-form-item label="知识点类型" prop="type">
          <el-select v-model="knowledgeForm.type" placeholder="请选择类型">
            <el-option label="概念定义" value="concept" />
            <el-option label="操作步骤" value="procedure" />
            <el-option label="案例分析" value="case" />
            <el-option label="注意事项" value="notice" />
            <el-option label="技巧方法" value="skill" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联资料" prop="source">
          <el-select v-model="knowledgeForm.source" placeholder="请选择关联资料">
            <el-option 
              v-for="material in materialList" 
              :key="material.id"
              :label="material.name"
              :value="material.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="knowledgeEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveKnowledge">保存</el-button>
      </template>
    </el-dialog>

    <!-- 课程详情弹窗 -->
    <el-dialog
      v-model="courseDetailDialogVisible"
      :title="`${currentCourse?.name} - 课程详情`"
      width="1100px"
      top="5vh"
      class="course-detail-dialog"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :append-to-body="true"
    >
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <div class="course-basic-info">
            <div class="info-header">
              <div class="course-title-section">
                <h2>{{ currentCourse?.name }}</h2>
                <div class="course-tags">
                  <el-tag type="primary" size="large" effect="dark">{{ getCategoryText(currentCourse?.category) }}</el-tag>
                  <el-tag :type="getStatusTagType(currentCourse?.status)" size="large" effect="dark">
                    {{ getStatusText(currentCourse?.status) }}
                  </el-tag>
                </div>
                <div class="course-meta-info">
                  <span class="meta-item">
                    <el-icon><User /></el-icon>
                    创建者：{{ currentCourse?.creator || '系统管理员' }}
                  </span>
                  <span class="meta-item">
                    <el-icon><Calendar /></el-icon>
                    创建时间：{{ currentCourse?.createTime }}
                  </span>
                </div>
              </div>
            </div>
            
            <div class="info-content">
              <div class="description-section">
                <div class="section-header">
                  <el-icon :size="20" color="#409eff"><EditPen /></el-icon>
                  <h4>课程描述</h4>
                </div>
                <div class="description-text">{{ currentCourse?.description || '暂无描述' }}</div>
              </div>
              
              <div class="stats-section">
                <div class="stat-item">
                  <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <el-icon :size="28" color="#fff"><Files /></el-icon>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ currentCourse?.materialCount || 0 }}</div>
                    <div class="stat-label">学习资料</div>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-icon" style="background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);">
                    <el-icon :size="28" color="#fff"><List /></el-icon>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ currentCourse?.knowledgeCount || 0 }}</div>
                    <div class="stat-label">知识点</div>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                    <el-icon :size="28" color="#fff"><Clock /></el-icon>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ currentCourse?.updateTime || '-' }}</div>
                    <div class="stat-label">更新时间</div>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-icon" style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);">
                    <el-icon :size="28" color="#fff"><Trophy /></el-icon>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ currentCourse?.students || 0 }}</div>
                    <div class="stat-label">学习人数</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <!-- 考试设置功能暂时隐藏 -->
        <!-- <el-tab-pane label="考试设置" name="exam">
          <div class="exam-tab-content">
            <el-form :model="examSettings" label-width="120px">
            <el-form-item label="考试题数">
              <el-input-number 
                v-model="examSettings.questionCount" 
                :min="5" 
                :max="50" 
                :step="5"
              />
              <span style="margin-left: 10px">题</span>
            </el-form-item>
            
            <el-form-item label="最大轮次">
              <el-input-number 
                v-model="examSettings.maxRounds" 
                :min="1" 
                :max="10" 
                :step="1"
              />
              <span style="margin-left: 10px">轮</span>
            </el-form-item>
            
            <el-form-item label="及格分数">
              <el-input-number 
                v-model="examSettings.passingScore" 
                :min="50" 
                :max="100" 
                :step="5"
              />
              <span style="margin-left: 10px">分</span>
            </el-form-item>
            
            <el-form-item label="考试时长">
              <el-input-number 
                v-model="examSettings.examDuration" 
                :min="10" 
                :max="180" 
                :step="10"
              />
              <span style="margin-left: 10px">分钟</span>
            </el-form-item>
            
            <el-form-item label="题型分布">
              <div class="question-type-distribution">
                <div class="type-item">
                  <span>单选题：</span>
                  <el-input-number 
                    v-model="examSettings.questionTypes.single" 
                    :min="0" 
                    :max="20" 
                    size="small"
                  />
                  <span> %</span>
                </div>
                <div class="type-item">
                  <span>多选题：</span>
                  <el-input-number 
                    v-model="examSettings.questionTypes.multiple" 
                    :min="0" 
                    :max="20" 
                    size="small"
                  />
                  <span> %</span>
                </div>
                <div class="type-item">
                  <span>判断题：</span>
                  <el-input-number 
                    v-model="examSettings.questionTypes.judge" 
                    :min="0" 
                    :max="20" 
                    size="small"
                  />
                  <span> %</span>
                </div>
                <div class="type-item">
                  <span>填空题：</span>
                  <el-input-number 
                    v-model="examSettings.questionTypes.blank" 
                    :min="0" 
                    :max="20" 
                    size="small"
                  />
                  <span> %</span>
                </div>
              </div>
              <div class="type-total" :class="{ error: totalPercentage !== 100 }">
                总计：{{ totalPercentage }}%
              </div>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveExamSettings">保存考试设置</el-button>
            </el-form-item>
            </el-form>
          </div>
        </el-tab-pane> -->
        
        <!-- 学习资料与知识点功能暂时隐藏 -->
        <!-- <el-tab-pane label="学习资料与知识点" name="materials">
          <div class="materials-section">
            <div class="section-header">
              <h3>学习资料与知识点管理</h3>
              <div class="header-actions">
                <el-button type="primary" size="small" @click="uploadMaterial">
                  <el-icon class="el-icon--left"><Upload /></el-icon>
                  上传资料
                </el-button>
                <el-button size="small" @click="addKnowledgeManual">
                  <el-icon class="el-icon--left"><Plus /></el-icon>
                  手动添加知识点
                </el-button>
              </div>
            </div>
            
            <el-table :data="currentCourseMaterials" style="width: 100%" v-if="currentCourseMaterials?.length > 0" row-class-name="material-row">
              <el-table-column type="expand">
                <template #default="scope">
                  <div class="material-knowledge-points">
                    <div class="kp-stats">
                      <h4>关联知识点 ({{ scope.row.knowledgePoints?.length || 0 }}个)</h4>
                      <el-tag v-if="scope.row.status === 'completed'" type="success" size="small">
                        <el-icon><CircleCheck /></el-icon> AI已分析
                      </el-tag>
                      <el-tag v-else-if="scope.row.status === 'analyzing'" type="warning" size="small">
                        <el-icon class="is-loading"><Loading /></el-icon> AI分析中...
                      </el-tag>
                      <el-tag v-else type="info" size="small">
                        <el-icon><Warning /></el-icon> 待分析
                      </el-tag>
                    </div>
                    <div class="knowledge-points-grid">
                      <div class="kp-grid-container">
                        <div 
                          v-for="(kp, index) in scope.row.knowledgePoints" 
                          :key="kp.id" 
                          class="knowledge-point-card"
                          @click="viewKnowledgeDetail(kp)"
                        >
                          <div class="kp-card-header">
                            <span class="kp-number">{{ index + 1 }}</span>
                            <el-tag size="small" :type="getKnowledgeTypeTag(kp.type)">{{ kp.type || '概念' }}</el-tag>
                          </div>
                          <h5 class="kp-title">{{ kp.title }}</h5>
                          <p class="kp-summary">{{ kp.content }}</p>
                          <div class="kp-card-actions">
                            <el-button 
                              link 
                              type="primary" 
                              size="small"
                              @click.stop="editKnowledgePoint(scope.row, kp)"
                            >
                              <el-icon><Edit /></el-icon>
                              编辑
                            </el-button>
                            <el-button 
                              link 
                              type="danger" 
                              size="small"
                              @click.stop="deleteKnowledgePoint(scope.row, kp)"
                            >
                              <el-icon><Delete /></el-icon>
                              删除
                            </el-button>
                          </div>
                        </div>
                        <!-- 添加知识点按钮 -->
                        <div 
                          v-if="(scope.row.knowledgePoints?.length || 0) < 20"
                          class="knowledge-point-card add-card"
                          @click="addKnowledgePointToMaterial(scope.row)"
                        >
                          <el-icon :size="18" class="add-icon"><Plus /></el-icon>
                          <span class="add-text">添加知识点</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="文件名" min-width="200">
                <template #default="scope">
                  <div class="file-info">
                    <el-icon><Document /></el-icon>
                    <span>{{ scope.row.name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="size" label="大小" width="100">
                <template #default="scope">
                  {{ formatFileSize(scope.row.size) }}
                </template>
              </el-table-column>
              <el-table-column prop="knowledgePoints" label="知识点" width="100">
                <template #default="scope">
                  <el-tag>{{ scope.row.knowledgePoints?.length || 0 }} 个</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="uploadTime" label="上传时间" width="180" />
              <el-table-column label="AI分析" width="120">
                <template #default="scope">
                  <el-button 
                    v-if="scope.row.status === 'pending'"
                    type="primary"
                    link
                    size="small"
                    @click="analyzeWithAI(scope.row)"
                  >
                    <el-icon><MagicStick /></el-icon>
                    AI拆解
                  </el-button>
                  <el-button 
                    v-else-if="scope.row.status === 'completed'"
                    type="success"
                    link
                    size="small"
                    @click="reAnalyzeWithAI(scope.row)"
                  >
                    <el-icon><Refresh /></el-icon>
                    重新分析
                  </el-button>
                  <el-text v-else type="warning" size="small">
                    <el-icon class="is-loading"><Loading /></el-icon>
                    分析中...
                  </el-text>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100" fixed="right">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="downloadMaterial(scope.row)">
                    下载
                  </el-button>
                  <el-button link type="danger" size="small" @click="deleteMaterial(scope.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <el-empty v-else description="暂无学习资料" />
          </div>
        </el-tab-pane> -->
        
        <!-- 岗位分配 -->
        <el-tab-pane label="岗位分配" name="positions">
          <div class="position-assignment-content">
            <div class="assignment-stats">
              <div class="stat-item required">
                <div class="stat-value">{{ courseRequiredPositions.length }}</div>
                <div class="stat-label">必修岗位</div>
              </div>
              <div class="stat-item optional">
                <div class="stat-value">{{ courseOptionalPositions.length }}</div>
                <div class="stat-label">选修岗位</div>
              </div>
              <div class="stat-item total">
                <div class="stat-value">{{ (courseRequiredPositions.length + courseOptionalPositions.length) }}</div>
                <div class="stat-label">已分配岗位</div>
              </div>
            </div>

            <el-tabs v-model="positionTabActive" type="border-card">
              <!-- 必修岗位 -->
              <el-tab-pane label="必修岗位" name="required">
                <div class="position-section">
                  <div class="section-header">
                    <h4>必修岗位列表</h4>
                    <el-button type="danger" size="small" @click="showPositionSelector('required')">
                      <el-icon><Plus /></el-icon>
                      添加必修岗位
                    </el-button>
                  </div>
                  <div class="position-cards">
                    <div v-for="position in courseRequiredPositions" :key="position.id" class="position-card">
                      <div class="card-header">
                        <div class="position-name">{{ position.name }}</div>
                        <el-button link type="danger" size="small" @click="removePositionAssignment(position.id, 'required')">
                          <el-icon><Close /></el-icon>
                        </el-button>
                      </div>
                      <div class="card-content">
                        <div class="position-desc">{{ position.description }}</div>
                        <div class="position-meta">
                          <span><el-icon><User /></el-icon> {{ position.memberCount }} 人</span>
                          <span><el-icon><Star /></el-icon> 优先级: {{ position.priority || '中' }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <el-empty v-if="courseRequiredPositions.length === 0" description="该课程暂无必修岗位" :image-size="80" />
                </div>
              </el-tab-pane>

              <!-- 选修岗位 -->
              <el-tab-pane label="选修岗位" name="optional">
                <div class="position-section">
                  <div class="section-header">
                    <h4>选修岗位列表</h4>
                    <el-button type="warning" size="small" @click="showPositionSelector('optional')">
                      <el-icon><Plus /></el-icon>
                      添加选修岗位
                    </el-button>
                  </div>
                  <div class="position-cards">
                    <div v-for="position in courseOptionalPositions" :key="position.id" class="position-card">
                      <div class="card-header">
                        <div class="position-name">{{ position.name }}</div>
                        <el-button link type="danger" size="small" @click="removePositionAssignment(position.id, 'optional')">
                          <el-icon><Close /></el-icon>
                        </el-button>
                      </div>
                      <div class="card-content">
                        <div class="position-desc">{{ position.description }}</div>
                        <div class="position-meta">
                          <span><el-icon><User /></el-icon> {{ position.memberCount }} 人</span>
                          <span><el-icon><Star /></el-icon> 推荐级别: {{ position.recommendLevel || 3 }} 星</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <el-empty v-if="courseOptionalPositions.length === 0" description="该课程暂无选修岗位" :image-size="80" />
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-tab-pane>
      </el-tabs>
      
      <template #footer>
        <el-button @click="courseDetailDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="editCourse(currentCourse)">
          <el-icon class="el-icon--left"><Edit /></el-icon>
          编辑课程
        </el-button>
      </template>
    </el-dialog>

    <!-- 岗位选择器弹窗 -->
    <el-dialog
      v-model="positionSelectorVisible"
      :title="`选择${assignmentType === 'required' ? '必修' : '选修'}岗位`"
      width="700px"
    >
      <div class="position-selector-content">
        <div class="selector-header">
          <el-input 
            v-model="positionSearchText" 
            placeholder="搜索岗位名称"
            style="width: 300px"
            clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
        
        <div class="available-positions">
          <div 
            v-for="position in filteredAvailablePositions" 
            :key="position.id"
            class="position-option"
            :class="{ selected: selectedPositions.includes(position.id) }"
            @click="togglePositionSelection(position.id)"
          >
            <div class="position-info">
              <div class="position-name">{{ position.name }}</div>
              <div class="position-desc">{{ position.description }}</div>
              <div class="position-meta">
                <span><el-icon><User /></el-icon> {{ position.memberCount }} 人</span>
                <span><el-icon><OfficeBuilding /></el-icon> {{ position.parentName || '顶级部门' }}</span>
              </div>
            </div>
            <div class="selection-indicator">
              <el-icon v-if="selectedPositions.includes(position.id)"><Check /></el-icon>
            </div>
          </div>
        </div>
        
        <div class="selector-footer">
          <div class="selected-info">
            已选择 {{ selectedPositions.length }} 个岗位
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelPositionSelection">取消</el-button>
          <el-button type="primary" @click="confirmPositionSelection" :disabled="selectedPositions.length === 0">
            确认选择
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 知识点详情查看弹窗 -->
    <el-dialog
      v-model="knowledgeDetailDialogVisible"
      title="知识点详情"
      width="800px"
      class="knowledge-detail-dialog"
    >
      <div class="knowledge-detail" v-if="currentKnowledge">
        <div class="detail-header">
          <div class="title-section">
            <h3>{{ currentKnowledge.title }}</h3>
            <el-tag :type="getKnowledgeTypeTag(currentKnowledge.type)" size="large">
              {{ getTypeLabel(currentKnowledge.type) }}
            </el-tag>
          </div>
        </div>
        <div class="detail-content">
          <div class="content-section">
            <h4>内容描述</h4>
            <div class="content-text">{{ currentKnowledge.content }}</div>
          </div>
        </div>
        <div class="detail-footer">
          <div class="footer-meta">
            <span v-if="currentKnowledge.source">
              <el-icon><Document /></el-icon>
              来源：{{ currentKnowledge.source }}
            </span>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="knowledgeDetailDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="editFromDetail">
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Search,
  Grid,
  List,
  Files,
  User,
  Calendar,
  EditPen,
  Clock,
  Trophy,
  Upload,
  CircleCheck,
  Loading,
  Warning,
  Edit,
  Delete,
  Document,
  MagicStick,
  Refresh,
  Close,
  Star,
  OfficeBuilding,
  Check,
  Collection
} from '@element-plus/icons-vue'

const router = useRouter()

// 图标组件映射
const iconComponents = {
  Plus,
  Search,
  Grid,
  List,
  Files,
  User,
  Calendar,
  EditPen,
  Clock,
  Trophy,
  Upload,
  CircleCheck,
  Loading,
  Warning,
  Edit,
  Delete,
  Document,
  MagicStick,
  Refresh,
  Close,
  Star,
  OfficeBuilding,
  Check,
  Collection
}

// 搜索筛选
const filterForm = reactive({
  keyword: '',
  category: '',
  status: ''
})

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(8)
const loading = ref(false)

// 视图模式
const viewMode = ref('card')

// 弹窗相关
const knowledgeDialogVisible = ref(false)
const materialDialogVisible = ref(false)
const knowledgeEditDialogVisible = ref(false)
const knowledgeDetailDialogVisible = ref(false)
const courseDetailDialogVisible = ref(false)
const currentCourse = ref<any>(null)
const currentCourseKnowledgePoints = ref<any[]>([])
const currentMaterial = ref<any>(null)
const currentKnowledge = ref<any>(null)
const isEditKnowledge = ref(false)


// 岗位分配相关
const positionTabActive = ref('required')
const positionSelectorVisible = ref(false)
const positionSearchText = ref('')
const assignmentType = ref<'required' | 'optional'>('required')
const selectedPositions = ref<number[]>([])
const courseRequiredPositions = ref<any[]>([])
const courseOptionalPositions = ref<any[]>([])
const availablePositions = ref<any[]>([])
const activeTab = ref('basic')

// 文件列表
const fileList = ref<any[]>([])

// 知识点表单
const knowledgeForm = reactive({
  id: '',
  title: '',
  content: '',
  type: 'concept',
  source: ''
})

// 考试设置
const examSettings = reactive({
  questionCount: 10,
  maxRounds: 3,
  passingScore: 60,
  examDuration: 60,
  questionTypes: {
    single: 40,
    multiple: 20,
    judge: 20,
    blank: 20
  }
})

// 当前课程的资料列表
const currentCourseMaterials = ref<any[]>([])

// 课程统计
const courseStats = ref([
  {
    label: '课程总数',
    value: '12',
    icon: 'Collection',
    color: '#667eea',
    bgColor: 'rgba(102, 126, 234, 0.1)'
  },
  {
    label: '资料总数',
    value: '156',
    icon: 'Document',
    color: '#67c23a',
    bgColor: 'rgba(103, 194, 58, 0.1)'
  },
  {
    label: '知识点总数',
    value: '823',
    icon: 'List',
    color: '#e6a23c',
    bgColor: 'rgba(230, 162, 60, 0.1)'
  },
  {
    label: 'AI处理中',
    value: '3',
    icon: 'Loading',
    color: '#f56c6c',
    bgColor: 'rgba(245, 108, 108, 0.1)'
  }
])

// 课程列表数据
const courseList = ref([
  {
    id: 1,
    name: '皮肤管理基础知识',
    description: '学习皮肤的基本结构、类型分析和日常护理知识',
    category: 'basic',
    cover: '',
    materialCount: 12,
    knowledgeCount: 68,
    status: 'published',
    updateTime: '2024-03-20 14:30'
  },
  {
    id: 2,
    name: '客户沟通与咨询技巧',
    description: '掌握与客户沟通的技巧，了解客户需求并提供专业建议',
    category: 'basic',
    cover: '',
    materialCount: 8,
    knowledgeCount: 45,
    status: 'published',
    updateTime: '2024-03-19 10:20'
  },
  {
    id: 3,
    name: '美容产品知识大全',
    description: '全面了解美容产品的成分、功效和适用人群',
    category: 'product',
    cover: '',
    materialCount: 15,
    knowledgeCount: 120,
    status: 'published',
    updateTime: '2024-03-18 16:45'
  },
  {
    id: 4,
    name: '轻医美项目介绍与咨询',
    description: '学习各种轻医美项目的特点、效果和注意事项',
    category: 'advanced',
    cover: '',
    materialCount: 6,
    knowledgeCount: 38,
    status: 'processing',
    updateTime: '2024-03-20 09:15'
  }
])

// 知识点列表
const knowledgeList = ref([
  {
    id: 1,
    title: '建立信任关系的重要性',
    content: '在销售过程中，建立信任是成功的第一步。客户只有信任你，才会愿意听你介绍产品...',
    type: '概念定义',
    source: '销售技巧基础.pdf'
  },
  {
    id: 2,
    title: '有效倾听的技巧',
    content: '倾听不仅是听客户说什么，更要理解客户的真实需求和顾虑。有效倾听包括：保持眼神接触、适时点头、复述确认等...',
    type: '技巧方法',
    source: '客户沟通技巧.docx'
  },
  {
    id: 3,
    title: 'SPIN提问法',
    content: 'SPIN是Situation(情况)、Problem(问题)、Implication(影响)、Need-payoff(需求回报)的缩写...',
    type: '技巧方法',
    source: '需求挖掘方法.pptx'
  }
])

// 计算题型总百分比
const totalPercentage = computed(() => {
  return Object.values(examSettings.questionTypes).reduce((sum, val) => sum + val, 0)
})

// 资料列表
const materialList = ref([
  {
    id: 1,
    name: '销售技巧基础.pdf',
    size: 2457600,
    uploadTime: '2024-03-15 10:30',
    status: 'completed',
    knowledgePoints: [
      { id: 'kp1', title: '建立信任关系的重要性', content: '在销售过程中，建立信任是成功的第一步。客户只有信任你，才会愿意听你介绍产品...', type: 'concept', editing: false },
      { id: 'kp2', title: '有效倾听技巧', content: '倾听是销售中最重要的技能之一。通过倾听，你可以了解客户的真实需求...', type: 'skill', editing: false },
      { id: 'kp3', title: 'SPIN销售法则', content: 'SPIN代表情况、问题、暗示和需求回报四个方面，是一种有效的销售提问技巧...', type: 'procedure', editing: false },
      { id: 'kp4', title: '处理客户异议的方法', content: '当客户提出异议时，不要急于反驳，而是要理解异议背后的真实原因...', type: 'skill', editing: false },
      { id: 'kp5', title: '成交技巧与时机把握', content: '识别客户的购买信号，选择合适的成交时机，使用适当的成交技巧...', type: 'skill', editing: false }
    ]
  },
  {
    id: 2,
    name: '客户沟通技巧.docx',
    size: 1843200,
    uploadTime: '2024-03-15 11:20',
    status: 'completed',
    knowledgePoints: [
      { id: 'kp6', title: '非语言沟通的重要性', content: '研究表明，55%的沟通是通过肢体语言进行的，38%通过语调，只有7%是语言本身...', type: 'concept', editing: false },
      { id: 'kp7', title: '同理心在沟通中的应用', content: '站在客户的角度思考问题，理解他们的感受和需求，是建立良好关系的关键...', type: 'skill', editing: false },
      { id: 'kp8', title: '积极聆听的技巧', content: '积极聆听包括眼神接触、点头认同、适时提问和总结反馈等技巧...', type: 'skill', editing: false },
      { id: 'kp9', title: '清晰表达的要点', content: '使用简洁明了的语言，避免专业术语，确保信息准确传达...', type: 'procedure', editing: false }
    ]
  },
  {
    id: 3,
    name: '需求挖掘方法.pptx',
    size: 5242880,
    uploadTime: '2024-03-16 14:00',
    status: 'pending',
    knowledgePoints: []
  }
])

/**
 * 搜索处理
 */
const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('搜索完成')
  }, 1000)
}

/**
 * 重置搜索
 */
const handleReset = () => {
  filterForm.keyword = ''
  filterForm.category = ''
  filterForm.status = ''
  handleSearch()
}

/**
 * 创建课程
 */
const createCourse = () => {
  router.push('/manager/create-course')
}

/**
 * 查看知识点
 */
const viewKnowledge = (course: any) => {
  currentCourse.value = course
  knowledgeDialogVisible.value = true
}

/**
 * 管理资料
 */
const manageMaterial = (course: any) => {
  currentCourse.value = course
  materialDialogVisible.value = true
}

/**
 * 编辑课程
 */
const editCourse = (course: any) => {
  router.push(`/manager/edit-course/${course.id}`)
}


/**
 * 管理课程岗位分配
 */
const manageCoursePositions = (course: any) => {
  currentCourse.value = course
  activeTab.value = 'positions'
  
  // 加载课程的岗位分配
  loadCoursePositions(course.id)
  
  courseDetailDialogVisible.value = true
}

/**
 * 删除课程
 */
const deleteCourse = (course: any) => {
  ElMessageBox.confirm(
    `确定要删除课程"${course.name}"吗？删除后相关的资料和知识点也会被删除。`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {})
}

/**
 * 添加知识点
 */
const addKnowledge = () => {
  isEditKnowledge.value = false
  knowledgeForm.id = ''
  knowledgeForm.title = ''
  knowledgeForm.content = ''
  knowledgeForm.type = 'concept'
  knowledgeForm.source = ''
  knowledgeEditDialogVisible.value = true
}

/**
 * 编辑知识点
 */
const editKnowledge = (knowledge: any) => {
  isEditKnowledge.value = true
  knowledgeForm.id = knowledge.id
  knowledgeForm.title = knowledge.title
  knowledgeForm.content = knowledge.content
  knowledgeForm.type = knowledge.type
  knowledgeForm.source = knowledge.source
  knowledgeEditDialogVisible.value = true
}

/**
 * 删除知识点
 */
const deleteKnowledge = (knowledge: any) => {
  ElMessageBox.confirm(
    `确定要删除知识点"${knowledge.title}"吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {})
}

/**
 * 保存知识点
 */
const saveKnowledge = () => {
  if (!knowledgeForm.title || !knowledgeForm.content) {
    ElMessage.warning('请填写完整信息')
    return
  }
  
  if (isEditKnowledge.value) {
    // 编辑模式：更新预览列表中的知识点
    const index = currentCourseKnowledgePoints.value.findIndex(kp => kp.id === knowledgeForm.id)
    if (index > -1) {
      currentCourseKnowledgePoints.value[index] = {
        ...currentCourseKnowledgePoints.value[index],
        title: knowledgeForm.title,
        content: knowledgeForm.content,
        type: knowledgeForm.type,
        source: knowledgeForm.source
      }
    }
    
    // 同时更新资料中的知识点
    currentCourseMaterials.value.forEach(material => {
      if (material.knowledgePoints) {
        const materialIndex = material.knowledgePoints.findIndex((kp: any) => kp.id === knowledgeForm.id)
        if (materialIndex > -1) {
          material.knowledgePoints[materialIndex] = {
            ...material.knowledgePoints[materialIndex],
            title: knowledgeForm.title,
            content: knowledgeForm.content,
            type: knowledgeForm.type
          }
        }
      }
    })
  } else {
    // 添加模式：创建新知识点
    const newKnowledge = {
      id: 'kp_' + Date.now(),
      title: knowledgeForm.title,
      content: knowledgeForm.content,
      type: knowledgeForm.type,
      source: knowledgeForm.source,
      editing: false
    }
    
    // 添加到预览列表
    currentCourseKnowledgePoints.value.push(newKnowledge)
    
    // 如果有关联资料，也添加到对应的资料中
    if (knowledgeForm.source) {
      const material = materialList.value.find(m => m.name === knowledgeForm.source)
      if (material) {
        if (!material.knowledgePoints) {
          material.knowledgePoints = []
        }
        material.knowledgePoints.push(newKnowledge)
      }
    }
  }
  
  ElMessage.success(isEditKnowledge.value ? '编辑成功' : '添加成功')
  knowledgeEditDialogVisible.value = false
  
  // 重置表单
  knowledgeForm.id = ''
  knowledgeForm.title = ''
  knowledgeForm.content = ''
  knowledgeForm.type = 'concept'
  knowledgeForm.source = ''
}

/**
 * 文件改变处理
 */
const handleFileChange = (file: any, fileList: any[]) => {
  // 处理文件变化
}

/**
 * 上传文件
 */
const uploadFiles = () => {
  if (fileList.value.length === 0) {
    ElMessage.warning('请选择要上传的文件')
    return
  }
  
  ElMessage.success('开始上传文件，AI将自动分析并提取知识点')
  materialDialogVisible.value = false
}

/**
 * 下载资料
 */
const downloadMaterial = (material: any) => {
  ElMessage.success(`开始下载：${material.name}`)
}

/**
 * 上传资料
 */
const uploadMaterial = () => {
  if (!currentCourse.value) {
    ElMessage.warning('请先选择课程')
    return
  }
  fileList.value = []
  materialDialogVisible.value = true
}

/**
 * 手动添加知识点
 */
const addKnowledgeManual = () => {
  currentMaterial.value = null
  isEditKnowledge.value = false
  knowledgeForm.id = ''
  knowledgeForm.title = ''
  knowledgeForm.content = ''
  knowledgeForm.type = 'concept'
  knowledgeForm.source = ''
  knowledgeEditDialogVisible.value = true
}

/**
 * 删除资料
 */
const deleteMaterial = (material: any) => {
  ElMessageBox.confirm(
    `确定要删除资料"${material.name}"吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {})
}

/**
 * 查看知识点详情
 */
const viewKnowledgeDetail = (kp: any) => {
  currentKnowledge.value = kp
  knowledgeDetailDialogVisible.value = true
}

/**
 * AI分析资料
 */
const analyzeWithAI = (material: any) => {
  material.status = 'analyzing'
  ElMessage.info('AI正在分析文件内容，提取知识点...')
  
  // 模拟AI分析过程
  setTimeout(() => {
    material.status = 'completed'
    material.knowledgePoints = [
      { 
        id: 'kp_auto_' + Date.now() + '_1', 
        title: '核心概念1', 
        content: '这是AI从文档中提取的第一个核心概念...', 
        type: 'concept',
        source: material.name
      },
      { 
        id: 'kp_auto_' + Date.now() + '_2', 
        title: '操作步骤1', 
        content: '这是AI从文档中提取的操作步骤...', 
        type: 'procedure',
        source: material.name
      },
      { 
        id: 'kp_auto_' + Date.now() + '_3', 
        title: '案例分析1', 
        content: '这是AI从文档中提取的案例分析...', 
        type: 'case',
        source: material.name
      }
    ]
    ElMessage.success('AI分析完成，已提取知识点')
  }, 3000)
}

/**
 * 重新AI分析
 */
const reAnalyzeWithAI = (material: any) => {
  ElMessageBox.confirm(
    '重新分析将覆盖现有的AI提取结果，是否继续？',
    '重新分析确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    analyzeWithAI(material)
  }).catch(() => {})
}

/**
 * 从详情页编辑
 */
const editFromDetail = () => {
  const kp = currentKnowledge.value
  knowledgeDetailDialogVisible.value = false
  
  // 找到对应的资料
  let material = null
  for (const m of currentCourseMaterials.value) {
    if (m.knowledgePoints) {
      const found = m.knowledgePoints.find((k: any) => k.id === kp.id)
      if (found) {
        material = m
        break
      }
    }
  }
  
  if (material) {
    currentMaterial.value = material
    isEditKnowledge.value = true
    knowledgeForm.id = kp.id
    knowledgeForm.title = kp.title
    knowledgeForm.content = kp.content
    knowledgeForm.type = kp.type || 'concept'
    knowledgeForm.source = kp.source || material.name
    knowledgeEditDialogVisible.value = true
  } else {
    ElMessage.warning('未找到知识点所属的资料')
  }
}

// 注释掉重复的函数定义，使用后面更完整的版本
// editKnowledgePoint, deleteKnowledgePoint, addKnowledgePointToMaterial 在第1490行后有更完整的定义

/**
 * 格式化文件大小
 */
const formatFileSize = (size: number) => {
  if (size < 1024) {
    return size + ' B'
  } else if (size < 1024 * 1024) {
    return (size / 1024).toFixed(2) + ' KB'
  } else if (size < 1024 * 1024 * 1024) {
    return (size / 1024 / 1024).toFixed(2) + ' MB'
  } else {
    return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
  }
}

/**
 * 获取分类文本
 */
const getCategoryText = (category: string) => {
  const categoryMap: Record<string, string> = {
    basic: '基础课程',
    advanced: '进阶课程',
    product: '产品培训',
    management: '管理课程',
    senior: '高级课程'
  }
  return categoryMap[category] || ''
}

/**
 * 获取状态文本
 */
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    published: '已发布',
    draft: '草稿',
    processing: 'AI处理中'
  }
  return statusMap[status] || ''
}

/**
 * 获取状态标签类型
 */
const getStatusTagType = (status: string) => {
  const statusMap: Record<string, string> = {
    published: 'success',
    draft: 'info',
    processing: 'warning'
  }
  return statusMap[status] || ''
}

/**
 * 分页大小改变
 */
const handleSizeChange = (val: number) => {
  pageSize.value = val
  handleSearch()
}

/**
 * 当前页改变
 */
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  handleSearch()
}

/**
 * 查看课程详情
 */
const viewCourseDetail = (course: any) => {
  currentCourse.value = course
  activeTab.value = 'basic'
  
  // 加载课程资料
  currentCourseMaterials.value = materialList.value
  
  // 加载课程的岗位分配
  loadCoursePositions(course.id)
  
  // 加载课程知识点（从所有资料中汇总）
  const allKnowledgePoints: any[] = []
  materialList.value.forEach(material => {
    if (material.knowledgePoints && material.knowledgePoints.length > 0) {
      material.knowledgePoints.forEach((kp: any) => {
        allKnowledgePoints.push({
          ...kp,
          source: material.name
        })
      })
    }
  })
  currentCourseKnowledgePoints.value = allKnowledgePoints
  
  // 加载考试设置（模拟数据）
  examSettings.questionCount = 10
  examSettings.maxRounds = 3
  examSettings.passingScore = 60
  examSettings.examDuration = 60
  examSettings.questionTypes = {
    single: 40,
    multiple: 20,
    judge: 20,
    blank: 20
  }
  
  courseDetailDialogVisible.value = true
}

/**
 * 保存考试设置
 */
const saveExamSettings = () => {
  if (totalPercentage.value !== 100) {
    ElMessage.warning('题型分布总和必须为100%')
    return
  }
  
  ElMessage.success('考试设置保存成功')
}

/**
 * 编辑文件关联的知识点
 */
const editKnowledgePoint = (material: any, kp: any) => {
  currentMaterial.value = material
  isEditKnowledge.value = true
  knowledgeForm.id = kp.id
  knowledgeForm.title = kp.title
  knowledgeForm.content = kp.content
  knowledgeForm.type = kp.type || 'concept'
  knowledgeForm.source = kp.source || material.name
  knowledgeEditDialogVisible.value = true
}

/**
 * 保存知识点编辑
 */
const saveKnowledgePoint = (material: any, kp: any) => {
  kp.editing = false
  ElMessage.success('知识点已更新')
}

/**
 * 删除文件关联的知识点
 */
const deleteKnowledgePoint = (material: any, kp: any) => {
  ElMessageBox.confirm(
    `确定要删除知识点"${kp.title}"吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const index = material.knowledgePoints.findIndex((k: any) => k.id === kp.id)
    if (index > -1) {
      material.knowledgePoints.splice(index, 1)
    }
    ElMessage.success('删除成功')
  }).catch(() => {})
}


/**
 * AI分析知识点
 */
const analyzeKnowledgePoints = (material: any) => {
  ElMessage.info('正在使用AI分析文件内容，提取知识点...')
  
  // 模拟AI分析过程
  setTimeout(() => {
    material.status = 'completed'
    material.knowledgePoints = [
      { id: 'kp_auto_1', title: '自动提取的知识点1', content: 'AI分析得出的内容...', editing: false },
      { id: 'kp_auto_2', title: '自动提取的知识点2', content: 'AI分析得出的内容...', editing: false },
      { id: 'kp_auto_3', title: '自动提取的知识点3', content: 'AI分析得出的内容...', editing: false }
    ]
    ElMessage.success('AI分析完成，已提取3个知识点')
  }, 2000)
}

/**
 * 重新分析知识点
 */
const reAnalyzeKnowledgePoints = (material: any) => {
  ElMessageBox.confirm(
    '重新分析将覆盖现有的知识点，是否继续？',
    '重新分析确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    analyzeKnowledgePoints(material)
  }).catch(() => {})
}

/**
 * 获取知识点类型标签样式
 */
const getKnowledgeTypeTag = (type: string) => {
  const typeMap: Record<string, string> = {
    '理论知识': 'primary',      // 蓝色 - 基础理论
    '诊断设计': 'success',      // 绿色 - 专业设计
    '操作步骤': 'warning',      // 橙色 - 操作流程
    '沟通话术': 'warning',      // 橙色 - 沟通技巧（亮眼）
    '案例分析': 'danger',       // 红色 - 案例学习
    '注意事项': '',             // 默认色 - 重要提醒
    '技巧方法': 'success',      // 绿色 - 实用技巧
    '客诉处理': 'danger',       // 红色 - 紧急处理
    // 兼容旧类型
    'concept': 'primary',
    'procedure': 'success',
    'case': 'warning',
    'notice': 'danger',
    'skill': 'info'
  }
  return typeMap[type] || 'info'
}

/**
 * 获取知识点类型标签文本
 */
const getTypeLabel = (type: string) => {
  const typeMap: Record<string, string> = {
    '理论知识': '理论知识',
    '诊断设计': '诊断设计',
    '操作步骤': '操作步骤',
    '沟通话术': '沟通话术',
    '案例分析': '案例分析',
    '注意事项': '注意事项',
    '技巧方法': '技巧方法',
    '客诉处理': '客诉处理',
    // 兼容旧类型
    'concept': '概念定义',
    'procedure': '操作步骤',
    'case': '案例分析',
    'notice': '注意事项',
    'skill': '技巧方法'
  }
  return typeMap[type] || type
}

/**
 * 根据文件类型获取图标颜色
 */
const getFileIconColor = (filename: string) => {
  const ext = filename.split('.').pop()?.toLowerCase()
  const colorMap: Record<string, string> = {
    pdf: '#e74c3c',
    doc: '#3498db',
    docx: '#3498db',
    xls: '#27ae60',
    xlsx: '#27ae60',
    ppt: '#e67e22',
    pptx: '#e67e22',
    txt: '#95a5a6',
    mp4: '#9b59b6',
    mp3: '#9b59b6',
    jpg: '#1abc9c',
    png: '#1abc9c',
    jpeg: '#1abc9c'
  }
  return colorMap[ext || ''] || '#7f8c8d'
}


/**
 * 加载课程的岗位分配
 */
const loadCoursePositions = async (courseId: number) => {
  try {
    // 模拟加载课程的岗位分配
    courseRequiredPositions.value = [
      { id: 1, name: '总经理', description: '公司最高管理者', memberCount: 1, priority: '高' },
      { id: 2, name: '销售部', description: '负责产品销售与市场拓展', memberCount: 25, priority: '中' }
    ]
    
    courseOptionalPositions.value = [
      { id: 3, name: '技术部', description: '负责技术研发与系统维护', memberCount: 30, recommendLevel: 4 },
      { id: 6, name: '前端开发', description: '负责前端应用开发', memberCount: 10, recommendLevel: 3 }
    ]
  } catch (error) {
    console.error('加载课程岗位失败:', error)
  }
}

/**
 * 加载可用岗位
 */
const loadAvailablePositions = async () => {
  try {
    // 模拟所有可用岗位
    availablePositions.value = [
      { id: 1, name: '总经理', description: '公司最高管理者', memberCount: 1, parentName: null },
      { id: 2, name: '销售部', description: '负责产品销售与市场拓展', memberCount: 25, parentName: '总经理' },
      { id: 3, name: '技术部', description: '负责技术研发与系统维护', memberCount: 30, parentName: '总经理' },
      { id: 4, name: '销售经理', description: '管理销售团队，制定销售策略', memberCount: 3, parentName: '销售部' },
      { id: 5, name: '销售专员', description: '执行销售任务，维护客户关系', memberCount: 20, parentName: '销售部' },
      { id: 6, name: '前端开发', description: '负责前端应用开发', memberCount: 10, parentName: '技术部' },
      { id: 7, name: '后端开发', description: '负责后端服务开发', memberCount: 12, parentName: '技术部' },
      { id: 8, name: '测试工程师', description: '负责软件质量保证', memberCount: 8, parentName: '技术部' }
    ]
  } catch (error) {
    console.error('加载可用岗位失败:', error)
  }
}

// 筛选后的可用岗位
const filteredAvailablePositions = computed(() => {
  let filtered = availablePositions.value
  
  // 排除已分配的岗位
  const assignedIds = [...courseRequiredPositions.value.map(p => p.id), ...courseOptionalPositions.value.map(p => p.id)]
  filtered = filtered.filter(p => !assignedIds.includes(p.id))
  
  // 按关键词搜索
  if (positionSearchText.value.trim()) {
    const keyword = positionSearchText.value.toLowerCase()
    filtered = filtered.filter(position => 
      position.name.toLowerCase().includes(keyword) ||
      position.description.toLowerCase().includes(keyword)
    )
  }
  
  return filtered
})

/**
 * 显示岗位选择器
 */
const showPositionSelector = (type: 'required' | 'optional') => {
  assignmentType.value = type
  selectedPositions.value = []
  positionSearchText.value = ''
  loadAvailablePositions()
  positionSelectorVisible.value = true
}

/**
 * 切换岗位选择
 */
const togglePositionSelection = (positionId: number) => {
  const index = selectedPositions.value.indexOf(positionId)
  if (index > -1) {
    selectedPositions.value.splice(index, 1)
  } else {
    selectedPositions.value.push(positionId)
  }
}

/**
 * 取消岗位选择
 */
const cancelPositionSelection = () => {
  positionSelectorVisible.value = false
  selectedPositions.value = []
}

/**
 * 确认岗位选择
 */
const confirmPositionSelection = () => {
  const selectedPositionData = availablePositions.value.filter(p => selectedPositions.value.includes(p.id))
  
  if (assignmentType.value === 'required') {
    courseRequiredPositions.value.push(...selectedPositionData.map(p => ({ ...p, priority: '中' })))
    ElMessage.success(`已添加 ${selectedPositionData.length} 个必修岗位`)
  } else {
    courseOptionalPositions.value.push(...selectedPositionData.map(p => ({ ...p, recommendLevel: 3 })))
    ElMessage.success(`已添加 ${selectedPositionData.length} 个选修岗位`)
  }
  
  positionSelectorVisible.value = false
  selectedPositions.value = []
}

/**
 * 移除岗位分配
 */
const removePositionAssignment = (positionId: number, type: 'required' | 'optional') => {
  if (type === 'required') {
    const index = courseRequiredPositions.value.findIndex(p => p.id === positionId)
    if (index > -1) {
      const position = courseRequiredPositions.value[index]
      courseRequiredPositions.value.splice(index, 1)
      ElMessage.success(`已移除必修岗位「${position.name}」`)
    }
  } else {
    const index = courseOptionalPositions.value.findIndex(p => p.id === positionId)
    if (index > -1) {
      const position = courseOptionalPositions.value[index]
      courseOptionalPositions.value.splice(index, 1)
      ElMessage.success(`已移除选修岗位「${position.name}」`)
    }
  }
}

</script>

<style lang="scss" scoped>
.course-management-container {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #333;
    }

    .header-actions {
      display: flex;
      gap: 12px;

      .el-button--primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
      }
    }
  }

  .filter-section {
    margin-bottom: 20px;
    padding: 20px;

    .filter-form {
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }

  .stats-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;

    .stat-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 24px;

      .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .stat-content {
        .stat-value {
          font-size: 28px;
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }

  .course-list {
    padding: 24px;

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h3 {
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }
    }

    .course-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 24px;

      .course-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }

        .course-cover {
          position: relative;
          height: 160px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .course-status {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;

            &.published {
              background: #67c23a;
              color: white;
            }

            &.draft {
              background: #909399;
              color: white;
            }

            &.processing {
              background: #e6a23c;
              color: white;
            }
          }
        }

        .course-info {
          padding: 20px;

          .course-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
          }

          .course-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 16px;
            height: 42px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .course-meta {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
            font-size: 13px;
            color: #999;

            span {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }

          .course-actions {
            display: flex;
            gap: 12px;
            padding-top: 16px;
            border-top: 1px solid #f0f0f0;
          }
        }
      }
    }

    .pagination-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 24px;
    }
  }

  .knowledge-management {
    .content-summary {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: #666;
      font-size: 13px;
    }
  }

  .material-management {
    .upload-area {
      margin-bottom: 32px;
    }

    .material-list {
      h4 {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 16px;
      }

      .file-info {
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
          color: #667eea;
        }
      }
    }
  }

  // 课程详情弹窗样式
  .question-type-distribution {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 12px;

    .type-item {
      display: flex;
      align-items: center;
      gap: 8px;

      span {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .type-total {
    font-size: 14px;
    color: #666;
    padding: 8px 16px;
    background: #f5f7fa;
    border-radius: 4px;
    display: inline-block;

    &.error {
      color: #f56c6c;
      background: rgba(245, 108, 108, 0.1);
    }
  }

  .knowledge-summary {
    font-size: 14px;
    color: #666;
    padding: 16px;
    background: #f5f7fa;
    border-radius: 8px;
    text-align: center;
  }
}

// 响应式
@media (max-width: 1200px) {
  .course-management-container {
    .stats-section {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 768px) {
  .course-management-container {
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-actions {
        width: 100%;
        flex-wrap: wrap;

        .el-button {
          flex: 1;
        }
      }
    }

    .filter-form {
      .el-form-item {
        display: block;
        margin-bottom: 16px !important;
      }
    }

    .stats-section {
      grid-template-columns: 1fr;
    }

    .course-grid {
      grid-template-columns: 1fr !important;
    }
  }
  // 资料知识点样式
  .material-knowledge-points {
    padding: 20px;
    background: #f9fafb;

    h4 {
      margin: 0 0 16px 0;
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }

    .knowledge-points-list {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .knowledge-point-item {
        background: white;
        border: 1px solid #e4e7ed;
        border-radius: 8px;
        padding: 16px;

        .kp-header {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 8px;

          .kp-number {
            font-weight: 600;
            color: #409eff;
            min-width: 24px;
          }

          .kp-title {
            flex: 1;
            font-weight: 500;
            color: #333;
            font-size: 15px;
          }

          .kp-actions {
            display: flex;
            gap: 8px;
          }
        }

        .kp-content {
          margin-left: 36px;

          p {
            margin: 0;
            color: #666;
            font-size: 14px;
            line-height: 1.6;
          }
        }
      }
    }
  }
  
  // 知识点预览样式 - 优化为卡片网格
  .knowledge-preview {
    // 卡片网格布局
    .knowledge-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      max-height: 550px;
      overflow-y: auto;
      padding: 4px;
      
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
        
        &:hover {
          background: #a8a8a8;
        }
      }
    }
    
    .knowledge-card {
      background: white;
      border: 1px solid #e4e7ed;
      border-radius: 12px;
      padding: 20px;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        border-color: #409eff;
      }
      
      .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f0f2f5;
        
        .card-number {
          width: 32px;
          height: 32px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: 600;
          box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }
        
        .el-tag {
          height: 28px;
          padding: 0 12px;
          font-size: 13px;
        }
      }
      
      .card-content {
        margin-bottom: 12px;
        
        .card-title {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin: 0 0 8px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .card-summary {
          font-size: 14px;
          color: #666;
          line-height: 1.5;
          height: 42px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin: 0;
        }
      }
      
      .card-footer {
        padding-top: 12px;
        border-top: 1px solid #f0f2f5;
        
        .card-source {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 13px;
          color: #909399;
          
          .el-icon {
            color: #409eff;
          }
        }
      }
    }
    
    .knowledge-empty {
      padding: 60px 0;
      text-align: center;
    }
  }
}

// 课程详情弹窗样式优化
:deep(.course-detail-dialog) {
  .el-dialog__wrapper {
    .el-dialog {
      border-radius: 12px;
      overflow: hidden;
    }
  }
  
  .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px 30px;
    margin: 0;
    
    .el-dialog__title {
      color: white;
      font-size: 20px;
      font-weight: 600;
    }
    
    .el-dialog__close {
      color: white;
      font-size: 20px;
      
      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
  
  .el-dialog__body {
    padding: 0;
    margin: 0;
    max-height: calc(85vh - 140px);
    overflow-y: auto;
    background: transparent;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    
    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;
      
      &:hover {
        background: #a8a8a8;
      }
    }
  }
  
  .el-dialog__footer {
    padding: 20px 30px;
    margin: 0;
    background: #f8f9fa;
    border-top: 1px solid #ebeef5;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  }
  
  .el-tabs {
    .el-tabs__header {
      padding: 0 30px;
      margin: 0;
      background: #f8f9fa;
      border-bottom: 2px solid #e4e7ed;
    }
    
    .el-tabs__content {
      padding: 0;
      background: white;
    }
    
    .el-tab-pane {
      background: white;
    }
  }
}

// 课程基本信息样式
.course-basic-info {
  padding: 30px;
  background: white;
  
  .info-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 2px solid #f0f2f5;
    
    .course-cover-wrapper {
      .course-cover-mini {
        position: relative;
        width: 120px;
        height: 80px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .cover-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.4);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s ease;
          
          &:hover {
            opacity: 1;
          }
        }
      }
    }
    
    .course-title-section {
      flex: 1;
      
      h2 {
        margin: 0 0 12px 0;
        font-size: 24px;
        font-weight: 700;
        color: #333;
      }
      
      .course-tags {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;
      }
      
      .course-meta-info {
        display: flex;
        gap: 24px;
        font-size: 14px;
        color: #666;
        
        .meta-item {
          display: flex;
          align-items: center;
          gap: 6px;
          
          .el-icon {
            color: #909399;
          }
        }
      }
    }
  }
  
  .info-content {
    .description-section {
      margin-bottom: 30px;
      
      .section-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        
        h4 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: #333;
        }
      }
      
      .description-text {
        font-size: 15px;
        line-height: 1.6;
        color: #666;
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        border-left: 4px solid #409eff;
      }
    }
    
    .stats-section {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      
      .stat-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px;
        background: white;
        border: 1px solid #e4e7ed;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        
        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(64, 158, 255, 0.1);
        }
        
        .stat-content {
          .stat-value {
            font-size: 24px;
            font-weight: 700;
            color: #333;
            margin-bottom: 4px;
          }
          
          .stat-label {
            font-size: 14px;
            color: #666;
            font-weight: 500;
          }
        }
      }
    }
  }
}

// 材料和知识点tab样式
.materials-tab-content,
.knowledge-tab-content,
.exam-tab-content {
  padding: 30px;
  background: white;
  
  .tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e4e7ed;
    
    .header-info {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }
}

// 材料卡片样式
.material-cards {
  .material-card {
    background: white;
    border: 1px solid #e4e7ed;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      transform: translateY(-2px);
    }
    
    .material-card-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
      
      .material-icon {
        width: 60px;
        height: 60px;
        background: #f0f2f5;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .material-info {
        flex: 1;
        
        .material-name {
          margin: 0 0 8px 0;
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
        
        .material-meta {
          display: flex;
          gap: 16px;
          
          .meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: #666;
          }
        }
      }
      
      .material-status {
        .el-tag {
          padding: 8px 16px;
          font-size: 14px;
          
          .el-icon {
            margin-right: 4px;
          }
        }
      }
    }
    
    .material-card-body {
      .knowledge-points-summary {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 16px;
        
        .summary-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 12px;
          font-size: 14px;
          color: #666;
        }
        
        .collapse-title {
          font-size: 14px;
          color: #409eff;
          cursor: pointer;
          
          &:hover {
            color: #66b1ff;
          }
        }
        
        .knowledge-points-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 12px;
          margin-top: 16px;
          
          .kp-card {
            display: flex;
            gap: 12px;
            padding: 12px;
            background: white;
            border-radius: 8px;
            border: 1px solid #e4e7ed;
            
            .kp-index {
              width: 24px;
              height: 24px;
              background: #409eff;
              color: white;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              font-weight: 600;
              flex-shrink: 0;
            }
            
            .kp-content {
              flex: 1;
              
              h5 {
                margin: 0 0 4px 0;
                font-size: 14px;
                font-weight: 600;
                color: #333;
              }
              
              p {
                margin: 0;
                font-size: 13px;
                color: #666;
                line-height: 1.5;
              }
            }
          }
        }
      }
    }
  }
}

// 封面上传弹窗样式
.cover-upload-content {
  .current-cover {
    margin-bottom: 24px;
    
    h4 {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
    }
    
    .cover-preview {
      width: 200px;
      height: 150px;
      border: 2px solid #e4e7ed;
      border-radius: 8px;
      overflow: hidden;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  
  .upload-section {
    margin-bottom: 24px;
    
    h4 {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
    }
    
    .cover-uploader {
      width: 100%;
      
      .upload-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 200px;
        border: 2px dashed #d9d9d9;
        border-radius: 8px;
        background: #fafafa;
        transition: all 0.3s;
        
        &:hover {
          border-color: #409eff;
          background: #f5f7fa;
        }
        
        .el-icon--upload {
          font-size: 48px;
          color: #c0c4cc;
          margin-bottom: 16px;
        }
        
        .el-upload__text {
          color: #606266;
          font-size: 14px;
          
          em {
            color: #409eff;
            font-style: normal;
          }
        }
        
        .el-upload__tip {
          font-size: 12px;
          color: #909399;
          margin-top: 8px;
        }
      }
      
      .new-cover-preview {
        position: relative;
        width: 100%;
        height: 200px;
        border-radius: 8px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .preview-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s;
          
          &:hover {
            opacity: 1;
          }
        }
      }
    }
  }
  
  .cover-settings {
    h4 {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
    }
  }
}

// 课程封面管理样式
.course-cover {
  .cover-actions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    
    .el-button {
      background: rgba(0, 0, 0, 0.7);
      border: none;
      color: white;
      
      &:hover {
        background: rgba(0, 0, 0, 0.9);
      }
    }
  }
  
  &:hover .cover-actions {
    opacity: 1;
  }
}

// 列表视图中的封面样式
.table-cover {
  position: relative;
  width: 60px;
  height: 45px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .cover-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    
    .el-icon {
      font-size: 16px;
    }
  }
  
  &:hover .cover-mask {
    opacity: 1;
  }
}

// 岗位分配样式
.position-assignment-content {
  .assignment-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    
    .stat-item {
      flex: 1;
      text-align: center;
      padding: 16px;
      border-radius: 8px;
      
      &.required {
        background: rgba(245, 108, 108, 0.1);
        
        .stat-value {
          color: #f56c6c;
        }
      }
      
      &.optional {
        background: rgba(230, 162, 60, 0.1);
        
        .stat-value {
          color: #e6a23c;
        }
      }
      
      &.total {
        background: rgba(64, 158, 255, 0.1);
        
        .stat-value {
          color: #409eff;
        }
      }
      
      .stat-value {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 12px;
        color: #666;
      }
    }
  }
  
  .position-section {
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      h4 {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin: 0;
      }
    }
    
    .position-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
      
      .position-card {
        padding: 16px;
        border: 1px solid #e4e7ed;
        border-radius: 8px;
        background: #fff;
        
        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          
          .position-name {
            font-weight: 600;
            color: #333;
          }
        }
        
        .card-content {
          .position-desc {
            font-size: 12px;
            color: #666;
            margin-bottom: 8px;
            line-height: 1.4;
          }
          
          .position-meta {
            display: flex;
            gap: 12px;
            font-size: 11px;
            color: #999;
            
            span {
              display: flex;
              align-items: center;
              gap: 2px;
            }
          }
        }
      }
    }
  }
}

// 岗位选择器样式
.position-selector-content {
  .selector-header {
    margin-bottom: 20px;
  }
  
  .available-positions {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    
    .position-option {
      display: flex;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background: #f5f7fa;
      }
      
      &.selected {
        background: rgba(64, 158, 255, 0.1);
        border-color: #409eff;
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .position-info {
        flex: 1;
        
        .position-name {
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }
        
        .position-desc {
          font-size: 12px;
          color: #666;
          margin-bottom: 8px;
          line-height: 1.4;
        }
        
        .position-meta {
          display: flex;
          gap: 16px;
          font-size: 11px;
          color: #999;
          
          span {
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }
      }
      
      .selection-indicator {
        width: 24px;
        height: 24px;
        border: 2px solid #ddd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        
        .el-icon {
          color: #409eff;
          font-size: 14px;
        }
      }
      
      &.selected .selection-indicator {
        background: #409eff;
        border-color: #409eff;
        
        .el-icon {
          color: white;
        }
      }
    }
  }
  
  .selector-footer {
    margin-top: 16px;
    text-align: center;
    
    .selected-info {
      font-size: 14px;
      color: #666;
    }
  }
}

</style>
