<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1000px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
      <el-form-item label="大纲课程" prop="acType">
        <el-tree-select
          v-model="formData.acType"
          :data="acTypeTree"
          :props="{
            ...defaultProps,
            label: (node) =>
              `${node.ctTypeNode === undefined ? node.ctType : node.ctTypeSort + '、' + node.ctType}`,
            disabled: (node) => node.ctTypeNode === undefined || node.ctTypeNode === '0'
          }"
          placeholder="请选择课程类型"
          :default-expand-all="true"
        />
      </el-form-item>
      <el-form-item label="课程名称" prop="acName">
        <el-input v-model="formData.acName" placeholder="请输入课程名称" />
      </el-form-item>

      <el-form-item label="课程标签" prop="acLabel">
        <el-select
          v-model="formData.acLabel"
          placeholder="请选择课程标签"
          @change="
            () => {
              if (!formData.acName) {
                const selectedDict = getStrDictOptions(DICT_TYPE.AICOURSE_COURSE_LABEL).find(
                  (dict) => dict.value === formData.acLabel
                )
                if (selectedDict) {
                  formData.acName = selectedDict.label
                }
              }
            }
          "
          clearable
        >
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.AICOURSE_COURSE_LABEL)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="内容类型" prop="acContentType">
        <el-radio-group v-model="formData.acContentType">
          <el-radio-button
            v-for="dict in getStrDictOptions(DICT_TYPE.COURSE_COUTNET_TYPE)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="formData.acContentType === 'all'" label="课程内容" prop="acContent">
        <Editor v-model="formData.acContent" height="150px" />
      </el-form-item>

      <el-form-item v-if="formData.acContentType === 'text'" label="纯文本" prop="acContent">
        <Editor v-model="formData.acContent" height="150px" />
      </el-form-item>

      <el-form-item v-if="formData.acContentType === 'image'" label="课程图片集" prop="acContent">
        <UploadImgs
          v-model="formData.acContent"
          @upload-progress="handleUploadProgress"
          @upload-start="handleUploadStart"
          @upload-complete="handleUploadComplete"
        />
      </el-form-item>

      <el-form-item v-if="formData.acContentType === 'music'" label="课程音频" prop="acContent">
        <UploadMusic
          v-model="formData.acContent"
          @upload-progress="handleUploadProgress"
          @upload-start="handleUploadStart"
          @upload-complete="handleUploadComplete"
        />
      </el-form-item>

      <el-form-item v-if="formData.acContentType === 'video'" label="课程视频" prop="acContent">
        <UploadVideo
          v-model="formData.acContent"
          @upload-progress="handleUploadProgress"
          @upload-start="handleUploadStart"
          @upload-complete="handleUploadComplete"
        />
      </el-form-item>

      <el-form-item v-if="formData.acContentType === 'ppt'" label="课程PPT" prop="acContent">
        <UploadFile
          v-model="formData.acContent"
          :fileType="['ppt', 'pptx']"
          :limit="1"
          :fileSize="50"
          @upload-progress="handleUploadProgress"
          @upload-start="handleUploadStart"
          @upload-complete="handleUploadComplete"
        />
      </el-form-item>

      <!-- 上传进度条 -->
      <el-form-item>
        <div v-if="isUploading" class="uploadProgress">
          <el-progress :percentage="uploadProgress" />
          <div class="text-xs text-gray-500 text-right mt-1">{{ uploadProgress }}% 已上传</div>
        </div>
      </el-form-item>

      <template v-if="formData.acContentType === 'aiTextToText' ||
        formData.acContentType === 'aiTextToImage' ||
        formData.acContentType === 'aiImageToImage' ||
        formData.acContentType === 'aiImageToVideo'">
        <!-- 前置对话 -->
        <el-form-item label="前置对话" prop="aiPreDialogues">
          <div class="pre-dialogue-container">
            <div
              v-for="(item, index) in formData.aiPreDialogues"
              :key="index"
              class="pre-dialogue-item"
            >
              <div class="dialog-type-radio">
                <el-radio-group v-model="item.type">
                  <el-radio-button label="system">数字人</el-radio-button>
                  <el-radio-button label="user">用户</el-radio-button>
                </el-radio-group>
              </div>
              <div class="dialog-content">
                <el-input
                  type="textarea"
                  rows="1"
                  v-model="item.content"
                  placeholder="请输入对话内容"
                />
              </div>
              <div class="dialog-delete">
                <el-button
                  type="danger"
                  size="small"
                  :icon="Delete"
                  @click="formData.aiPreDialogues.splice(index, 1)"
                  circle
                />
              </div>
            </div>
            <el-button
              type="primary"
              size="small"
              :icon="Plus"
              @click="addPreDialogue"
              class="add-dialogue-btn"
            >
              添加对话
            </el-button>
          </div>
        </el-form-item>

        <!-- 回复补充 -->
        <el-form-item label="回复补充" prop="aiReplySupplement">
          <el-input
            v-model="formData.aiReplySupplement"
            type="textarea"
            placeholder="请输入回复补充内容"
            :rows="2"
          />
        </el-form-item>
      </template>

      <template v-else>
        <el-form-item label="课程是否有检查" prop="acIsInspect">
          <el-radio-group v-model="formData.acIsInspect">
            <el-radio
              v-for="dict in getStrDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
              :key="dict.value"
              :label="dict.value"
            >
              {{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </template>

      <el-form-item label="课程排序" prop="acOrder">
        <el-input-number v-model="formData.acOrder" placeholder="请输入课程排序" class="!w-1/1" />
      </el-form-item>

      <el-form-item label="课程状态" prop="acStatus">
        <el-radio-group v-model="formData.acStatus">
          <el-radio
            v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading || isUploading"
        >确 定</el-button
      >
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { AiCourseApi, AiCourseVO } from '@/api/aiCourse/aiCourse'
import { defaultProps, handleTree } from '@/utils/tree'
import { AiCourseTypeApi } from '@/api/aiCourse/aiCourseType'
import { Delete, Plus } from '@element-plus/icons-vue'

/** 课程 表单 */
defineOptions({ name: 'AiCourseForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改

const formData = ref({
  id: undefined,
  acName: undefined,
  acContentType: undefined,
  acContent: undefined,

  acIsInspect: 'false',
  acType: undefined,
  acLabel: undefined,
  acOrder: undefined,
  acStatus: '0',
  tenantId: undefined,
  // 前置对话（集合类型）
  aiPreDialogues: [],
  // 回复补充
  aiReplySupplement: undefined
})

// 添加上传进度相关的状态
const uploadProgress = ref(0)
const isUploading = ref(false)

// 添加前置对话
const addPreDialogue = () => {
  formData.value.aiPreDialogues.push({
    type: 'user',
    content: ''
  })
}

const formRules = reactive({
  acType: [{ required: true, message: '课程类型不能为空', trigger: 'blur' }],
  acName: [{ required: true, message: '课程名称不能为空', trigger: 'blur' }],
  acLabel: [{ required: true, message: '课程标签不能为空', trigger: 'blur' }],
  acOrder: [{ required: true, message: '课程排序不能为空', trigger: 'blur' }]
})

const formRef = ref() // 表单 Ref
const acTypeTree = ref() // 树形结构

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()

  // 新增时，绑定类型
  if (type === 'create' && id) {
    // 确保 acType 为正确的 id 类型
    formData.value.acType = id ? Number(id) : undefined
  }
  // 修改时，设置数据
  if (type === 'update' && id) {
    formLoading.value = true
    try {
      const aiCourseData = await AiCourseApi.getAiCourse(id)
      formData.value = {
        ...formData.value,
        ...aiCourseData,
        acContent:
          aiCourseData.acType === 'image'
            ? aiCourseData.acContent?.split(',')
            : aiCourseData.acContent,
        acInfo: aiCourseData.acInfo || '',
        // 处理前置对话的回显，将json字符串转成数组
        aiPreDialogues: aiCourseData.aiPreDialogues ? JSON.parse(aiCourseData.aiPreDialogues) : [],
        aiReplySupplement: aiCourseData.aiReplySupplement || ''
      }
      // 确保 acType 为正确的 id 类型
      formData.value.acType = aiCourseData.acType ? Number(aiCourseData.acType) : undefined
    } finally {
      formLoading.value = false
    }
  }

  await getAcTypeTree()
}
/** 获得课程-类型树 */
const getAcTypeTree = async () => {
  acTypeTree.value = []
  const data = await AiCourseTypeApi.getAiCourseTypeSimpleList()
  const root: Tree = { id: 0, ctType: '课程类型', children: [] }
  root.children = handleTree(data, 'id', 'ctParentId')
  acTypeTree.value.push(root)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()

  // 提交请求
  formLoading.value = true
  try {
    const data = { ...formData.value } as unknown as AiCourseVO
    if (data.acContentType === 'image') {
      data.acContent = data.acContent?.join(',')
    }
    // 处理前置对话，将数组转成json字符串
    if (data.aiPreDialogues) {
      data.aiPreDialogues = JSON.stringify(data.aiPreDialogues)
    }
    if (formType.value === 'create') {
      await AiCourseApi.createAiCourse(data)
      message.success(t('common.createSuccess'))
    } else {
      await AiCourseApi.updateAiCourse(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false

    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

// 外层表单上传进度处理方法
const handleUploadProgress = (progress: number) => {
  uploadProgress.value = progress
}

const handleUploadStart = () => {
  isUploading.value = true
  uploadProgress.value = 0
}

const handleUploadComplete = () => {
  isUploading.value = false
  uploadProgress.value = 100
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    acName: undefined,
    acContentType: undefined,
    acContent: undefined,

    acIsInspect: 'false',
    acType: undefined,
    acLabel: undefined,
    acOrder: undefined,
    acStatus: '0',
    tenantId: undefined,
    // 重置新增字段
    aiPreDialogues: [{ type: 'user', content: '' }],
    aiReplySupplement: undefined
  }
}
</script>

<style scoped>
/* 大纲课程树选择器样式 */
:deep(.el-tree-select__dropdown .el-tree-node__content) {
  font-size: 14px;
}

/* 上传进度条样式 */
.uploadProgress {
  width: 85%;
  margin-top: 10px;
}

.pre-dialogue-container {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 12px;
  background-color: #fafafa;
  width: 100%;
}

.pre-dialogue-item {
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.pre-dialogue-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dialog-type-radio {
  width: 120px;
  flex-shrink: 0;
}

.dialog-type-radio :deep(.el-radio-button__inner) {
  padding: 4px 8px;
  font-size: 12px;
}

.dialog-content {
  flex: 1;
}

.dialog-content :deep(.el-input__wrapper) {
  border-radius: 4px;
}

.dialog-delete {
  flex-shrink: 0;
}

.dialog-delete :deep(.el-button) {
  padding: 6px;
}

.add-dialogue-btn {
  display: block;
  margin-top: 10px;
  width: 100%;
}
</style>
