<script setup lang="ts">
import chatApi from '@/api/chat'
import { elScrollToBottom, elScrollToTop } from '@/utils/scroll'
import { copy } from '@/utils'
import hud from '@/utils/hud'

// 属性
const props = withDefaults(
  defineProps<{
    modelValue: boolean
    subjectId: any
    questionId: any
  }>(),
  {
    modelValue: false,
  },
)

// 事件
const emit = defineEmits(['update:modelValue'])

defineOptions({ name: 'AiReplyDia' })

// 解构参数
const { subjectId, questionId } = toRefs(props)
const SERVER_URL = import.meta.env.VITE_SERVER_URL
// 返回键的图标
const backIcon = `${import.meta.env.VITE_OSS_URL}/icon/left_arrow.svg`
// 正在加载中
const loading = ref(false)
const title = ref('DeepSeek深度解析')
// 控制器
let controller: any = null
// 数据
let reasoning = ref('')
let content = ref('')
const text = computed(() => {
  if (!reasoning.value) return content.value
  return `<blockquote>${reasoning.value}</blockquote>${content.value}`
})

function back() {
  if (loading.value) {
    hud.error('DeepSeek正在思考中，请稍后再退出')
    return
  }
  emit('update:modelValue', false)
}

watch([reasoning, content], () => {
  elScrollToBottom('.ai-reply-dia .box')
})

watch(
  () => props.modelValue,
  async newVal => {
    if (newVal) {
      // 正在加载中
      loading.value = true
      title.value = 'DeepSeek深度解析中...'
      controller = new AbortController()

      // 响应次数
      let count = 0

      // 请求服务器
      await chatApi.postChats({
        url: `${SERVER_URL}/chats/question/${subjectId.value}/${questionId.value}`,
        onMessage: (v1, v2) => {
          reasoning.value = v1
          content.value = v2
          count += 1
        },
        controller,
        onError: () => {
          hud.error('DeepSeek解析失败')
        },
      })

      // 加载完成
      loading.value = false
      title.value = 'DeepSeek深度解析'
      controller = null

      if (!text.value) {
        hud.error('DeepSeek解析失败')
      }

      if (count < 3) {
        // 说明是一次性返回的
        // 滚动到顶部即可
        elScrollToTop('.ai-reply-dia .box')
      }
    } else {
      // 清空数据
      reasoning.value = ''
      content.value = ''
    }
  },
)
</script>

<template>
  <div v-if="modelValue" class="ai-reply-dia g-main-bg">
    <div class="top">
      <img class="back" :src="backIcon" @click="back" />
      <LineFont class="title" :text="title" size="48" @click="copy(text)" />
    </div>
    <div class="main">
      <ElScrollbar class="box">
        <AiText :text="text" />
      </ElScrollbar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ai-reply-dia {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0;
  right: 0;
  top: 0;
  transition: opacity 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 2.08vh;

  .top {
    width: 100%;
    height: 8.33vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .back {
      position: absolute;
      top: 0;
      left: 0px;
      width: 10vh;
      padding: 1.67vh;
      height: auto;
      cursor: pointer;
    }
    .title {
      top: -0.83vh;
    }
  }

  .main {
    flex: 1;
    width: 100%;
    padding: 0 25px 2.08vh;
    border-radius: 1.67vh;
    overflow: auto;

    :deep(.el-scrollbar__wrap) {
      scrollbar-width: auto;
      scrollbar-color: rgba(0, 0, 0, 0.45) rgba(0, 0, 0, 0.45);
      ::-webkit-scrollbar {
        width: auto;
      }
    }
  }
}
</style>
