AIClass/src/views/AIDevelop.vue

<template>
  <!-- AI发展历程 -->
  <div class="home-container">
    <!-- 展开收起侧边栏 -->
    <div
      class="icon-expand"
      :style="{
        backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
        left: drawerVisible ? '18%' : '0'
      }"
      @click="toggleDrawer"
    >
      <span
        class="vertical-lines"
        :style="{
          color: drawerVisible ? '#8a78d0' : 'white'
        }"
        >||</span
      >
    </div>

    <el-drawer
      v-model="drawerVisible"
      direction="ltr"
      size="18%"
      :with-header="false"
    >
      <!-- 添加抽屉 -->
      <div class="drawer-box">
        <el-row class="tac">
          <el-col :span="12">
            <span class="mb-2">
              <img :src="classImages" alt="课程小节图标" />
              课程小节
            </span>
            <el-menu
              :default-active="course.key"
              @open="handleOpen"
              @close="handleClose"
              @select="handleSelect"
              :default-openeds="['3','5']"
            >
              <template v-for="item in menuItems" :key="item.key">
                <el-menu-item v-if="!item.children" :index="item.key">{{
                  item.title
                }}</el-menu-item>
                <el-sub-menu v-else :index="item.key">
                  <template #title>
                    <span>{{ item.title }}</span>
                  </template>
                  <el-menu-item-group v-if="item.children">
                    <template v-for="child in item.children" :key="child.key">
                      <el-menu-item :index="child.key"
                        >• {{ child.title }}</el-menu-item
                      >
                    </template>
                  </el-menu-item-group>
                </el-sub-menu>
              </template>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </el-drawer>

    <div class="content-box">
      <div class="box-1">
        <div class="inner-box left-box">
          <div class="box-icon" @click="goBack">
            <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
            {{ boxIconTitle }}
          </div>
        </div>
        <div class="inner-box right-box">
          <div class="top-right-box">
            <el-autocomplete
              v-model="SearchInput"
              :fetch-suggestions="querySearch"
              placeholder="搜索"
              @select="handleSearchSelect"
              class="search-input"
              value-key="title"
              :trigger-on-focus="false"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
              <template #popper-append-to-body>
                <el-option
                  class="scrollbar"
                  v-for="item in filteredTitles"
                  :key="item.key"
                  :label="item.title"
                  :value="item"
                ></el-option>
              </template>
            </el-autocomplete>
          </div>
        </div>
      </div>

      <div class="box-2">
        <!-- 课程标题 autoplay自动播放   @ended="playNextVideo"-->
        <div class="small-title">
          <span>{{ course.courseName }}</span>
        </div>
        <div class="box-video">
          <video
            class="full-box-video video-js vjs-default-skin"
            :src="course.courseVideoPath"
            controlsList="nodownload"
            controls
            @timeupdate="handleTimeUpdate"
            @play="checkVideoPermission"
            @seeked="handleSeeked"
            @ended="handleVideoEnded"
            ref="videoRef"
          >
            <source :src="course.courseVideoPath" type="video/mp4" />
            您的浏览器不支持视频播放。
          </video>
        </div>

        <!-- 添加切换视频 -->
        <div class="video-switch">
          <!-- 上一个视频 -->
          <div class="caret-left" @click="playPreviousVideo">
            <el-button type="warning" round>
              <img :src="leftImg" alt="Left" />
              上一节</el-button
            >
          </div>
          <!-- 下一个视频 -->
          <div class="caret-right" @click="playNextVideo">
            <el-button type="warning" round
              >下一节
              <img :src="rightImg" alt="Right" />
            </el-button>
          </div>
        </div>
      </div>

      <!-- 添加试题弹框 -->
      <transition name="fade-scale">
        <div
          v-show="questionDialogVisible"
          class="child-dialog-wrapper"
          @click.self="handleCloseQuestionDialog"
        >
          <div class="child-dialog">
            <div class="question-title">
              <span class="question-icon">?</span>
              <span v-html="courseConfig.ccQuestContent"></span>
            </div>
            <!-- 选项区域 -->
            <div
              v-if="
                courseConfig.ccQuestOption &&
                courseConfig.ccQuestOption.length > 0
              "
              class="options-container"
            >
              <div
                v-for="(option, index) in courseConfig.ccQuestOption"
                :key="index"
                class="question-option"
              >
                <el-radio
                  v-model="selectedOption"
                  :label="index"
                  :value="option"
                  v-cloak="(selectedOption = option)"
                >
                  <span>{{ option }}</span>
                </el-radio>
              </div>
            </div>
            <div v-else class="no-options">
              <!-- 暂无选项 -->
            </div>
            <!-- 底部按钮 -->
            <div class="dialog-footer">
              <!-- <el-button class="child-button cancel" @click="questionDialogVisible = false; showAIDialog = false">取消</el-button>-->
              <el-button
                class="child-button confirm"
                @click="handleSubmitAnswer"
                >确定</el-button
              >
            </div>
            <!-- 右侧小图标 -->
            <div
              v-if="courseConfig.ccAiAnswer !== null"
              class="ai-icon-container"
              @click="handleAIClick"
            >
              <img
                src="@/assets/images/xiaozhi.png"
                alt="AI对话"
                class="ai-icon"
              />
              <span class="ai-text">小智智能助手</span>
            </div>
          </div>
        </div>
      </transition>
      <!-- AI对话弹框 -->
      <div
        v-show="showAIDialog"
        class="ai-dialog-wrapper"
        @click.self="showAIDialog = false"
      >
        <div class="ai-dialog">
          <div class="ai-dialog-header">
            <h3>
              <img :src="auto" alt="" />
              小智智能助手
            </h3>
            <el-button @click="showAIDialog = false" class="close-btn"
              >×</el-button
            >
          </div>
          <div class="ai-dialog-content">
            <div class="ai-message-history">
              <div
                v-for="(message, index) in messageList"
                :key="index"
                :class="['message', message.type]"
              >
                <img
                  v-if="message.type === 'user'"
                  src="@/assets/images/user.png"
                  class="avatar user"
                />
                <img v-else src="@/assets/images/xiaozhi.png" class="avatar" />
                <div
                  class="message-content"
                  v-if="message.type === 'user'"
                  v-html="message.content"
                ></div>
                <div class="message-content" v-else>
                  <MarkdownView class="left-text" :content="message.content" />
                </div>
              </div>
            </div>
            <!-- 弹框默认消息 -->
            <DefaultMessage
              class="default-messages"
              :category="'ai_develop'"
              :questTip="
                course.courseConfigList && course.courseConfigList[0]
                  ? course.courseConfigList[0].ccAiQuestTip
                  : ''
              "
              @select-message="handleSelectMessage"
            />
            <el-input
              v-model="prompt"
              placeholder="输入问题..."
              class="user-input"
              @keyup.enter="handleSendByKeydown"
            >
              <template #append class="flex flex-wrap items-center mb-4">
                <el-button @click="handleSendByButton" size="large" round
                  >发送</el-button
                >
              </template>
            </el-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, onBeforeUnmount, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import '@videojs/http-streaming' // 支持HLS分片
const videoPlayer = ref(null)
let player = null

import { Expand, Fold, Memo } from '@element-plus/icons-vue'
import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
import {
  ElMessage,
  ElMessageBox,
  ElNotification,
  valueEquals
} from 'element-plus'

import classImages from '@/assets/icon/class.png'
import leftImg from '@/assets/icon/backward.png'
import rightImg from '@/assets/icon/f-backward.png'

import auto from '@/assets/icon/auto_awesome.png'

import { ClassType } from '@/api/class.js'
import { Message } from '@/utils/message/Message.js'
import { saveRecord } from '@/api/personalized/index.js'

import DefaultMessage from '@/components/DefaultMessage/index.vue'
import { CreateDialogue, sendChatMessageStream } from '@/api/questions.js'
import { teacherList } from '@/api/teachers.js'
import MarkdownView from '@/components/MarkdownView/index.vue'

// 导入全局状态
import { globalState } from '@/utils/globalState.js'


// 处理选择的默认消息
const handleSelectMessage = message => {
  prompt.value = message
}

const router = useRouter() // 获取当前路由对象

// 添加按钮显示状态
const buttonVisible = ref(false)
// 添加抽屉显示状态
const drawerVisible = ref(false)
// 添加切换抽屉显示状态的函数
const toggleDrawer = () => {
  drawerVisible.value = !drawerVisible.value
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 渲染页面标题
const boxIconTitle = ref('')

// 课程集合数据
const courseList = ref([])
//当前课程
const course = ref({})
// 菜单数据
const menuItems = ref([])
// 课程集合数据
const videoPathMap = ref({})
// 已观看课程ID列表
const watchedCourseIds = ref([])

//课程小节字典（需要新加接口调取字典）
const menuDict = ref({
  1: '课前回顾',
  2: '课程引入',
  3: '知识讲解',
  4: '趣味实操',
  5: '课程总结'
})

// 渲染 课程数据结构 以及 视频
onMounted(async () => {
  const typeId = router.currentRoute.value.query.typeId
  if (typeId) {
    try {
      // 取接口课程数据
      const res = await ClassType(typeId)
      console.log(res);
      courseList.value = res.data
      // 初始化已观看课程ID
      const savedWatchedIds = localStorage.getItem('watchedCourseIds')
      if (savedWatchedIds) {
        watchedCourseIds.value = JSON.parse(savedWatchedIds)
      }
      //课程数据
      courseList.value.forEach((courseTemp, index) => {
        let menuIndex = courseTemp.courseLabel + '-' + (index + 1)
        //填充大纲小节
        let menu = menuItems.value.find(
          menu => courseTemp.courseLabel === menu.index
        )

        if (menu) {
          //小节
          menu.children = menu.children || []
          menu.children.push({
            key: menuIndex,
            index: menuIndex,
            title: courseTemp.courseName
          })
        } else {
          //大节
          let temp = {
            key: menuIndex,
            index: courseTemp.courseLabel,
            title: menuDict.value[courseTemp.courseLabel]
          }
          if (courseTemp.courseLabel === '3' || courseTemp.courseLabel === '5') {
            temp.children = [
              {
                key: menuIndex,
                index: menuIndex,
                title: courseTemp.courseName
              }
            ]
          }
          menuItems.value.push(temp)
        }

        courseTemp['key'] = menuIndex
        videoPathMap.value[menuIndex] = courseTemp

        //确定默认课程
        if (index === 0) {
          course.value = courseTemp
        }
      })
    } catch (error) {
      console.error('获取课程数据失败：', error)
    }
  }

  const title = router.currentRoute.value.query.typeName
  if (title) {
    boxIconTitle.value = String(title)
  }
  // 在视频元素上添加时间更新事件监听
  if (videoRef.value) {
    videoRef.value.addEventListener('timeupdate', handleTimeUpdate)
  }
})

// 菜单打开和关闭的处理函数
const handleOpen = () => {}
const handleClose = () => {}

// 菜单选择的处理函数
const handleSelect = index => {
  //测试账号禁用视频
  if (disableVideo(index)) return
  const findTitle = items => {
    for (const item of items) {
      if (item.key === index) {
        return item.title
      }
      if (item.children) {
        const result = findTitle(item.children)
        if (result) {
          return result
        }
      }
    }
    return null
  }
  // 根据索引切换视频，使用新的 videoPathMap
  if (videoPathMap.value[index]) {
    course.value = videoPathMap.value[index]
      courseId.value = course.value.id
    // 切换标题后，关闭抽屉
    drawerVisible.value = false
  } else {
    //视频不存在
    Message().notifyWarning('视频不存在！', true)
  }

  //测试账号禁用视频
  if (disableVideo()) return
}

// 展平所有菜单项索引
const flattenMenuItems = () => {
  const indices = []
  const traverse = items => {
    for (const item of items) {
      if (!item.children) {
        indices.push(item.key)
      } else {
        traverse(item.children)
      }
    }
  }
  traverse(menuItems.value)
  return indices
}

// 播放下一个视频
const playNextVideo = () => {
  //测试账号禁用视频
  if (disableVideo()) return

  // 记录当前视频ID为已观看
  if (
    course.value &&
    course.value.id &&
    !watchedCourseIds.value.includes(course.value.id)
  ) {
    watchedCourseIds.value.push(course.value.id)
    localStorage.setItem(
      'watchedCourseIds',
      JSON.stringify(watchedCourseIds.value)
    )
  }

  const allIndices = flattenMenuItems()
  const currentIndexInList = allIndices.indexOf(course.value.key)
  if (currentIndexInList !== -1 && currentIndexInList < allIndices.length - 1) {
    const nextIndex = allIndices[currentIndexInList + 1]
    handleSelect(nextIndex)
    // 切换视频后自动播放
    if (videoRef.value) {
      videoRef.value.addEventListener('loadedmetadata', tryPlayVideo, {
        once: true
      })
    }
  }

  // 重置
  pausedIndices.value = []
  prompt.value = ''
  messageList.value = []
}

// 切换视频
// 播放上一个视频
const playPreviousVideo = () => {
  //测试账号禁用视频
  if (disableVideo()) return

  const allIndices = flattenMenuItems()
  const currentIndexInList = allIndices.indexOf(course.value.key)
  if (currentIndexInList > 0) {
    const previousIndex = allIndices[currentIndexInList - 1]
    handleSelect(previousIndex)
    // 切换视频后自动播放
    if (videoRef.value) {
      videoRef.value.addEventListener('loadedmetadata', tryPlayVideo, {
        once: true
      })
    }
  }
}

// 尝试播放视频，处理浏览器自动播放限制
const tryPlayVideo = () => {
  //测试账号禁用视频
  if (disableVideo()) return

  const playPromise = videoRef.value.play()
  if (playPromise !== undefined) {
    playPromise.catch(error => {
      console.error('视频播放失败，可能是浏览器自动播放限制:', error)
    })
  }
  player = videojs(videoPlayer.value, {
    controls: true,
    sources: [
      {
        src: course.value.courseVideoPath,
        type: 'video/mp4'
      }
    ],
    preload: 'metadata' // 仅加载元数据，避免预加载整个文件
  })
}

// 检查视频播放权限
const checkVideoPermission = () => {
  if (disableVideo() || questionDialogVisible.value) {
    if (videoRef.value) {
      videoRef.value.pause()
    }
  }
}

//禁用视频
const disableVideo = (index = course.value.key) => {
  let dis = [
    '3-7',
    '3-8',
    '3-9',
    '3-10',
    '3-11',
    '3-12',
    '3-13',
    '4-14',
    '5-15'
  ]

  if (
    localStorage.getItem('userName') === 'aiTest' &&
    dis.indexOf(index) !== -1
  ) {
    if (videoRef.value) {
      // 记录当前播放时间
      videoRef.value.pause()
      // 阻止用户跳转到新的时间点，将播放时间重置为之前的时间
      videoRef.value.currentTime = 0
    }
    //提示禁用// 显示消息框
    Message().notifyWarning('您的账号并未开放此课程！', true)
    return true
  }
  return false
}

// 视频 ref
const videoRef = ref(null)
// 记录已经暂停过的时间点索引
let pausedIndices = ref([])
// 试题弹框显示状态
const questionDialogVisible = ref(false)
// 当前显示的试题
const courseConfig = ref({})
// 用户选择的选项
const selectedOption = ref(null)
// 记录已经保存的进度百分比
const savedProgress = ref([])
// 节流时间间隔(毫秒)
const THROTTLE_TIME = 5000
// 上次播放进度
const lastPlayProgress = ref(0)
// 定义进度数组
const targetProgresses = [10, 50, 100]
// AI对话弹出框显示状态
let showAIDialog = ref(false)
// 消息历史记录
// let messageList = ref([])
// 年级id
const gradeId = ref('')
// 课程大纲id
const typeId = ref('')
// 课程小节id
const courseId = ref('')
// AI问答次数
const aiQuestionCount = ref(0)


// 定义节流函数
const throttle = (fn, delay) => {
  let lastCall = 0
  return function(...args) {
    const now = Date.now()
    if (now - lastCall >= delay) {
      lastCall = now
      return fn.apply(this, args)
    }
  }
}

// 保存进度(带节流)
const saveProgress = throttle(async (progress, currentTime) => {
  try {
    // 保存到localStorage，下次加载视频续播
    localStorage.setItem(`videoProgress_${courseId.value}`, JSON.stringify({
      progress: progress,
      currentTime: currentTime,
      timestamp: Date.now()
    }))

    // 获取课程小节id
    if (typeId.value) {
      const courseRes = await ClassType(typeId.value)
      if (courseRes.data && courseRes.data.length > 0) {
        // 使用选中的课程id
        if (course.value && course.value.id) {
          courseId.value = course.value.id
        } else {
          // 如果没有选中的课程，默认使用第一个课程id
          courseId.value = courseRes.data[0].id
        }
      }
    }
    // 保存视频进度接口
     await saveRecord({
        brpNjId: gradeId.value,
        brpCtId: typeId.value,
        brpCourseId: courseId.value,
        brpType: 'course',
        brpProgress: progress
      })
      savedProgress.value.push(progress)
  } catch (error) {
    console.error(`保存进度失败:`, error)
  }
}, THROTTLE_TIME)

// 处理视频时间更新事件
const handleTimeUpdate = () => {
  // 测试账号禁用视频
  if (!videoRef.value) return
  const currentTime = parseInt(videoRef.value.currentTime)
  const duration = videoRef.value.duration || 0
  const progressPercentage = duration > 0 ? Math.round((currentTime / duration) * 100) : 0
    // 更新最后播放进度
  lastPlayProgress.value = progressPercentage
   // 检查是否达到目标进度点且尚未保存
  targetProgresses.some(target => {
    const isNearTarget = Math.abs(progressPercentage - target) <= 2
    const isNotSaved = !savedProgress.value.includes(target)
    if (isNearTarget && isNotSaved) {
      // 保存目标进度
      saveProgress(target, currentTime)
      return true 
    }
    return false
  })
  // 使用节流保存进度
  saveProgress(progressPercentage, currentTime)
  if (!course.value.courseConfigList) return
  course.value.courseConfigList.forEach(courseCofig => {
    //暂停时间
    let time = courseCofig.ccTime
    // 检查是否到达时间点且还未暂停过
    if (currentTime === time && !pausedIndices.value.includes(time)) {
      videoRef.value.pause()
      // 记录暂停时间
      pausedIndices.value.push(currentTime)
      // 视频弹框显示对应的问题
      if (courseCofig.ccQuestContent) {
        questionDialogVisible.value = true
        courseConfig.value = courseCofig
        // 解析选项
        if (courseCofig.ccQuestOption) {
          courseConfig.courseQuestion = courseCofig.ccQuestOption.split(',')
        }
        // 添加试题进度
        const saveQuestProgress = async () =>{
          try {
            // 确保courseId已经设置
            if (!courseId.value && typeId.value) {
              const courseRes = await ClassType(typeId.value)
              if (courseRes.data && courseRes.data.length > 0) {
                courseId.value = course.value && course.value.id ? course.value.id : courseRes.data[0].id
              }
            }
            if (courseCofig.id) {
              // 保存弹窗问题进度
              await saveRecord({
                brpNjId: gradeId.value,
                brpCtId: typeId.value,
                brpCourseConfigId: courseCofig.id,
                brpCourseId: courseId.value,
                brpType: 'courseQuest',
                brpProgress: progressPercentage
              })
            } else {
              console.error('无法保存试题进度: 试题id不存在')
            }
          }catch(error){
            console.error(`保存试题进度失败:`, error)
          }
        }
        // 调用异步函数
        saveQuestProgress()
      }
    }
  })
}

// 在视频加载完成后设置上次播放进度
const setLastPlayPosition = () => {
  if (!videoRef.value) return
  try {
    const savedData = localStorage.getItem(`videoProgress_${courseId.value}`)
    if (savedData) {
      const { currentTime, progress } = JSON.parse(savedData)
      if (currentTime && !isNaN(currentTime)) {
        videoRef.value.currentTime = currentTime
        lastPlayProgress.value = progress
      }
    }
  } catch (error) {
    console.error('读取上次播放进度失败:', error)
  }
}


// 视频完成拖动进度条时触发的方法
const handleSeeked = () => {
  pausedIndices.value = []
}

// 关闭试题弹框
const handleCloseQuestionDialog = () => {
  questionDialogVisible.value = false
  // 继续播放视频
  videoRef.value.play()
}

// 提交答案
const handleSubmitAnswer = () => {
  // 这里可以添加答案验证逻辑
  questionDialogVisible.value = false
  // 继续播放视频
  videoRef.value.play()
  selectedOption.value = null
}

// 发送消息
const sendMessage = async () => {
  if (prompt.value.trim()) {
    // 添加用户消息到历史记录
    messageList.value.push({
      type: 'user',
      content: prompt.value
    })

    // 模拟 AI 回复
    const aiResponse = await simulateAIResponse(prompt.value)
    messageList.value.push({
      type: 'ai',
      content: aiResponse
    })

    activeMessageList.value = messageList.value

    // 清空输入框
    prompt.value = ''
  }
}

// 处理 AI 助手点击事件
const handleAIClick = () => {
  // 清空输入框
  messageList.value = []
  if (courseConfig.value.ccQuestContent) {
    prompt.value = courseConfig.value.ccQuestContent
    sendMessage()
    prompt.value = ''
  }
  showAIDialog.value = true

  //创建对话
  createAiChart()
}

// 模拟 AI 回复
const simulateAIResponse = question => {
  return new Promise(resolve => {
    setTimeout(() => {
      if (courseConfig.value.ccAiAnswer) {
        resolve(courseConfig.value.ccAiAnswer)
        return
      }
      // 若未匹配到自定义回复，给出默认回复
      resolve(`您的问题是：${question}，这是 AI 的回复示例。`)
    }, 1000)
  })
}
// 关闭AI对话弹出框
const handleCloseAIDialog = () => {
  showAIDialog.value = false
}

// 搜索框
const SearchInput = ref('')
// 添加搜索建议查询方法
const querySearch = (queryString, cb) => {
  const sections = getAllCourseSections()
  const results = queryString
    ? sections.filter(section =>
        section.title.toLowerCase().includes(queryString.toLowerCase())
      )
    : sections
  cb(results)
}
const filteredTitles = computed(() => {
  const sections = getAllCourseSections()
  if (!SearchInput.value) {
    return sections
  }
  return sections.filter(section =>
    section.title.toLowerCase().includes(SearchInput.value.toLowerCase())
  )
})
const handleSearchSelect = item => {
  handleSelect(item.key)
  // 添加以下代码清空输入框
  SearchInput.value = ''
}
// 添加课程小节数据提取方法
const getAllCourseSections = () => {
  let sections = []
  const traverse = items => {
    items.forEach(item => {
      if (item.children) {
        traverse(item.children)
      } else {
        sections.push({ title: item.title, key: item.key })
      }
    })
  }
  traverse(menuItems.value)
  return sections
}

// =========== 【聊天对话】小智ai ===========

// 数字人接口
const route = useRoute()
const grade = ref('')
const xZAiData = ref({})
const getXzAi = async () => {
  try {
    grade.value = route.query.grade || localStorage.getItem('selectedGrade')

    // 获取小学低年级AI数据
    const juniorAIRes = await teacherList({ category: grade.value + 'AI' })
    const aiPerson = juniorAIRes.data.list.find(
      person => person.name === '小智'
    )
    if (aiPerson) {
      xZAiData.value = {
        id: aiPerson.id,
        name: aiPerson.name,
        image: aiPerson.model2dPath,
        message: aiPerson.systemMessage,
        default: aiPerson.questTip
      }
    } else {
      console.warn('未找到名为小智的数据')
    }
  } catch (error) {
    console.error('获取年级AI数据失败:', error)
  }
}

// =========== 【聊天对话】对话相关 ===========

// 聊天对话
const activeConversationModelPath = ref(null) // 选中的对话编号
const activeConversationId = ref(null) // 选中的对话编号
const activeConversation = ref(null) // 选中的 Conversation
const conversationInProgress = ref(false) // 对话是否正在进行中。目前只有【发送】消息时，会更新为 true，避免切换对话、删除对话等操作，导致 stream 中断

// 消息列表
const messageRef = ref()
const activeMessageList = ref([]) // 选中对话的消息列表
// 消息滚动
const textSpeed = ref(50) // Typing speed in milliseconds
const textRoleRunning = ref(false) // Typing speed in milliseconds

// 发送消息输入框
const isComposing = ref(false) // 判断用户是否在输入
const conversationInAbortController = ref() // 对话进行中 abort 控制器(控制 stream 对话)
const inputTimeout = ref() // 处理输入中回车的定时器
const prompt = ref() // prompt
const enableContext = ref(true) // 是否开启上下文
// 接收 Stream 消息
const receiveMessageFullText = ref('')
const receiveMessageDisplayedText = ref('')

//创建对话
const createAiChart = async () => {
  // 先获取数字人接口
  await getXzAi()

  // 智能问答
  CreateDialogue({ roleId: xZAiData.value.id })
    .then(res => {
      // console.log('创建会话：', res)
      activeConversationId.value = res.data
    })
    .catch(error => {
      console.error('请求出错:', error)
    })

  await getConversation(xZAiData.value.id)
}

// =========== 【聊天对话】相关 ===========

/** 获取对话信息 */
const getConversation = async id => {
  if (!id) {
    return
  }
  const conversation = ref({})
  if (!conversation) {
    return
  }
  conversation.systemMessage = xZAiData.value.message
  activeConversation.value = conversation
  activeConversationModelPath.value = xZAiData.value.image
}

// =========== 【发送消息】相关 ===========

/** 处理来自 keydown 的发送消息 */
const handleSendByKeydown = async event => {
  // 判断用户是否在输入
  if (isComposing.value) {
    return
  }
  // 进行中不允许发送
  if (conversationInProgress.value) {
    return
  }
  const content = prompt.value?.trim()

  if (event.key === 'Enter') {
    if (event.shiftKey) {
      // 插入换行
      prompt.value += '\r\n'
      event.preventDefault() // 防止默认的换行行为
    } else {
      // 发送消息
      await doSendMessage(content)
      event.preventDefault() // 防止默认的提交行为
    }
  }
}


onMounted(() => {
  // 获取本地存储中的值
  gradeId.value = globalState.initGradeId()
  typeId.value = localStorage.getItem('typeId') || ''
  // 视频相关初始化
  initVideoProgress()
})

const initVideoProgress = () => {
  // 延迟设置上次播放进度，确保视频已加载
  setTimeout(() => {
    setLastPlayPosition()
  }, 1000)
  // 检查是否已有保存的进度点
  const savedData = localStorage.getItem(`videoProgress_${courseId.value}`)
  if (savedData) {
    try {
      const { progress } = JSON.parse(savedData)
      if (progress >= 10) savedProgress.value.push(10)
      if (progress >= 50) savedProgress.value.push(50)
      if (progress >= 100) savedProgress.value.push(100)
    } catch (error) {
      console.error('解析保存的进度失败:', error)
    }
  }
}

// 添加视频结束事件处理
const handleVideoEnded = () => {
  // 视频结束时保存100%进度
  if (!savedProgress.value.includes(100)) {
    saveProgress(100, videoRef.value.duration)
  }
}

/** 处理来自【发送】按钮的发送消息 */
const handleSendByButton = () => {
  doSendMessage(prompt.value?.trim())
}

/** 处理 prompt 输入变化 */
const handlePromptInput = event => {
  // 非输入法 输入设置为 true
  if (!isComposing.value) {
    // 回车 event data 是 null
    if (event.data == null) {
      return
    }
    isComposing.value = true
  }
  // 清理定时器
  if (inputTimeout.value) {
    clearTimeout(inputTimeout.value)
  }
  // 重置定时器
  inputTimeout.value = setTimeout(() => {
    isComposing.value = false
  }, 400)
}
// TODO注：是不是可以通过 @keydown.enter、@keydown.shift.enter 来实现，回车发送、shift+回车换行；主要看看，是不是可以简化 isComposing 相关的逻辑
const onCompositionstart = () => {
  isComposing.value = true
}
const onCompositionend = () => {
  setTimeout(() => {
    isComposing.value = false
  }, 200)
}

/** 真正执行【发送】消息操作 */
const doSendMessage = async content => {
  // 校验
  if (content.length < 1) {
    console.error('发送失败，原因：内容为空！')
    return
  }

  if (activeConversationId.value == null) {
    console.error('还没创建对话，不能发送!')
    return
  }
    // 增加问答次数
  aiQuestionCount.value++
   // 保存AI问答次数
  try {
    await saveRecord({
      brpNjId: gradeId.value,
      brpType: 'aiCount',
      brpProgress: aiQuestionCount.value
    })
  } catch (error) {
    console.error('保存AI问答次数失败:', error)
  }
  // 清空输入框
  prompt.value = ''
  // 执行发送
  await doSendMessageStream({
    conversationId: activeConversationId.value,
    content: content
  })
}

/** 真正执行【发送】消息操作 */
const doSendMessageStream = async userMessage => {
  // 创建 AbortController 实例，以便中止请求
  conversationInAbortController.value = new AbortController()
  // 标记对话进行中
  conversationInProgress.value = true
  // 设置为空
  receiveMessageFullText.value = ''

  try {
    // 1.1 先添加两个假数据，等 stream 返回再替换
    activeMessageList.value.push({
      id: -1,
      conversationId: activeConversationId.value,
      type: 'user',
      content: userMessage.content,
      createTime: new Date()
    })
    activeMessageList.value.push({
      id: -2,
      conversationId: activeConversationId.value,
      type: 'assistant',
      content: '思考中...',
      createTime: new Date()
    })

    // 1.3 开始滚动
    textRoll()

    // 2. 发送 event stream
    let isFirstChunk = true // 是否是第一个 chunk 消息段

    await sendChatMessageStream(
      userMessage.conversationId,
      userMessage.content,
      conversationInAbortController.value,
      enableContext.value,
      async res => {
        const { code, data, msg } = JSON.parse(res.data)
        if (code !== 0) {
          console.log(`对话异常! ${msg}`)
          return
        }
        // 如果内容为空，就不处理。
        // if (data.receive.content === '') {
        //   return
        // }
        receiveMessageFullText.value =
          receiveMessageFullText.value + data.receive.content
        // 首次返回需要添加一个 message 到页面，后面的都是更新
        if (isFirstChunk) {
          isFirstChunk = false
          // 弹出两个假数据
          activeMessageList.value.pop()
          activeMessageList.value.pop()
          // 更新返回的数据
          activeMessageList.value.push(data.send)
          activeMessageList.value.push(data.receive)
        }
      },
      error => {
        console.log(`对话异常! ${error}`)
        stopStream()
        // 需要抛出异常，禁止重试
        throw error
      },
      () => {
        stopStream()
      }
    )
  } catch {}
}

/** 停止 stream 流式调用 */
const stopStream = async () => {
  // tip：如果 stream 进行中的 message，就需要调用 controller 结束
  if (conversationInAbortController.value) {
    conversationInAbortController.value.abort()
  }
  // 设置为 false
  conversationInProgress.value = false
}

/**
 * 消息列表
 *
 * 和 {@link #getMessageList()} 的差异是，把 systemMessage 考虑进去
 */
const messageList = ref([])

// ============== 【消息滚动】相关 =============

/** 滚动到 message 底部 */
const scrollToBottom = async isIgnore => {
  // if (messageRef.value) {
  // messageRef.value.scrollToBottom(isIgnore)
  // }
}

/** 自提滚动效果 */
const textRoll = async () => {
  let index = 0
  try {
    // 只能执行一次
    if (textRoleRunning.value) {
      return
    }
    // 设置状态
    textRoleRunning.value = true
    receiveMessageDisplayedText.value = ''
    const task = async () => {
      // 调整速度
      const diff =
        (receiveMessageFullText.value.length -
          receiveMessageDisplayedText.value.length) /
        10
      if (diff > 5) {
        textSpeed.value = 10
      } else if (diff > 2) {
        textSpeed.value = 30
      } else if (diff > 1.5) {
        textSpeed.value = 50
      } else {
        textSpeed.value = 100
      }
      // 对话结束，就按 30 的速度
      if (!conversationInProgress.value) {
        textSpeed.value = 10
      }

      if (index < receiveMessageFullText.value.length) {
        receiveMessageDisplayedText.value += receiveMessageFullText.value[index]
        index++

        // 更新 message
        const lastMessage =
          activeMessageList.value[activeMessageList.value.length - 1]
        lastMessage.content = receiveMessageDisplayedText.value
        // 滚动到住下面
        await scrollToBottom()
        // 重新设置任务
        timer = setTimeout(task, textSpeed.value)
      } else {
        // 不是对话中可以结束
        if (!conversationInProgress.value) {
          textRoleRunning.value = false
          clearTimeout(timer)
        } else {
          // 重新设置任务
          timer = setTimeout(task, textSpeed.value)
        }
      }
    }
    let timer = setTimeout(task, textSpeed.value)
  } catch {}
}
</script>

<style scoped lang="scss">
@use 'sass:math';
@use 'sass:color'; // 引入 color 模块
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}

// 定义儿童风格的蓝紫色调
$primary-color: rgba(106, 90, 205, 0.52); // 主色调：蓝紫色
$secondary-color: rgba(147, 112, 219, 0.66); // 辅助色：亮蓝紫色
$accent-color: rgb(133, 89, 220); // 强调色：暗蓝紫色
$light-color: #ffffff; // 浅色背景：淡紫色
$text-color: #483d8b; // 文本颜色：靛蓝色

/* 添加过渡样式 */
.drawer-slide-enter-active,
.drawer-slide-leave-active {
  transition: all 0.3s ease;
}
.drawer-slide-enter-from,
.drawer-slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
.home-container ::v-deep(.el-drawer__body) {
  width: rpx(135);
  height: 100%;
  position: relative;
  background: linear-gradient(to bottom, #001169, #8a78d0);
}
.content-box {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column; /* 子元素上下排列 */
  background: linear-gradient(to bottom, #001169, #8a78d0);
}
.icon-expand {
  width: rpx(8);
  height: rpx(35);
  border-top-right-radius: rpx(5);
  border-bottom-right-radius: rpx(5);
  z-index: 9999;
  position: absolute;
  top: 50%;
  left: 18%;
  transform: translateY(-50%);
  cursor: pointer; // 添加鼠标指针样式
  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
.icon-expand .vertical-lines {
  color: #8a78d0;
  font-size: rpx(10);
}
.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #001169, #b4a8e1);
  display: flex;
}
.el-row {
  margin: auto;
  margin-top: rpx(20);
}
.tac ::v-deep(.el-menu) {
  background-color: transparent;
  border: none;
  width: 100%;
  margin-top: rpx(8);
}

/* 取消点击后的蓝色字体 el-sub-menu__title*/
.tac ::v-deep(.el-menu-item.is-active),
.tac ::v-deep(.el-sub-menu__title.is-active) {
  color: white;
}
// 取消鼠标悬浮颜色
.tac ::v-deep(.el-sub-menu__title) {
  width: rpx(130);
  height: rpx(20);
  margin-bottom: rpx(5);
  border-radius: rpx(6);
  // 添加flex布局使标题和图标两端对齐
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-menu ::v-deep(.el-sub-menu__title:hover),
.el-menu ::v-deep(.el-sub-menu__title:focus),
.el-menu ::v-deep(.el-sub-menu__title:active) {
  background: linear-gradient(to bottom, #fee78a, #ffce1b);
  background-color: transparent;
}
// 添加二级标题折叠图标样式
::v-deep(.el-sub-menu__icon-arrow) {
  color: white;
  font-size: rpx(10); // 增大图标尺寸
  margin-left: auto; // 将图标推到右侧
  margin-top: rpx(-5);
  display: block;
  width: rpx(16); // 确保有明确宽度
}
// 鼠标悬停时的图标样式
.el-menu ::v-deep(.el-sub-menu__title:hover .el-sub-menu__icon-arrow) {
  color: black; // 与悬停状态的文字颜色保持一致
}
.el-menu ::v-deep(.el-icon svg) {
  font-size: rpx(9);
}

.mb-2 {
  color: white;
  font-size: rpx(9);
}
.mb-2 img {
  width: rpx(10);
  height: rpx(10);
  vertical-align: middle;
  margin-top: rpx(-2);
}
.el-menu-item {
  width: rpx(100);
  height: rpx(20);
  margin-bottom: rpx(5);
  border-radius: rpx(6);
  color: white;
  font-size: rpx(8);
}
.el-menu ::v-deep(.el-sub-menu__title) {
  color: white;
  width: rpx(100);
  height: rpx(20);
  margin-bottom: rpx(5);
  font-size: rpx(8);
}
.el-menu ::v-deep(.el-sub-menu__title:hover),
.el-menu ::v-deep(.el-sub-menu__title:focus),
.el-menu ::v-deep(.el-sub-menu__title:active) {
  background: linear-gradient(to bottom, #fee78a, #ffce1b);
  color: black;
}
.el-menu ::v-deep(.el-menu-item:hover),
.el-menu ::v-deep(.el-menu-item:focus),
.el-menu ::v-deep(.el-menu-item:active) {
  background: linear-gradient(to bottom, #fee78a, #ffce1b);
  color: black;
  font-size: rpx(8);
  box-shadow: 0 4px 8px rgba(3, 3, 3, 0.3);
}
.el-menu .el-menu-item.is-active {
  background: linear-gradient(to bottom, #fee78a, #ffce1b);
  color: black;
  font-size: rpx(8);
  box-shadow: 0 4px 8px rgba(3, 3, 3, 0.3);
}
.drawer-box {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
  width: 80%;
}
.drawer-box .toggle-button {
  width: rpx(10);
  height: rpx(50);
  font-size: rpx(7);
  background-color: rgba(17, 23, 29, 0.2);
  border: none;
  position: relative;
  writing-mode: vertical-lr; // 文字垂直排列，从左到右
  text-orientation: upright; // 文字保持正立
}
.toggle-button:hover {
  left: 0;
}

.toggle-button.is-active,
.toggle-button:active,
.toggle-button:focus {
  background-color: rgba(165, 209, 247, 0.8);
  color: white;
  border: none; // 移除点击时的边框
  outline: none; // 移除点击时的外边框
}

.box-1 {
  width: 100%;
  height: rpx(50);
  margin-top: rpx(10);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: rpx(15); // 默认字体大小
}

.inner-box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: rpx(16); // 默认字体大小
}

.left-box {
  position: relative;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1; // 设置左侧盒子占比为 2
  cursor: pointer; // 添加鼠标指针样式
}
.box-icon {
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex; // 添加 flex 布局
  align-items: center; // 垂直居中
  color: white; // 设置图标颜色为白色
  padding-left: rpx(15);
  font-size: rpx(10); // 设置图标大小，可按需调整
}
.box-icon .left-icon {
  margin-left: rpx(10);
  margin-right: rpx(5); // 设置图标和文字之间的间距 ;
}

.left-box span {
  position: absolute;
  font-size: rpx(11); // 默认字体大小
  color: white;
}

.right-box {
  flex: 1;
  position: relative; // 添加相对定位;
}
.top-right-box {
  position: absolute; // 添加绝对定位
  // margin-top: rpx(9); // 调整上边距离
  margin-left: rpx(260); // 调整右边距离
  width: rpx(100); // 设置盒子宽度，可按需调整
  // height: 60px; // 设置盒子高度，可按需调整
  display: flex;
  justify-content: flex-end;
}
.top-right-box {
  ::v-deep(.el-input__wrapper) {
    height: rpx(15);
    font-size: rpx(6);
    background-color: rgb(255, 255, 255, 0.5);
    border-radius: rpx(12);
    border: white 1px solid;
    color: white;
  }
  ::v-deep(.el-input__icon) {
    color: white; // 设置输入框图标颜色为白色
  }
  // 添加占位符样式
  ::v-deep(.el-input__inner::placeholder) {
    color: white;
  }
  // 添加输入框文字颜色样式
  ::v-deep(.el-input__inner) {
    color: black;
  }
}
// 搜索框
.search-input {
  width: rpx(100);
  height: rpx(15);
  font-size: rpx(7);
}
.box-2 {
  width: 100%;
  flex: 1;
  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
  box-sizing: border-box;
  display: flex; // 确保子元素水平排列
  flex-wrap: wrap; // 允许子元素换行;
  align-content: center; // 顶部对齐;
  cursor: pointer; // 添加鼠标指针样式
}
.box-video {
  width: 100%;
  height: rpx(300);
  video.full-box-video {
    height: rpx(280);
    width: 67%;
    margin: 0 auto;
    border-radius: rpx(12);
    object-fit: cover;
  }
}

/* 隐藏 Chrome 视频控件的渐变背景等默认样式 */
video::-webkit-media-controls-panel {
  background: transparent !important; /* 去掉背景渐变，设为透明 */
}

.small-title {
  width: 100%;
  margin-top: rpx(-20);
  height: rpx(20);
  color: white;
  font-size: rpx(10);
  justify-content: center; //使子元素水平居中
}
.video-switch {
  width: 100%;
  // height: rpx(50);
  display: flex;
  margin-top: rpx(-20);
  // background-color: saddlebrown;
}
.caret-right,
.caret-left {
  width: rpx(50);
  margin: auto;
  display: flex;
  margin-top: rpx(5);
  margin-bottom: rpx(15);
}
.caret-left ::v-deep(.el-button.is-round),
.caret-right ::v-deep(.el-button.is-round) {
  width: rpx(50);
  height: rpx(15);
  color: white;
  font-size: rpx(7);
  border-radius: none;
  border: 1px white solid;
  background-color: rgb(255, 255, 255, 0.5); // 进度条背景颜色，调浅为半透明白色
  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
}
.caret-right img,
.caret-left img {
  width: rpx(12);
}

// 儿童风格试题弹框样式
.child-dialog {
  .el-dialog__header {
    display: none; // 隐藏原有的标题栏
  }

  .el-dialog__body {
    padding: rpx(20);
    position: relative;
  }

  .el-dialog__footer {
    border-top: none;
    padding: rpx(10) rpx(20);
    text-align: center;
    margin-top: auto; // 使底部按钮位于底部
  }

  .el-dialog__wrapper {
    // 修改半透明背景色
    background-color: rgba(0, 0, 0, 0.6);
  }

  .el-dialog {
    border: none;
    border-radius: rpx(20);
    background: linear-gradient(
      135deg,
      $light-color,
      #d8bfd8
    ); // 柔和的蓝紫色渐变
    overflow: hidden;
    display: flex; // 添加 flex 布局
    flex-direction: column; // 设置垂直布局
    min-height: 0; // 防止子元素溢出
    // 添加装饰元素
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: rpx(10);
      background: linear-gradient(90deg, $secondary-color, $accent-color);
    }
  }
}

// 问题标题样式
.question-title {
  padding: rpx(15);
  border-radius: rpx(12);
  margin-bottom: rpx(20);
  color: #483d8b;
  font-weight: bold;
  font-size: rpx(12);
  position: relative;
  display: flex;
  // align-items: center;

  .question-icon {
    background-color: $accent-color;
    color: white;
    width: rpx(24);
    height: rpx(24);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: rpx(10);
    font-weight: bold;
    box-shadow: 0 rpx(2) rpx(5) rgba($accent-color, 0.3);
  }
}

// 选项容器样式
.options-container {
  margin-bottom: rpx(20);
}

// 问题选项样式
.question-option {
  margin: rpx(8) 0;
  padding: rpx(10) rpx(15);
  border-radius: rpx(12);
  border: rpx(1) solid rgba($primary-color, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  background-color: white;
  box-shadow: 0 rpx(2) rpx(5) rgba($primary-color, 0.05);

  ::v-deep(.el-radio__label) {
    color: $text-color;
    margin-left: rpx(8);
    flex: 1;
    text-align: left;
    // 增大字体大小
    font-size: rpx(12);
  }

  // 选中时的样式变化
  .el-radio__input.is-checked + .el-radio__label {
    font-weight: bold;
    color: $accent-color;
  }

  &:hover {
    background-color: rgba($primary-color, 0.05);
    border-color: rgba($primary-color, 0.5);
    transform: translateY(-rpx(1));
  }
}

// 暂无选项样式
.no-options {
  color: rgba($text-color, 0.7);
  text-align: center;
  padding: rpx(20);
  font-size: rpx(12);
}

// 底部按钮样式
.child-button {
  min-width: rpx(80);
  height: rpx(30);
  border-radius: rpx(8);
  font-size: rpx(12);
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 rpx(2) rpx(8) rgba(0, 0, 0, 0.1);

  &.confirm {
    background: linear-gradient(to bottom, #ab81ff, #8559dc);
    border: none;
    border-right: 15px;
    color: white;

    &:hover {
      background: linear-gradient(
        to bottom,
        color.adjust(#ab81ff, $lightness: -5%),
        color.adjust(#8559dc, $lightness: -5%)
      );
      transform: translateY(-rpx(1));
      color: white;
    }
  }

  &.cancel {
    background: white;
    border: rpx(1) solid rgba($primary-color, 0.3);
    color: $text-color;

    &:hover {
      background: rgba($primary-color, 0.05);
      border-color: rgba($primary-color, 0.5);
      transform: translateY(-rpx(1));
    }
  }
}

// AI对话图标样式
.ai-icon-container {
  position: absolute;
  bottom: rpx(20);
  right: rpx(20);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-rpx(2));
  }

  .ai-icon {
    width: rpx(30);
    height: rpx(30);
    margin-bottom: rpx(0);
    filter: drop-shadow(0 rpx(2) rpx(4) rgba($primary-color, 0.3));
    // 添加过渡动画
    transition: transform 0.3s ease;
  }

  // 悬浮时放大效果
  .ai-icon:hover {
    transform: scale(1.5);
  }

  .ai-text {
    color: $text-color;
    font-size: rpx(8);
    background-color: rgba(255, 255, 255, 0.7);
    padding: rpx(2) rpx(5);
    border-radius: rpx(5);
  }
}

// AI消息样式
.ai-message {
  display: flex;
  align-items: flex-start;
  margin-bottom: rpx(15);

  .ai-avatar {
    width: rpx(30);
    height: rpx(30);
    border-radius: 50%;
    margin-right: rpx(10);
    background-color: $primary-color;
    padding: rpx(5);
    // box-shadow: 0 rpx(2) rpx(5) rgba($primary-color, 0.2);
  }

  .ai-text-content {
    background-color: $light-color;
    padding: rpx(8) rpx(12);
    border-radius: rpx(10);
    font-size: rpx(10);
    color: $text-color;
    max-width: 80%;
    // box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
  }
}

// 用户输入框样式
.user-input {
  ::v-deep(.el-input__wrapper) {
    height: rpx(23);
    border-top-left-radius: rpx(5);
    border-bottom-left-radius: rpx(5);
    border-color: rgba($primary-color, 0.3);

    &:focus-within {
      box-shadow: 0 0 0 rpx(1) rgba($primary-color, 0.5);
    }
  }

  ::v-deep(.el-input__inner) {
    font-size: rpx(10);
    // color: $text-color;
    text-indent: 1em;
  }
  ::v-deep(.el-input-group__append, .el-input-group__prepend) {
    background: linear-gradient(to bottom, #ab81ff, #8559dc);
    border-top-right-radius: rpx(5);
    border-bottom-right-radius: rpx(5);
    color: white;
    font-size: rpx(9);
  }
}
/* 定义淡入和缩放动画 */
.fade-scale-enter-active,
.fade-scale-leave-active {
  transition: all 0.5s ease;
}

.fade-scale-enter-from,
.fade-scale-leave-to {
  opacity: 0.1;
  transform: scale(0.9);
}

// 自定义试题弹框背景
.child-dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); // 半透明背景
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.child-dialog {
  border: none;
  border-radius: rpx(15);
  background: rgb(255, 255, 255, 0.8); // 柔和的蓝紫色渐变
  overflow: hidden;
  padding: rpx(5);
  // width: 40%;
  // height: 60%;
  position: relative;
}

// AI对话弹框样式
.ai-dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 1001;
  pointer-events: none;
}

.ai-dialog {
  border: none;
  border-radius: rpx(15);
  background: rgb(255, 255, 255, 0.8);
  overflow: hidden;
  padding: rpx(20);
  width: 30%;
  // 增加高度
  height: 80%;
  margin-right: rpx(50);
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: rpx(10);
  }
}

.ai-dialog-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: rpx(15);
  margin-top: rpx(-10);

  img {
    width: rpx(15);
  }

  h3 {
    color: black;
    font-size: rpx(12);
  }

  .close-btn {
    padding: 0;
    width: rpx(20);
    height: rpx(20);
    font-size: rpx(16);
    line-height: 1;
    position: absolute;
    background-color: transparent;
    border: none;
    margin-left: rpx(200);
  }
}

.ai-dialog-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ai-message-history {
  flex: 1;
  // 当内容超出容器高度时，显示垂直滚动条
  overflow-y: auto;
  margin-bottom: rpx(15);
  // 可以根据实际情况调整最大高度
  font-size: rpx(5);
  max-height: 50vh;
  // padding: 5px 10px;

  .message {
    display: flex;
    align-items: flex-start;
    margin-bottom: rpx(10);

    &.user {
      flex-direction: row-reverse;
    }

    .avatar {
      width: rpx(30);
      height: rpx(30);
      border-radius: 50%;
      margin: 0 rpx(10);
    }

    .user {
      width: 15px;
      height: 15px;
    }

    .message-content {
      background-color: #ffffff;
      font-size: rpx(5);
      max-width: 80%;
      color: black;
      box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
    }
  }
  // 滚动条整体样式
  &::-webkit-scrollbar {
    width: rpx(4); // 滚动条宽度
  }

  // 滚动条滑块样式
  &::-webkit-scrollbar-thumb {
    background-color: $primary-color; // 滑块颜色
    border-radius: rpx(4); // 滑块圆角
    transition: background-color 0.3s ease; // 颜色过渡效果

    &:hover {
      //background-color: darken($primary-color, 10%); // 悬停时滑块颜色加深
    }
  }

  // 滚动条轨道样式
  &::-webkit-scrollbar-track {
    background-color: rgba($primary-color, 0.2); // 轨道颜色
    border-radius: rpx(4); // 轨道圆角
  }

  .message {
    display: flex;
    align-items: flex-start;
    margin-bottom: rpx(10);

    &.user {
      flex-direction: row-reverse;
    }

    .avatar {
      width: rpx(30);
      height: rpx(30);
      border-radius: 50%;
      margin: 0 rpx(10);
    }

    .message-content {
      background-color: white;
      padding: rpx(8) rpx(12);
      border-radius: rpx(5);
      font-size: rpx(8);
      color: black;
      max-width: 80%;
      box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
    }
  }
}

// 优化发送按钮样式
.send-button {
  //background: linear-gradient(90deg, $primary-color, $secondary-color);
  border: none;
  color: white;

  &:hover {
    //background: linear-gradient(90deg, darken($primary-color, 5%), darken($secondary-color, 5%));
  }
}
</style>

<style lang="scss">
// 搜索下拉框样式
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
/* 消除小三角 */
.el-popper__arrow {
  display: none;
}
.el-popper.is-light,
.el-dropdown__popper.el-popper {
  background: transparent;
  border: none;
  box-shadow: none;
}
.el-dropdown__popper {
  --el-dropdown-menuItem-hover-color: none;
}
.el-autocomplete-suggestion .el-scrollbar__wrap {
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid white;
  border-radius: rpx(5);
  backdrop-filter: blur(rpx(5));
}
.el-autocomplete-suggestion li {
  color: black;
  font-size: rpx(7);
  padding: rpx(5) rpx(8); // 调整下拉项内边距
}
.el-autocomplete-suggestion li:hover {
  background: linear-gradient(to bottom, #ffefb0, #ffcc00);
}
</style>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
.default-messages {
  margin-top: rpx(-10);
  margin-bottom: rpx(5);
}
</style>