<template>
  <div class="course-basic-info">
    <div class="upload-header">
      <h3>填写课程基本信息</h3>
      <p>完善课程信息以便学员更好地了解课程内容</p>
    </div>

    <div class="form-section">
      <div class="form-row">
        <div class="form-group">
          <label>课程标题 *</label>
          <el-input v-model="courseForm.title" placeholder="请输入课程标题" maxlength="128" show-word-limit />
        </div>
        <div class="form-group">
          <label>分类 *</label>
          <el-select v-model="courseForm.cateId" placeholder="请选择分类" style="width: 100%">
            <el-option 
              v-for="category in courseCategories" 
              :key="category.id" 
              :label="category.name" 
              :value="category.name" 
            />
          </el-select>
        </div>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label>是否免费 *</label>
          <el-select v-model="courseForm.isFree" placeholder="请选择" style="width: 100%">
            <el-option label="免费" :value="true" />
            <el-option label="付费" :value="false" />
          </el-select>
        </div>
      </div>

      <div class="form-group">
        <label>课程封面 *</label>
        <div class="cover-upload-area large-cover">
          <div v-if="!courseCoverFile" class="cover-upload-placeholder" @click="triggerCourseCoverSelect">
            <el-icon class="cover-upload-icon"><Picture /></el-icon>
            <p>点击上传课程封面</p>
            <p class="cover-hint">支持 JPG、PNG，建议尺寸 1280×720</p>
          </div>
          <div v-else class="cover-preview">
            <img :src="courseCoverPreviewUrl" alt="课程封面预览" class="cover-image" />
            <div class="cover-actions">
              <el-button @click="triggerCourseCoverSelect" size="small" :icon="Edit">更换</el-button>
              <el-button @click="clearCourseCover" size="small" type="danger" :icon="Delete">删除</el-button>
            </div>
          </div>
          <input ref="courseCoverInput" type="file" accept="image/*" @change="handleCourseCoverSelect" style="display: none" />
        </div>
      </div>

      <div class="form-group">
        <label>课程描述 *</label>
        <div class="editor-container">
          <QuillEditor
            v-model:content="courseForm.description"
            content-type="html"
            :options="editorOptions"
            style="height: 300px;"
            @update:content="handleContentUpdate"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Edit, Delete, Picture } from '@element-plus/icons-vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

// 本地 ref
const courseCoverInput = ref(null)

defineProps({
  courseForm: {
    type: Object,
    required: true
  },
  courseCategories: {
    type: Array,
    default: () => []
  },
  courseCoverFile: {
    type: Object,
    default: null
  },
  courseCoverPreviewUrl: {
    type: String,
    default: ''
  },
  editorOptions: {
    type: Object,
    required: true
  }
})

const emit = defineEmits([
  'triggerCourseCoverSelect',
  'clearCourseCover', 
  'handleCourseCoverSelect',
  'handleContentUpdate'
])

const triggerCourseCoverSelect = () => {
  courseCoverInput.value?.click()
}

const clearCourseCover = () => {
  // 清理本地 input
  if (courseCoverInput.value) {
    courseCoverInput.value.value = ''
  }
  emit('clearCourseCover')
}

const handleCourseCoverSelect = (event) => {
  emit('handleCourseCoverSelect', event)
}

const handleContentUpdate = (content) => {
  emit('handleContentUpdate', content)
}
</script>

<style scoped>
.upload-header { 
  text-align: center; 
  margin-bottom: 30px; 
}

.upload-header h3 { 
  color: #333; 
  margin-bottom: 10px; 
  font-size: 24px; 
  font-weight: 600; 
}

.upload-header p { 
  color: #666; 
  font-size: 14px; 
}

/* 表单区域 */
.form-section { 
  margin-bottom: 30px; 
}

.form-row { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 20px; 
  margin-bottom: 20px; 
}

.form-group { 
  margin-bottom: 20px; 
}

.form-group label { 
  display: block; 
  margin-bottom: 8px; 
  font-weight: 500; 
  color: #333; 
  font-size: 14px; 
  text-align: left; 
}

/* 封面上传复用样式 */
.cover-upload-area { 
  border: 2px dashed #ddd; 
  border-radius: 8px; 
  overflow: hidden; 
  transition: all 0.3s; 
}

.cover-upload-area:hover { 
  border-color: #000; 
}

.cover-upload-placeholder { 
  padding: 40px 20px; 
  text-align: center; 
  cursor: pointer; 
  background: #fafafa; 
}

.cover-upload-icon { 
  font-size: 32px; 
  color: #000; 
  margin-bottom: 12px; 
}

.cover-upload-placeholder p { 
  margin: 8px 0; 
  color: #666; 
  font-size: 14px; 
}

.cover-hint { 
  font-size: 12px; 
  color: #999; 
}

.cover-preview { 
  position: relative; 
  text-align: center; 
}

.cover-image { 
  width: 100%; 
  max-height: 200px; 
  object-fit: cover; 
  border-radius: 8px; 
}

.cover-actions { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  display: flex; 
  gap: 8px; 
}

/* 大尺寸封面样式 */
.large-cover .cover-upload-placeholder { 
  padding: 80px 40px; 
}

.large-cover .cover-upload-icon { 
  font-size: 48px; 
  margin-bottom: 20px; 
  color: #000; 
}

.large-cover .cover-upload-placeholder p { 
  font-size: 16px; 
  margin: 12px 0; 
}

.large-cover .cover-hint { 
  font-size: 14px; 
}

.large-cover .cover-image { 
  max-height: 400px; 
}

.large-cover .cover-actions { 
  top: 15px; 
  right: 15px; 
}

/* Quill富文本编辑器样式 */
.editor-container {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
}

.editor-container :deep(.ql-toolbar) {
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.editor-container :deep(.ql-container) {
  border: none;
  font-size: 14px;
}

.editor-container :deep(.ql-editor) {
  min-height: 250px;
  padding: 15px;
  line-height: 1.6;
}

.editor-container :deep(.ql-editor.ql-blank::before) {
  color: #c0c4cc;
  font-style: normal;
}

/* 确保工具栏按钮组左对齐 */
.editor-container :deep(.ql-formats) {
  margin-right: 15px;
}

.editor-container :deep(.ql-formats:first-child) {
  margin-left: 0;
}

/* 响应式 */
@media (max-width: 768px) {
  .form-row { 
    grid-template-columns: 1fr; 
    gap: 0; 
  }
}
</style>
